Концепция React: Композиция

В программировании композиция позволяет создавать более сложные функциональные возможности, комбинируя небольшие и целенаправленные функции.

Например, подумайте об использовании map() для создания нового массива из начального набора, а затем фильтрации результата с помощью filter() :

const list = ['Apple', 'Orange', 'Egg']
list.map(item => item[0]).filter(item => item === 'A') //'A'

В React композиция позволяет вам получить некоторые довольно интересные преимущества.

Вы создаете небольшие и компактные компоненты и используете их для создания дополнительной функциональности поверх них. Как?

Создание специализированной версии компонента

Используйте внешний компонент для расширения и специализации более общего компонента:

const Button = props => {
  return {props.text}
}

const SubmitButton = () => {
  return 
}

const LoginButton = () => {
  return 
}

Методы передачи в качестве реквизита

Компонент может сосредоточиться, например, на отслеживании события щелчка, и то, что на самом деле происходит, когда происходит событие щелчка, зависит от компонента контейнера:

const Button = props => {
  return {props.text}
}

const LoginButton = props => {
  return 
}

const Container = () => {
  const onClickHandler = () => {
    alert('clicked')
  }

  return 
}

Использование детей

Свойство props.children позволяет вводить компоненты внутри других компонентов.

Компонент должен выводить props.children в своем JSX:

const Sidebar = props => {
  return 
}

и вы встраиваете в него больше компонентов прозрачным способом:

Компоненты более высокого порядка

Когда компонент получает компонент в качестве опоры и возвращает компонент, он называется компонентом более высокого порядка.

Вы можете узнать больше о компонентах более высокого порядка в моей статье “Реагирующие компоненты более высокого порядка”.

Оригинал: “https://flaviocopes.com/react-composition/”