How To Reuse React Components | by Sabesan Sathananthan | Codezillas

After Mixin, HOC high-order components take on the heavy responsibility and become the recommended solution for logical reuse between components. High-order components reveal a high-order atmosphere from their names. In fact, this concept should be derived from high-order functions of JavaScript. The high-order function is a function that accepts a function as input or output. It can be thought that currying is a higher-order function. The definition of higher-order components is also given in the React document. Higher-order components receive components and return new components. function. The specific meaning is: High-order components can be seen as an implementation of React decoration pattern. High-order components are a function, and the function accepts a component as a parameter and returns a new component. It will return an enhanced React components. High-order components can make our code more reusable, logical and abstract, can hijack the render method, and can also control propsand state.

Comparing Mixin and HOC, Mixin is a mixed-in mode. In actual use, Mixin is still very powerful, allowing us to share the same method in multiple components, but it will also continue to add new methods and attributes to the components. The component itself can not only perceive but also need to do related processing (such as naming conflicts, state maintenance, etc.). Once the mixed modules increase, the entire component becomes difficult to maintain. Mixin may introduce invisible attributes, such as in the Mixin method used in the rendering component brings invisible property props and states to the component. Mixin may depend on each other and is coupled with each other, which is not conducive to code maintenance. In addition, the methods in different Mixin may conflict with each other. Previously React officially recommended using Mixin to solve problems related to cross-cutting concerns, but because using Mixin may cause more trouble, the official recommendation is now to use HOC. High-order component HOC belong to the idea of ​​ functional programming. The wrapped components will not be aware of the existence of high-order components, and the components returned by high-order components will have a functional enhancement effect on the original components. Based on this, React officially recommends the use of high-order components.

Although HOC does not have so many fatal problems, it also has some minor flaws:

  • Scalability restriction: HOC cannot completely replace Mixin. In some scenarios, Mixin can but HOC cannot. For example, PureRenderMixin, because HOC cannot access the State of subcomponents from the outside, and at the same time filter out unnecessary updates through shouldComponentUpdate. Therefore, React After supporting ES6Class, React.PureComponent is provided to solve this problem.
  • Ref transfer problem: Ref is cut off. The transfer problem of Ref is quite annoying under the layers of packaging. The function Ref can alleviate part of it (allowing HOC to learn about node creation and destruction), so the React.forwardRef API API was introduced later.
  • WrapperHell: HOC is flooded, and WrapperHell appears (there is no problem that cannot be solved by one layer, if there is, then two layers). Multi-layer abstraction also increases complexity and cost of understanding. This is the most critical defect. In HOC mode There is no good solution.


Specifically, a high-order component is a function whose parameter is a component and the return value is a new component. A component converts props into a UI but a high-order component converts a component into another component. HOC is very common in React third-party libraries, such as Redux’s connect and Relay’s createFragmentContainer.

Attention should be paid here, do not try to modify the component prototype in the HOC in any way, but should use the combination method to realize the function by packaging the component in the container component. Under normal circumstances, there are two ways to implement high-order components:

  • Property agent Props Proxy.
  • Reverse inheritance Inheritance Inversion.

Property Agent

For example, we can add a stored id attribute value to the incoming component. We can add a props to this component through high-order components. Of course, we can also operate on the props in the WrappedComponent component in JSX. Note that it is not to manipulate the incoming WrappedComponent class, we should not directly modify the incoming component, but can operate on it in the process of combination.

We can also use high-order components to load the state of new components into the packaged components. For example, we can use high-order components to convert uncontrolled components into controlled components.

Or our purpose is to wrap it with other components to achieve the purpose of layout or style.

Reverse inheritance

Reverse inheritance means that the returned component inherits the previous component. In reverse inheritance, we can do a lot of operations, modify state, props and even flip the Element Tree. There is an important point in the reverse inheritance that reverse inheritance cannot ensure that the complete sub-component tree is parsed. That means if the parsed element tree contains components (function type or Class type), the sub-components of the component can no longer be manipulated.

When we use reverse inheritance to implement high-order components, we can control rendering through rendering hijacking. Specifically, we can consciously control the rendering process of WrappedComponent to control the results of rendering control. For example, we can decide whether to render components according to some parameters.

We can even hijack the life cycle of the original component by rewriting.

Since it is actually an inheritance relationship, we can read the props and state of the component. If necessary, we can even add, modify, and delete the props and state. Of course, the premise is that the risks caused by the modification need to be controlled by yourself. In some cases, we may need to pass in some parameters for the high-order attributes, then we can pass in the parameters in the form of currying, and cooperate with the high-order components to complete the operation similar to the closure of the component.


Don’t change the original components

Don’t try to modify the component prototype in HOC, or change it in other ways.

Doing so will have some undesirable consequences. One is that the input component can no longer be used as before the HOC enhancement. What is more serious is that if you use another HOC that also modifies componentDidUpdate to enhance it, the previous HOC will be invalid, and this HOC cannot be applied to functional components that have no life cycle.
Modifying the HOC of the incoming component is a bad abstraction, and the caller must know how they are implemented to avoid conflicts with other HOC. HOC should not modify the incoming components, but should use a combination of components to achieve functions by packaging the components in container components.

Filter props

HOC adds features to components and should not significantly change the convention itself. The components returned by HOC should maintain similar interfaces with the original components. HOC should transparently transmit props that have nothing to do with itself, and most HOC should include a render method similar to the following.

Maximum composability

Not all HOCs are the same. Sometimes it only accepts one parameter, which is the packaged component.

const NavbarWithRouter = withRouter(Navbar);

HOC can usually receive multiple parameters. For example, in Relay, HOC additionally receives a configuration object to specify the data dependency of the component.

const CommentWithRelay = Relay.createContainer(Comment, config);

The most common HOC signatures are as follows, connect is a higher-order function that returns higher-order components.

This form may seem confusing or unnecessary, but it has a useful property, like the single-parameter HOC returned by the connect function has the signature Component => Component , and functions with the same output type and input type can be easily combined. The same attributes also allow connect and other HOCs to assume the role of decorator. In addition, many third-party libraries provide compose tool functions, including lodash, Redux, and Ramda.

Don’t use HOC in the render method

React ’s diff algorithm uses the component identifier to determine whether it should update the existing subtree or discard it and mount the new subtree. If the component returned from the render is the same as the component in the previous render ===, React passes The subtree is distinguished from the new subtree to recursively update the subtree, and if they are not equal, the previous subtree is completely unloaded.
Usually, you don’t need to consider this when using it, but it is very important for HOC, because it means that you should not apply HOC to a component in the render method of the component.

This is not just a performance issue. Re-mounting the component will cause the state of the component and all its subcomponents to be lost. If the HOC is created outside the component, the component will only be created once. So every time you render it will be the same component. Generally speaking, this is consistent with your expected performance. In rare cases, you need to call HOC dynamically, you can call it in the component’s lifecycle method or its constructor.

Be sure to copy static methods

Sometimes it is useful to define static methods on React components. For example, the Relay container exposes a static method getFragment to facilitate the composition of GraphQL fragments. But when you apply HOC to a component, the original component will be packaged with a container component, which means that the new component does not have any static methods of the original component.

To solve this problem, you can copy these methods to the container component before returning.

But to do this, you need to know which methods should be copied. You can use hoist-non-react-statics to automatically copy all non-React static methods.

In addition to exporting components, another feasible solution is to additionally export this static method.

Refs will not be passed

Although the convention of high-level components is to pass all props to the packaged component, this does not apply to refs, because ref is not actually a prop, just like a key, it is specifically handled by React. If the ref is added to the return component of the HOC, the ref reference points to the container component, not the packaged component. This problem can be explicitly forwarded to the internal component through the React.forwardRefAPI refs.

Source link

Leave a Reply

Your email address will not be published. Required fields are marked *