Definition of higher-order components

HoC is not part of the React API; it is an implementation pattern that is essentially a function that takes one or more React components as arguments and returns a completely new React component rather than modifying an existing one. Such components are called higher-order components. During development, when functionality needs to be reused across multiple component classes, you can create Hoc.

Basic usage

  • Parcel post
const HoC = (WrappendComponent) = > {
    const WrappingComponent = (props) = > (
        <div className="container">
            <WrappendComponent {. props} / >
        </div>
    );
    return WrappingComponent;
};
Copy the code

In the code above, take WrappendComponent as a parameter, which is the normal component that will be wrapped in HoC, wrap a div in render, give it the className attribute, The resulting WrappingComponent and the incoming WrappendComponent are two completely different components.

In the WrappingComponent, you can read, add, edit, and delete props passed to the WrappendComponent. You can also wrap the WrappendComponent with other elements that encapsulate styles, add layouts, or perform other operations.

  • combination
const HoC = (WrappedComponent, LoginView) = > {
    const WrappingComponent = (a)= > {
        const {user} = this.props;  
        if (user) {
            return<WrappedComponent {... this.props} /> } else { return <LoginView {... this.props} /> } }; return WrappingComponent; };Copy the code

There are two components in this code, WrappedComponent and LoginView. If there is a user in the props, the WrappedComponent is displayed normally, otherwise the LoginView component is displayed for the user to log in to. HoC transfer parameters can be multiple, transfer multiple components to customize the behavior of the new component, such as the user login state display home page, not login display interface; When rendering the List, pass in the List and Loading components to add Loading behavior to the new component.

  • Inheritance way
const HoC = (WrappendComponent) = > {
    class WrappingComponent extends WrappendComponent {
        render() (
            const{user, ... otherProps} =this.props;
            this.props = otherProps;
            return super.render(); }}return WrappingComponent;
};
Copy the code

WrappingComponent is a new component that inherits from WrappendComponent and shares parent functions and attributes. Can use super. Render () or super.com ponentWillUpdate () call the parent the life cycle of a function, but it will make the coupling of two components together, reduce component reusability.

The encapsulation of components in React is based on the idea of the smallest available unit. Ideally, a component only does one thing, in line with the single responsibility principle in OOP. If a component needs to be enhanced, it can be enhanced by composing or adding code rather than modifying the original code.

Matters needing attention

  • Do not use higher-order components in render functions
render() {
  // Each Render call creates a new EnhancedComponent instance
  // EnhancedComponent1 ! == EnhancedComponent2
  const EnhancedComponent = enhance(MyComponent);
  // Each time the subobject tree is completely unloaded or removed
  return <EnhancedComponent />;
}
Copy the code

The Diff algorithm in React compares the old and new subtree to determine whether to update the existing subtree or discard the existing subtree and remount it.

  • Static methods must be copied
// Define static methods
WrappedComponent.staticMethod = function() {/ *... * /}
// Use higher-order components
const EnhancedComponent = enhance(WrappedComponent);

// Enhanced components have no static methods
typeof EnhancedComponent.staticMethod === 'undefined' // true
Copy the code
  • Refs attribute cannot be passed

The ref specified in HoC is not passed to the child component; it needs to be passed using props via the callback function.

Refer to the link

  • React High Order Component
  • High order component

Pay attention to wechat public number: KnownsecFED, code to get more quality dry goods!