Example Analysis of React High-order components

This article will explain in detail the example analysis of React high-level components. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Definition of high-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 parameters and returns a new React component, rather than transforming existing components, which are called high-level components. During the development process, when some functions need to be reused in multiple component classes, you can create a Hoc.

Basic usage

Parcel mode

Const HoC = (WrappendComponent) = > {const WrappingComponent = (props) = > (); return WrappingComponent;}

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

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

Combination mode

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

There are two components in the above code, WrappedComponent and LoginView. If there is a user in the incoming props, the WrappedComponent component is displayed normally, otherwise the LoginView component is displayed and the user is allowed to log in. The parameters passed by HoC can customize the behavior of the new component for multiple components, such as displaying the main page when the user is logged in, and displaying the login interface if the user is not logged in. When rendering the list, pass in List and Loading components to add loading behavior for the new component.

Inheritance mode

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 parent functions and properties. You can use super.render () or super.componentWillUpdate () to call the parent lifecycle function, but this will couple the two components together and reduce the reusability of the component.

The encapsulation of components in React is based on the idea of minimum available units. Ideally, a component only does one thing, which conforms to the principle of single responsibility in OOP. If you need to enhance the functionality of the component, enhance the component by combining or adding code, rather than modifying the original code.

Matters needing attention

Do not use higher-order components in render functions

Render () {/ / each render function call creates a new EnhancedComponent instance / / EnhancedComponent1! = = EnhancedComponent2 const EnhancedComponent = enhance (MyComponent); / / each time causes the sub-object tree to be completely unloaded or removed return;}

The diff algorithm in React compares the new sub-object tree with the old sub-object tree to determine whether to update the existing sub-object tree or discard the existing sub-tree and remount it.

Static methods must be copied

/ / define static methods WrappedComponent.staticMethod = function () {/ *... * /} / / use high-order components const EnhancedComponent = enhance (WrappedComponent); / / enhanced components have no static methods typeof EnhancedComponent.staticMethod = = 'undefined' / / true

The Refs property cannot be passed

The ref specified in HoC is not passed to the child component, but needs to be passed using props through the callback function.

This is the end of this article on "sample Analysis of React High-level components". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.