React Advanced components

What are higher-order components

High-order component definition: A high-order component is a function that takes a component as an argument and returns a new component, which is a high-order component. Higher-order components transform one component into another mainly by enhancing the original component, logic reuse and so on.

High-level components use and write structures

Before introducing higher-order components, let’s look at how to use them. There are two ways:

Call as a function

function App() {}

export default observer(App)
Copy the code

Decorator mode

@observer
class App extends React.Component {}
Copy the code

Class decorators are new to ES6, and they behave like this

@decorator
class A {}

/ / is equivalent to

class A {}
A = decorator(A) || A;
Copy the code

Some higher-order components can also pass parameters

function App() {}

export default connect(mapPropsToState)(App)
Copy the code

With the above use, we can basically know the writing structure of higher-order components

function observer(WrappedComponent) {
  return class extends React.Component {

    /** write logic **/

    render() {
      <WrappedComponent {. this.props} / >}}}Copy the code

function observer(WrappedComponent) {
  return (props) = > <WrappedComponent {. props} / >
}
Copy the code

Some higher-order components require parameters, such as Connect for React-Redux

connect(mapStateToProps)(Component)
Copy the code

For such higher-order components we need another layer of abstraction

function connect (mapStateToProps){

    return function wrapWithConnect(WrappedComponent) {
      
      return function ConnectFunction(props){}}}Copy the code

Implementation of higher-order components

The property broker

Add new properties to the component, such as the Mobx-React Inject component

const inject = (. storeNames) = > component= > {
  const Injector = React.forwardRef((props, ref) = > {
    const context = useContext(MobXProviderContext)

    constnewProps = { ... props, ... context// Add attributes to the component
    }
    if (ref) {
      newProps.ref = ref
    }
    return React.createElement(component, newProps)
  })

  return Injector
}
Copy the code

Hijack rendering

The Observer for Mox-React, for example, hijacks the rendering of components to make them automatically updatable

The idea behind the Observer implementation is as follows: we simplify the process primarily to illustrate the writing of higher-order components

function observer(WrappedComponent) {

  // For class components
  if (component.prototype && component.prototype.isReactComponent) {
    return makeClassComponentObserver(WrappedComponent)
  }
  
  function makeClassComponentObserver(componentClass) {
    const target = componentClass.prototype
    const baseRender = target.render

    // Hijacked the render method of the original component to make it responsive
    target.render = function() {
      return makeComponentReactive.call(this, baseRender) // The implementation of makeComponentReactive omitted...
    }

    return componentClass
  }
}
Copy the code

conclusion

The above two high-order components are just a primer. High-order components can do a lot of things, such as reuse logic, props, enhancements, enabling components, control rendering, etc.

React Advanced components