Detailed introduction to higher-order components in React

This article mainly introduces the introduction to React high-order components. In this article, we introduce in detail what high-order components are and how to use high-order components. Now we share them with you and give them a reference.

Definition of higher-order components

HoC does not belong to React’s API. It is an implementation pattern, which is essentially a function that accepts one or more React components. As a parameter, return a brand new React component instead of modifying the existing component. Such components are called higher-order components. During the development process, when some functions need to be reused in multiple component classes, a Hoc can be created.

Basic usage

Wrapping method

const HoC = (WrappendComponent) => {
 const WrappingComponent = (props) => (
  <p className="container">
   <WrappendComponent {...props} />
  </p>
 );
 return WrappingComponent;
};

In the above code, WrappendComponent is accepted as a parameter. This parameter is what will be HoC For ordinary wrapped components, wrap a p in render and give it the className attribute. The resulting WrappingComponent and the passed-in WrappendComponent are two completely different components.

In WrappingComponent, you can read, add, edit, and delete the props passed to WrappendComponent, and you can also wrap WrappendComponent with other elements to implement encapsulation styles, add layout, or other operations.

Composition method

const HoC = (WrappedComponent, LoginView) => {
 const WrappingComponent = () => {
  const {user} = this.props; 
  if (user) {
   return <WrappedComponent {...this.props} />
  } else {
   return <LoginView {...this.props} />
  }
 };
 return WrappingComponent;
};

There are two components in the above code, WrappedComponent and LoginView. If user exists in the incoming props, the WrappedComponent component will be displayed normally, otherwise Display the LoginView component to allow the user to log in. The parameters passed by HoC can be multiple. Pass multiple components to customize the behavior of the new component. For example, the main page is displayed when the user is logged in, and the login interface is displayed when the user is not logged in. When rendering the list, pass in the List and Loading components to add the new component. Loading behavior.

Inheritance method

const HoC = (WrappendComponent) => {
 class WrappingComponent extends WrappendComponent {
  render() (
   const {user, ...otherProps} = this.props;
   this.props = otherProps;
   return super.render();
  }
 }
 return WrappingComponent;
};

WrappingComponent is a new component that inherits from WrappendComponent and shares the functions and properties of the parent. You can use super.render() or super.componentWillUpdate() to call the parent's life cycle function, but this will couple the two components together and reduce the reusability of the component.

The packaging of components in React is based on the idea of ​​the smallest available unit. Ideally, a component only does one thing, which is in line with the single responsibility principle in OOP. If you need to enhance the functionality of a component, enhance the component by combining it or adding code instead of modifying the original code.

Note

Do not use higher-order components in the render function

render() {
 // 每一次render函数调用都会创建一个新的EnhancedComponent实例
 // EnhancedComponent1 !== EnhancedComponent2
 const EnhancedComponent = enhance(MyComponent);
 // 每一次都会使子对象树完全被卸载或移除
 return <EnhancedComponent />;
}

The diff algorithm in React will compare the old and new sub-object trees to determine whether Update the existing sub-object tree or drop the existing sub-tree and remount.

Static methods must be copied

// 定义静态方法
WrappedComponent.staticMethod = function() {/*...*/}
// 使用高阶组件
const EnhancedComponent = enhance(WrappedComponent);

// 增强型组件没有静态方法
typeof EnhancedComponent.staticMethod === 'undefined' // true

The Refs attribute cannot be passed

The ref specified in HoC will not be passed to the sub-component. It is required Passed using props through the callback function.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement a circular Nodelist Dom list using JS

How to implement text color change after clicking in Vue

How to set the background color for a separate page in Vue-cli

Refresh and tab switching in vue

The above is the detailed content of Detailed introduction to higher-order components in React. For more information, please follow other related articles on the PHP Chinese website!