Композиция vs Наследование

React имеет мощную модель композиции, и мы рекомендуем использовать композицию вместо наследования для повторного использования кода между компонентами.

В этом разделе мы рассмотрим несколько проблем, когда новые React разработчики, используют наследование, и как мы можем решить проблему с помощью композиции.


Соглашения

Некоторые компоненты не знают своих наследников раньше времени. Это особенно характерно для таких компонентов, как Sidebar или Dialog, которые представляют собой общие «ящики».
Мы рекомендуем, чтобы такие компоненты использовали специальныеchildren props для вывода в дочерних элементах:

Это позволяет другим компонентам передавать им произвольные дочерние элементы, вставляя JSX:

Все, что находится внутри тега<FancyBorder>JSX, передается в компонентFancyBorder в качествеchildren prop. ПосколькуFancyBorder отображает {props.children} внутри <div>, переданные элементы отображаются в конечном выводе.

Хотя это менее распространено, иногда вам может понадобиться несколько «дыр» в компоненте. В таких случаях вы можете придумать свое собственное соглашение, а не использоватьchildren:

React элементы, такие как <Contacts /> и <Chat />, — это просто объекты, поэтому вы можете передавать их как props, так и любые другие данные.


Специализация

Иногда мы рассматриваем компоненты как «частные случаи» других компонентов. Например, мы можем сказать, что WelcomeDialog — это частный случай Dialog.
В React это достигается композицией, где более «конкретный» компонент отображает более «общий» и настраивает его с помощью props:

Композиция работает одинаково хорошо для компонентов, определенных как классы:


Итак, что насчет наследования?

В Facebook используют React в тысячах компонентов, и не обнаружили каких-либо вариантов использования, где рекомендуют создавать иерархии наследования компонентов.

Props и композиция дают вам всю гибкость, необходимую вам для индивидуального и удобного подбора внешнего вида и поведения компонента. Помните, что компоненты могут принимать произвольные prop, включая примитивные значения, элементы React или функции.

Если вы хотите повторно использовать функции, отличные от пользовательского интерфейса между компонентами, мы предлагаем извлечь его в отдельный модуль JavaScript. Компоненты могут импортировать его и использовать эту функцию, объект или класс, не расширяя его.

Leave a Reply

Добавить комментарий