Введение в компоненты высшего порядка React

внешний интерфейс React.js
Введение в компоненты высшего порядка React

Определение компонентов высшего порядка

HoC — это не API React, это шаблон реализации, по сути, функция, которая принимает один или несколько компонентов React в качестве параметров и возвращает совершенно новый компонент React вместо преобразования существующего.Такой компонент вызывается для компонентов более высокого порядка. В процессе разработки, когда некоторые функции необходимо повторно использовать в нескольких классах компонентов, в это время можно создать Hoc.

Основное использование

  • способ упаковки
const HoC = (WrappendComponent) => {
    const WrappingComponent = (props) => (
        <div className="container">
            <WrappendComponent {...props} />
        </div>
    );
    return WrappingComponent;
};

В приведенном выше коде WrappendComponent принимается в качестве параметра.Этот параметр является обычным компонентом, который будет обернут HoC.Оберните div в рендере и дайте емуclassNameсвойства, результирующий WrappingComponent и входящий WrappendComponent — это два совершенно разных компонента.

В WrappingComponent вы можете читать, добавлять, редактировать, удалять переданные в WrappendComponentprops, вы также можете обернуть WrappendComponent другими элементами, чтобы реализовать стили обтекания, добавить макет или другие операции.

  • комбинация
const HoC = (WrappedComponent, LoginView) => {
    const WrappingComponent = () => {
        const {user} = this.props;  
        if (user) {
            return <WrappedComponent {...this.props} />
        } else {
            return <LoginView {...this.props} />
        }
    };
    return WrappingComponent;
};

В приведенном выше коде есть два компонента, WrappedComponent и LoginView, если входящийpropsсуществуют вuser, компонент WrappedComponent отображается нормально, в противном случае отображается компонент LoginView, позволяющий пользователю войти в систему. Параметров, передаваемых HoC, может быть несколько, и несколько компонентов передаются для настройки поведения нового компонента, например, главная страница отображается, когда пользователь вошел в систему, а интерфейс входа отображается, когда пользователь не вошел в систему. in; при отображении списка компоненты List и Loading передаются и добавляются к новому компоненту.

  • Наследование
const HoC = (WrappendComponent) => {
    class WrappingComponent extends WrappendComponent {
        render() (
            const {user, ...otherProps} = this.props;
            this.props = otherProps;
            return super.render();
        }
    }
    return WrappingComponent;
};

WrappingComponent — это новый компонент, который наследуется от WrappendComponent и разделяет функции и свойства родителя. Вы можете использовать super.render() или super.componentWillUpdate() для вызова родительской функции жизненного цикла, но это соединит два компонента вместе и уменьшит возможность повторного использования компонентов.

Инкапсуляция компонентов в React инкапсулируется в соответствии с идеей наименьшей доступной единицы В идеале компонент делает только одну вещь, которая соответствуетOOPПринцип единой ответственности в . Если функцию компонента необходимо улучшить, компонент должен быть улучшен путем объединения или добавления кода, а не изменения исходного кода.

Меры предосторожности

  • Не используйте компоненты более высокого порядка в функциях рендеринга
render() {
  // 每一次render函数调用都会创建一个新的EnhancedComponent实例
  // EnhancedComponent1 !== EnhancedComponent2
  const EnhancedComponent = enhance(MyComponent);
  // 每一次都会使子对象树完全被卸载或移除
  return <EnhancedComponent />;
}

в реакцииdiffАлгоритм сравнивает старое и новое деревья подобъектов и определяет, следует ли обновить существующее дерево подобъектов или удалить существующее поддерево и перемонтировать его.

  • Вы должны сделать копию статического метода
// 定义静态方法
WrappedComponent.staticMethod = function() {/*...*/}
// 使用高阶组件
const EnhancedComponent = enhance(WrappedComponent);

// 增强型组件没有静态方法
typeof EnhancedComponent.staticMethod === 'undefined' // true
  • Свойство Refs не может быть передано

указано в ГКref, и не будет передан дочернему компоненту, его нужно использовать через функцию обратного вызоваpropsпередача.

Ссылка на ссылку

Обратите внимание на публичный аккаунт WeChat: KnownsecFED, получайте больше качественной галантереи по коду!

Категории