Sharing examples of getting started with React high-order components

This article mainly introduces the introductory 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. The editor thinks it is quite good. Now I will share it with you and share it with everyone. Be a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Definition of higher-order components

HoC does not belong to React’s API. It is an implementation mode, which is essentially a function that accepts One or more React components are used as parameters and 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 , accepts WrappendComponent as a parameter, which is a normal component to be wrapped by HoC. Wrap a p in the render and give it the className attribute. The final 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. 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 is displayed normally, otherwise the LoginView component is displayed 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 />;
}

In React The diff algorithm compares the old and new sub-object trees to determine whether to update the existing sub-object tree or discard 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 pass the ref specified in

HoC. It will not be passed to the child component and needs to be passed through the callback function using props.

Related recommendations:

Use store to optimize communication between React components

Examples of communication between React components Tutorial

Comparison of HTML tags and React components_html/css_WEB-ITnose

##

The above is the detailed content of Sharing examples of getting started with React high-order components. For more information, please follow other related articles on the PHP Chinese website!