React має потужну модель композиції і ми рекомендуємо використовувати композицію замість наслідування для повторного використання коду між компонентами.
\nВ цьому розділі ми розглянемо кілька проблем, котрі нові React-розробники вирішують за допомогою наслідування і покажемо, як вони вирішуються за допомогою композиції.
\nДеякі компоненти не знають заздалегідь про свої дочірні елементи. Це особливо характерно для таких компонентів як Sidebar чи Dialog, котрі представляють собою загальні контейнери.
Ми рекомендуємо, щоб такі компоненти використовували особливий проп children для передачі дочірніх елементів напряму до свого виводу:
function FancyBorder(props) {\n return (\n <div className={'FancyBorder FancyBorder-' + props.color}>\n {props.children} </div>\n );\n}Це дозволяє іншим компонентам передавати їм довільні дочірні елементи шляхом вкладення JSX:
\nfunction WelcomeDialog() {\n return (\n <FancyBorder color=\"blue\">\n <h1 className=\"Dialog-title\"> Welcome </h1> <p className=\"Dialog-message\"> Дякуємо, що завітали на борт нашого космічного корабля! </p> </FancyBorder>\n );\n}Усе, що знаходиться між JSX тегом <FancyBorder> буде передане в FancyBorder компонент як children проп. Оскільки FancyBorder рендерить {props.children} всередині <div>, передані елементи з’являться у фінальному виводі.
Іноді, хоч і не так часто, вам може знадобитись кілька подібних “слотів” у компоненті. У таких випадках ви можети придумати власне рішення замість використання children:
function SplitPane(props) {\n return (\n <div className=\"SplitPane\">\n <div className=\"SplitPane-left\">\n {props.left} </div>\n <div className=\"SplitPane-right\">\n {props.right} </div>\n </div>\n );\n}\n\nfunction App() {\n return (\n <SplitPane\n left={\n <Contacts /> }\n right={\n <Chat /> } />\n );\n}Такі React-елементи як <Contacts /> і <Chat /> є звичайними об’єктами, а отже ви можете передати їх в ролі пропсів, як і будь-які інші дані. Такий підхід може нагадати вам “слоти” в інших бібліотеках, але React не обмежує вас у тому, що ви можете передати як пропси.
Іноді ми розглядаємо компоненти як “особливий випадок” інших компонентів. Наприклад, ми можемо сказати, що WelcomeDialog є особливим випадком Dialog.
У React подібне також досягається композицією, коли більш “конкретний” компонент рендерить більш “загальний” і налаштовує його за допомогою пропсів:
\nfunction Dialog(props) {\n return (\n <FancyBorder color=\"blue\">\n <h1 className=\"Dialog-title\">\n {props.title} </h1>\n <p className=\"Dialog-message\">\n {props.message} </p>\n </FancyBorder>\n );\n}\n\nfunction WelcomeDialog() {\n return (\n <Dialog title=\"Ласкаво просимо\" message=\"Дякуємо, що завітали на борт нашого космічного корабля!\" /> );\n}Композиція працює так само добре для компонентів визначених як класи:
\nfunction Dialog(props) {\n return (\n <FancyBorder color=\"blue\">\n <h1 className=\"Dialog-title\">\n {props.title}\n </h1>\n <p className=\"Dialog-message\">\n {props.message}\n </p>\n {props.children} </FancyBorder>\n );\n}\n\nclass SignUpDialog extends React.Component {\n constructor(props) {\n super(props);\n this.handleChange = this.handleChange.bind(this);\n this.handleSignUp = this.handleSignUp.bind(this);\n this.state = {login: ''};\n }\n\n render() {\n return (\n <Dialog title=\"Програма дослідження Марсу\"\n message=\"Як ми можемо звертатися до вас?\">\n <input value={this.state.login} onChange={this.handleChange} /> <button onClick={this.handleSignUp}> Зареєструйте мене! </button> </Dialog>\n );\n }\n\n handleChange(e) {\n this.setState({login: e.target.value});\n }\n\n handleSignUp() {\n alert(`Ласкаво просимо на борт, ${this.state.login}!`);\n }\n}У Facebook ми використовуємо React у тисячах компонентів і ми не знайшли жодного випадку використання, в якому б ми могли порадити створення ієрархій наслідування компонентів.
\nПропси і композиція дають вам всю необхідну гнучкість, щоб налаштувати вигляд і поведінку компонента в явний і безпечний спосіб. Пам’ятайте, що компоненти можуть приймати довільні пропси, включно з примітивами, React-елементами чи функціями.
\nЯкщо ви хочете повторно використати функціональність, котра не відноситься до інтерфейсу користувача, ми рекомендуємо витягнути її в окремий JavaScript модуль. Компоненти можуть імпортувати його і використувати функцію, об’єкт чи клас без наслідування.
","frontmatter":{"title":"Композиція проти наслідування","next":"thinking-in-react.html","prev":"lifting-state-up.html"},"fields":{"path":"content/docs/composition-vs-inheritance.md","slug":"docs/composition-vs-inheritance.html"}}},"pageContext":{"slug":"docs/composition-vs-inheritance.html"}},"staticQueryHashes":[]}