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\"> Добро пожаловать </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":[]}