Detailed explanation of using React high-order components

The definition of higher-order components is analogous to the definition of higher-order functions. Higher-order functions receive functions as parameters and return a function. Similarly, higher-order components receive a React component as a parameter and return a new React component. High-order components are essentially a function, not a component. Make sure you don’t get this wrong.

Why does React introduce the concept of higher-order components? How powerful is it? Let us first explain it with a simple example.

Suppose there is a component MyComponent that needs to get data from LocalStorage and then render the data to the interface. We can write the component code like this:

import React, { Component } from 'react'
class MyComponent extends Component {
  componentWillMount() {
      let data = localStorage.getItem('data');
      this.setState({data});
  }
  
  render() {
    return <p>{this.state.data}</p>
  }
}

The code is very simple, but when other components also need to obtain the same data from LocalStorage and display it, they need to be repeated in each component# The code in ##componentWillMount is obviously very redundant. Let's take a look at how this part of the code can be rewritten using higher-order components.

import React, { Component } from 'react'
function withPersistentData(WrappedComponent) {
  return class extends Component {
    componentWillMount() {
      let data = localStorage.getItem('data');
        this.setState({data});
    }
    
    render() {
      // 通过{...this.props} 把传递给当前组件的属性继续传递给被包装的组件WrappedComponent
      return <wrappedcomponent></wrappedcomponent>
    }
  }
}
class MyComponent2 extends Component {  
  render() {
    return <p>{this.props.data}</p>
  }
}
const MyComponentWithPersistentData = withPersistentData(MyComponent2)

withPersistentData is a higher-order component that returns a new component, which is processed uniformly in componentWillMount of the new component from LocalStorage The logic of obtaining the data, and then passing the obtained data to the wrapped component WrappedComponent in the form of attributes, so that this.props can be used directly in WrappedComponent. dataobtains the data that needs to be displayed, as shown in MyComponent2. When other components also need this logic, continue to use the withPersistentData high-order component to wrap these components.

Through this example, we can see that the main function of

high-order components is to encapsulate and separate the common logic of components, so that the common logic can be better reused among components. This implementation of higher-order components is essentially a decorator design pattern.

The parameter of a higher-order component is not just one component, it can also receive other parameters. For example, component

MyComponent3 needs to obtain data with key equal to name from LocalStorage instead of hard-coded data with key equal to data in the above example. withPersistentData This high-order component does not satisfy us. demand. We can let it receive an additional parameter to decide which data to obtain from LocalStorage:

import React, { Component } from 'react'
function withPersistentData(WrappedComponent, key) {
  return class extends Component {
    componentWillMount() {
      let data = localStorage.getItem(key);
        this.setState({data});
    }
    
    render() {
      // 通过{...this.props} 把传递给当前组件的属性继续传递给被包装的组件WrappedComponent
      return <wrappedcomponent></wrappedcomponent>
    }
  }
}
class MyComponent2 extends Component {  
  render() {
    return <p>{this.props.data}</p>
  }
  
  //省略其他逻辑...
}
class MyComponent3 extends Component {  
  render() {
    return <p>{this.props.data}</p>
  }
  
  //省略其他逻辑...
}
const MyComponent2WithPersistentData = withPersistentData(MyComponent2, 'data');
const MyComponent3WithPersistentData = withPersistentData(MyComponent3, 'name');

The new version of

withPersistentData allows us to obtain the values ​​of different keys demand. Parameters in higher-order components can of course also be functions, which we will explain further in the next section.

3. Advanced usage

The most common function signature form of higher-order components is this:

HOC([param])([WrappedComponent])

Rewrite

withPersistentData in this form, as follows:

import React, { Component } from 'react'
const withPersistentData = (key) => (WrappedComponent) => {
  return class extends Component {
    componentWillMount() {
      let data = localStorage.getItem(key);
        this.setState({data});
    }
    
    render() {
      // 通过{...this.props} 把传递给当前组件的属性继续传递给被包装的组件WrappedComponent
      return <wrappedcomponent></wrappedcomponent>
    }
  }
}
class MyComponent2 extends Component {  
  render() {
    return <p>{this.props.data}</p>
  }
  
  //省略其他逻辑...
}
class MyComponent3 extends Component {  
  render() {
    return <p>{this.props.data}</p>
  }
  
  //省略其他逻辑...
}
const MyComponent2WithPersistentData = withPersistentData('data')(MyComponent2);
const MyComponent3WithPersistentData = withPersistentData('name')(MyComponent3);

In fact, at this time

withPersistentData is the same as our original high-level The definition of components has changed. It has become a higher-order function, but the return value of this higher-order function is a higher-order component. HOC([param])([WrappedComponent])In this form, HOC([param]) is the real high-order component, we can regard it as a high-order component Variants of components. This form of high-order components appears in large numbers in third-party libraries because of its unique convenience - clear structure (separation of ordinary parameters and wrapped components) and easy combination. For example, connect in react-redux is a typical example. The definition of connect is as follows:

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])(WrappedComponent)

This function will connect a React component to the Redux store. During the connection process, connect takes the state required by the current component from the global store through the function type parameter

mapStateToProps, and converts the state into the props of the current component; at the same time, it uses the function type parameter mapDispatchToProps, passes the Redux action creators used by the current component to the current component in the form of props.

For example, the way we connect component ComponentA to Redux is similar to:

const ConnectedComponentA = connect(mapStateToProps, mapDispatchToProps)(ComponentA);

We can split it up and look at it:

// connect 是一个函数，返回值enhance也是一个函数
const enhance = connect(mapStateToProps, mapDispatchToProps);
// enhance是一个高阶组件
const ConnectedComponentA = enhance(ComponentA);

当多个函数的输出和它的输入类型相同时，这些函数是很容易组合到一起使用的。例如，有f，g，h三个高阶组件，都只接受一个组件作为参数，于是我们可以很方便的嵌套使用它们：f( g( h(WrappedComponent) ) )。这里可以有一个例外，即最内层的高阶组件h可以有多个参数，但其他高阶组件必须只能接收一个参数，只有这样才能保证内层的函数返回值和外层的函数参数数量一致(都只有1个)。

例如我们将connect和另一个打印日志的高阶组件withLog联合使用：

const ConnectedComponentA = connect(mapStateToProps)(withLog(ComponentA));

这里我们定义一个工具函数：compose(...functions)，调用compose(f, g, h) 等价于 (...args) => f(g(h(...args)))。用compose函数我们可以把高阶组件嵌套的写法打平：

const enhance = compose(
  connect(mapStateToProps),
  withLog
);
const ConnectedComponentA = enhance(ComponentA);

像Redux等很多第三方库都提供了compose的实现，compose结合高阶组件使用，可以显著提高代码的可读性和逻辑的清晰度。

4.与父组件区别

有些同学可能会觉得高阶组件有些类似父组件的使用。例如，我们完全可以把高阶组件中的逻辑放到一个父组件中去执行，执行完成的结果再传递给子组件。从逻辑的执行流程上来看，高阶组件确实和父组件比较相像，但是高阶组件强调的是逻辑的抽象。高阶组件是一个函数，函数关注的是逻辑；父组件是一个组件，组件主要关注的是UI/DOM。如果逻辑是与DOM直接相关的，那么这部分逻辑适合放到父组件中实现；如果逻辑是与DOM不直接相关的，那么这部分逻辑适合使用高阶组件抽象，如数据校验、请求发送等。

5. 注意事项

1）不要在组件的render方法中使用高阶组件，尽量也不要在组件的其他生命周期方法中使用高阶组件。因为高阶组件每次都会返回一个新的组件，在render中使用会导致每次渲染出来的组件都不相等（===），于是每次render，组件都会卸载（unmount），然后重新挂载（mount），既影响了效率，又丢失了组件及其子组件的状态。高阶组件最适合使用的地方是在组件定义的外部，这样就不会受到组件生命周期的影响了。

2）如果需要使用被包装组件的静态方法，那么必须手动拷贝这些静态方法。因为高阶组件返回的新组件，是不包含被包装组件的静态方法。hoist-non-react-statics可以帮助我们方便的拷贝组件所有的自定义静态方法。有兴趣的同学可以自行了解。

3）Refs不会被传递给被包装组件。尽管在定义高阶组件时，我们会把所有的属性都传递给被包装组件，但是ref并不会传递给被包装组件。如果你在高阶组件的返回组件中定义了ref，那么它指向的是这个返回的新组件，而不是内部被包装的组件。如果你希望获取被包装组件的引用，你可以把ref的回调函数定义成一个普通属性（给它一个ref以外的名字）。下面的例子就用inputRef这个属性名代替了常规的ref命名：

function FocusInput({ inputRef, ...rest }) {
  return <input>;
}
//enhance 是一个高阶组件
const EnhanceInput = enhance(FocusInput);
// 在一个组件的render方法中...
return (<enhanceinput> {
    this.input = input
  }
}>)
// 让FocusInput自动获取焦点
this.input.focus();</enhanceinput>

下篇预告：

React 深入系列7：React 常用模式

---

我的新书《React进阶之路》已上市，请大家多多支持！
链接：京东 当当

React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。

1. 基本概念

高阶组件是React 中一个很重要且比较复杂的概念，高阶组件在很多第三方库（如Redux）中都被经常使用。在项目中用好高阶组件，可以显著提高代码质量。

The definition of higher-order components is analogous to the definition of higher-order functions. Higher-order functions receive functions as parameters and return a function. Similarly, higher-order components receive a React component as a parameter and return a new React component. High-order components are essentially a function, not a component. Make sure you don’t get this wrong.

2. Application scenarios

Why does React introduce the concept of higher-order components? How powerful is it? Let us first explain it with a simple example.

Suppose there is a component MyComponent that needs to get data from LocalStorage and then render the data to the interface. We can write the component code like this:

import React, { Component } from 'react'
class MyComponent extends Component {
  componentWillMount() {
      let data = localStorage.getItem('data');
      this.setState({data});
  }
  
  render() {
    return <p>{this.state.data}</p>
  }
}

The code is very simple, but when other components also need to obtain the same data from LocalStorage and display it, they need to be repeated in each component# The code in ##componentWillMount is obviously very redundant. Let's take a look at how this part of the code can be rewritten using higher-order components.

import React, { Component } from 'react'
function withPersistentData(WrappedComponent) {
  return class extends Component {
    componentWillMount() {
      let data = localStorage.getItem('data');
        this.setState({data});
    }
    
    render() {
      // 通过{...this.props} 把传递给当前组件的属性继续传递给被包装的组件WrappedComponent
      return <wrappedcomponent></wrappedcomponent>
    }
  }
}
class MyComponent2 extends Component {  
  render() {
    return <p>{this.props.data}</p>
  }
}
const MyComponentWithPersistentData = withPersistentData(MyComponent2)

withPersistentData is a higher-order component that returns a new component, which is processed uniformly in componentWillMount of the new component from LocalStorage The logic of obtaining the data, and then passing the obtained data to the wrapped component WrappedComponent in the form of attributes, so that this.props can be used directly in WrappedComponent. dataobtains the data that needs to be displayed, as shown in MyComponent2. When other components also need this logic, continue to use the withPersistentData high-order component to wrap these components.

Through this example, we can see that the main function of

high-order components is to encapsulate and separate the common logic of components, so that the common logic can be better reused among components. This implementation of higher-order components is essentially a decorator design pattern.

The parameter of a higher-order component is not just one component, it can also receive other parameters. For example, component

MyComponent3 needs to obtain data with key equal to name from LocalStorage instead of hard-coded data with key equal to data in the above example. withPersistentData This high-order component does not satisfy us. demand. We can let it receive an additional parameter to decide which data to obtain from LocalStorage:

import React, { Component } from 'react'
function withPersistentData(WrappedComponent, key) {
  return class extends Component {
    componentWillMount() {
      let data = localStorage.getItem(key);
        this.setState({data});
    }
    
    render() {
      // 通过{...this.props} 把传递给当前组件的属性继续传递给被包装的组件WrappedComponent
      return <wrappedcomponent></wrappedcomponent>
    }
  }
}
class MyComponent2 extends Component {  
  render() {
    return <p>{this.props.data}</p>
  }
  
  //省略其他逻辑...
}
class MyComponent3 extends Component {  
  render() {
    return <p>{this.props.data}</p>
  }
  
  //省略其他逻辑...
}
const MyComponent2WithPersistentData = withPersistentData(MyComponent2, 'data');
const MyComponent3WithPersistentData = withPersistentData(MyComponent3, 'name');

The new version of

withPersistentData allows us to obtain the values ​​of different keys demand. Parameters in higher-order components can of course also be functions, which we will explain further in the next section.

3. Advanced usage

The most common function signature form of higher-order components is this:

HOC([param])([WrappedComponent])

Rewrite

withPersistentData in this form, as follows:

import React, { Component } from 'react'
const withPersistentData = (key) => (WrappedComponent) => {
  return class extends Component {
    componentWillMount() {
      let data = localStorage.getItem(key);
        this.setState({data});
    }
    
    render() {
      // 通过{...this.props} 把传递给当前组件的属性继续传递给被包装的组件WrappedComponent
      return <wrappedcomponent></wrappedcomponent>
    }
  }
}
class MyComponent2 extends Component {  
  render() {
    return <p>{this.props.data}</p>
  }
  
  //省略其他逻辑...
}
class MyComponent3 extends Component {  
  render() {
    return <p>{this.props.data}</p>
  }
  
  //省略其他逻辑...
}
const MyComponent2WithPersistentData = withPersistentData('data')(MyComponent2);
const MyComponent3WithPersistentData = withPersistentData('name')(MyComponent3);

In fact, at this time

withPersistentData is the same as our original high-level The definition of components has changed. It has become a higher-order function, but the return value of this higher-order function is a higher-order component. HOC([param])([WrappedComponent])In this form, HOC([param]) is the real high-order component, we can regard it as a high-order component Variants of components. This form of high-order components appears in large numbers in third-party libraries because of its unique convenience - clear structure (separation of ordinary parameters and wrapped components) and easy combination. For example, connect in react-redux is a typical example. The definition of connect is as follows:

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])(WrappedComponent)

This function will connect a React component to the Redux store. During the connection process, connect takes the state required by the current component from the global store through the function type parameter

mapStateToProps, and converts the state into the props of the current component; at the same time, it uses the function type parameter mapDispatchToProps, passes the Redux action creators used by the current component to the current component in the form of props.

For example, the way we connect component ComponentA to Redux is similar to:

const ConnectedComponentA = connect(mapStateToProps, mapDispatchToProps)(ComponentA);

We can split it and look at it:

// connect 是一个函数，返回值enhance也是一个函数
const enhance = connect(mapStateToProps, mapDispatchToProps);
// enhance是一个高阶组件
const ConnectedComponentA = enhance(ComponentA);

When the output of multiple functions These functions are easily combined when their input types are the same. For example, there are three high-order components f, g, and h, all of which only accept one component as a parameter, so we can easily nest them:

f( g( h(WrappedComponent) ) ). There can be an exception here, that is, the innermost higher-order component h can have multiple parameters, but other higher-order components must only receive one parameter. Only in this way can the return value of the inner layer and the number of function parameters of the outer layer be guaranteed. Consistent (only 1 in each case).

For example, we use connect with another high-order component that prints logs

withLog:

const ConnectedComponentA = connect(mapStateToProps)(withLog(ComponentA));

这里我们定义一个工具函数：compose(...functions)，调用compose(f, g, h) 等价于 (...args) => f(g(h(...args)))。用compose函数我们可以把高阶组件嵌套的写法打平：

const enhance = compose(
  connect(mapStateToProps),
  withLog
);
const ConnectedComponentA = enhance(ComponentA);

像Redux等很多第三方库都提供了compose的实现，compose结合高阶组件使用，可以显著提高代码的可读性和逻辑的清晰度。

4.与父组件区别

有些同学可能会觉得高阶组件有些类似父组件的使用。例如，我们完全可以把高阶组件中的逻辑放到一个父组件中去执行，执行完成的结果再传递给子组件。从逻辑的执行流程上来看，高阶组件确实和父组件比较相像，但是高阶组件强调的是逻辑的抽象。高阶组件是一个函数，函数关注的是逻辑；父组件是一个组件，组件主要关注的是UI/DOM。如果逻辑是与DOM直接相关的，那么这部分逻辑适合放到父组件中实现；如果逻辑是与DOM不直接相关的，那么这部分逻辑适合使用高阶组件抽象，如数据校验、请求发送等。

5. 注意事项

1）不要在组件的render方法中使用高阶组件，尽量也不要在组件的其他生命周期方法中使用高阶组件。因为高阶组件每次都会返回一个新的组件，在render中使用会导致每次渲染出来的组件都不相等（===），于是每次render，组件都会卸载（unmount），然后重新挂载（mount），既影响了效率，又丢失了组件及其子组件的状态。高阶组件最适合使用的地方是在组件定义的外部，这样就不会受到组件生命周期的影响了。

2）如果需要使用被包装组件的静态方法，那么必须手动拷贝这些静态方法。因为高阶组件返回的新组件，是不包含被包装组件的静态方法。hoist-non-react-statics可以帮助我们方便的拷贝组件所有的自定义静态方法。有兴趣的同学可以自行了解。

3）Refs不会被传递给被包装组件。尽管在定义高阶组件时，我们会把所有的属性都传递给被包装组件，但是ref并不会传递给被包装组件。如果你在高阶组件的返回组件中定义了ref，那么它指向的是这个返回的新组件，而不是内部被包装的组件。如果你希望获取被包装组件的引用，你可以把ref的回调函数定义成一个普通属性（给它一个ref以外的名字）。下面的例子就用inputRef这个属性名代替了常规的ref命名：

function FocusInput({ inputRef, ...rest }) {
  return <input>;
}
//enhance 是一个高阶组件
const EnhanceInput = enhance(FocusInput);
// 在一个组件的render方法中...
return (<enhanceinput> {
    this.input = input
  }
}>)
// 让FocusInput自动获取焦点
this.input.focus();</enhanceinput>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

react实现选中li高亮步骤详解

EasyCanvas绘图库在Pixeler项目开发中使用实战总结

The above is the detailed content of Detailed explanation of using React high-order components. For more information, please follow other related articles on the PHP Chinese website!