Все мы уже некоторое время используем HOC, будь то компоненты connect или styled от react-redux, но иногда мы просто привыкаем к использованию формата, не понимая, что происходит. под капотом. Это просто так работает! и мы преодолеваем это. В большинстве случаев это нормально, но если мы когда-нибудь захотим настроить, как что-то работает из коробки, нам нужно понять, как это работает.
Компоненты более высокого порядка - это, в простейшем смысле, просто функции, которые принимают компонент реакции в качестве входного параметра и возвращают компонент реакции. Теперь важно отметить, что компоненты, объявленные всеми возможными способами, могут быть переданы в HOC как параметры. Мы также можем возвращать компоненты из HOC в любом желаемом формате. Мы также можем съесть начальный переданный компонент и вернуть совершенно новый компонент, если захотим!
Подумайте, это вроде нормальные функции. Если у вас есть функция добавления, вы можете передать ей два параметра, и она вернет сумму. Если у вас есть четно-нечетная функция, в зависимости от того, какой параметр вы передаете, она вернет четное или нечетное. Точно так же в HOC вы можете решить, что вы хотите делать внутри переданного компонента. У вас есть доступ ко всем свойствам компонентов и методам жизненного цикла. Давайте продемонстрируем это с помощью простых HOC. Мы собираемся построить ниже -
У нас есть три простые функции: addAge добавляет свойство age к переданному компоненту, addName добавляет свойство name к переданному компоненту, addClass добавляет стиль к компонент. Важно отметить, что функциям не нужно знать, какой компонент передается. Все, о чем они заботятся, - это просто добавить одну опору к компоненту и вернуть ее.
Функция addAge принимает два параметра: первый - возраст, а второй - компонент, к которому нужно добавить эту опору. Аналогично и для других HOC. Вы можете заметить, что в строке 50 мы вызвали их как обычные функции. Если вы измените последовательность, в которой они вызываются, окончательный вывод не изменится, изменится только последовательность div-оболочки, которые отображаются HOC.
Вы также можете изменить свойства передаваемого компонента, переопределив их в HOC. Скажем, в любом из компонентов вы можете выполнить {… props, passProps: 10}, переданные свойства будут переопределены. Это не рекомендуется, потому что по замыслу HOC не должны мешать свойствам компонента, а должны только добавлять новое поведение или свойство.
