How to use High-order components in React
In this article Xiaobian for you to introduce in detail "how to use high-level components in React", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use high-level components in React" can help you solve your doubts.
What is it
A high-level component is a function that accepts a component and returns a new component. There are no side effects.
Why use it?
Encapsulate and extract the general logic of the components, so that this part of the logic can be better reused between components.
How to use it
/ / hoc is our high-level component, we can use es7 decorator syntax to use high-level components / / of course, we can also use es7, such as: let hocHello = hoc (Hello), but the syntax of es7 is more elegant. / / High-level components can be superimposed, and multiple high-level components @ hoc class Hello extends React.Component {/ /} can be used for one component.
How to realize
Attribute agent
The following example is the simplest implementation
Function hoc (ImportComponent) {return class Hoc extends React.Component {static displayName = `Hoc (${getDisplayName (ImportComponent)}) `/ / displayName is the display name of the set high-level component render () {return} function getDisplayName (Component) {return Component.displayName | Component.name | | "Component"}
Function: operate prop,refs to get component instance
Note: static methods cannot be passed and must be copied manually; refs cannot be passed.
Reverse inheritance
The following example is the simplest implementation
Export function hoc (ImportComponent) {return class Hoc extends ImportComponent {static displayName = `Hoc (${getDisplayName (ImportComponent)}) `render () {return super.render ()}
Function: operate state; render hijacking (operate its render function)
Note: by inheriting ImportComponent, we can get it except for some static methods, including lifecycle, state, and various function.
Principle
Do not modify the original component, the high-level component only wraps the subcomponents in the container component in a combined way, which is a pure function with no side effects.
Do not use high-order components inside the render method.
High-level components can add functionality to components, but they should not change functionality significantly.
For ease of debugging, select a display name to indicate that it is the result of a higher-order component.
After reading this, the article "how to use High-level components in React" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, please follow the industry information channel.
