A detailed description of the functional subcomponents and high-level components in react

This article brings the content is about react in the function sub-components and high-level components of the detailed, there is a certain reference value, the need for friends can refer to, I hope to help you.

After exposure to the react project, most people should have known or used the Hoc (high-order-components) and FACC (Functions as child components), Because these two patterns exist in most react open-source repositories. For example, the withrouter inside the react-router is a typical high-order component, which accepts one component to return another enhanced component. and motion in React-motion is a typical FACC application.

Both the hoc and the FACC are very similar, and they are the decorator patterns in similar design patterns. is to enhance the function on the original instance or unit.

Of course, not only some of the open source libraries will be used, in the normal code writing, there are many places are suitable for using hoc and FACC to encapsulate some logic. such as data buried points, new features of the toggle, access to transform data and so on. Useful for enhanced code readability and logical reuse.

HOC

Higher-order functions we have used, which is to accept a function and then return a encapsulated function:

Const PLUS = first = Second = (first + second) plus (1) (2)//3

Higher-order components are the concept of higher-order functions applied to higher-order components:

Const WITHCLASSNAME = composedcomponent = Props = (   <composedcomponent {... props} classname= ' Demo-class ' />)//Use Const Header = Text = (
Accepts a component to return a wrapped new component. What we often use withRouter is to add attributes to the original components props localtion . In addition to adding props, higher-order components can do the following:


 

 
  
 
   
Do something before and after a real call to a component, such as buried data.
 
   
Determine if the component should render or render something else, such as render error page after an error
 
   
Pass props and add new props
 
   
Do not render the component, instead of doing something else, such as rendering an external dom
 
  

 
For the first three points above are better understood, explain the 4th. For example, after you render a page, you need to change the title of the page. This is a ubiquitous requirement for single-page applications, and you can usually use hooks in specific router libraries. Of course, it can also be achieved through hoc:

Const Withtitlechange = Composedcomponent = = {  Return class extends React.component {    componentdidmount () {
  const {Title} = this.props      document.title = title    }    render () {      Const props = This.props      return & Lt composedcomponent {... props}/>}}    }  
FaCC

The same FACC is also used to enhance the ability of the original components of a pattern, the main function of the implementation of react Props.children can be anything, including functions. We can take the example of the above class with the FACC to realize it again:

Const Classnamewrapper = ({children}) + children (' demo-class ')//Use const HEADWITHCLASS = (Props) = = (  <cl Assnamewrapper>    {(Class) = 
In the FACC, you can also do a lot of things in the life cycle like hoc to encapsulate the original components, basically the FACC can be done by the hoc. I was in the project before the large-scale use of the hoc, and after some discussion, began a large-scale transformation into FACC.

Difference

Both are used to enhance the original components, the specific use of that? That's the right pattern? The community also has a lot of discussion on this point, for example, some people say that FACC is anti-pattern: Function as child components is an anti-pattern. The reason he gives is that children is not semantic and will cause confusion, and then he presents Component Injection the pattern that interested classmates can read.

Specific from a few aspects to do a comparison:


  

 
   
 
    
Combination Stage
 
   

  
The combination phase means the combination of HOC,FACC and components to be enhanced. It is obvious that FACC is more easily understood by the display of dependency information on the front and rear components. And the Hoc, how to bridge between each other, you have to go deep into the inside of the Hoc reading code to know the specific what the hoc did.

HOC exampleimport View from './view ' const Detailpage = Withserverdata (Withnavigator (View))
FaCC exampleimport View from './view ' const Detailpage = props = (  <FetchServerData>    {      data = (        <Navigator>          <view data={data} {... props}/>        </Navigator>      )    }  </ fetchserverdata>)
If you add 2 more hoc to the above, the combined process becomes very ugly. And FACC relatively, how to encapsulate, the data source from there, the component accepted the data are more conspicuous.


  

 
   
 
    
Performance optimization
 
   

  
In the hoc we can accept the host's prop, because props is transferred from the hoc, so we also have a complete life cycle, we can use shouldcomponentupdate optimization. FACC does not, however, not be able to compare props in its interior, unless the package is a component that can be compared props when combined.


  

 
   
 
    
Flexibility
 
   

  
FaCC is more flexible in the composition phase relative to hoc, and he does not specify how the enhanced component uses the attributes it passes on. and the hoc after the completion of the preparation is basically dead.

In addition, FACC will not create a new component, and the hoc will create a new component and then pass props down.

Summarize

Many of the open source libraries in the community have already used two modes, and there are many articles to compare. There is also a lot of heated discussion, of course, for the final solution to the problem, both models are good. For different reasons, you may choose to do the same.