浅谈 React 逻辑复用的几种方式

Question

平时写 React，一旦发现业务逻辑有重复比较多的地方，我们就需要考虑拆分复用。在 React Hooks 没出现前，复用组件逻辑通常有 高阶组件 ， render props 以及 有状态和无状态 几种方式。

高阶组件

所谓高阶组件（Higher Order Function），就是在函数里接收组件作为参数，然后包装一些自定义逻辑后返回新的组件。比如下面这个：

import utils from './utils'
const withDataProps = (WrappedComponent) => {
  const data = utils.getData()
  return (props) => (
      <WrappedComponent data={data} />
  )
}

可以看到，高阶组件能做的事情就是，接收一个组件，然后添加需要复用的逻辑作为 props 传给组件，最后返回一个新的包装后的组件。比如你现在同时有 A，B，C 三个组件需要用到上面这个 data，那你就可以直接调用 withDataProps 这个高阶组件：

const newComponentA = withDataProps(A)
const newComponentB = withDataProps(B)
const newComponentC = withDataProps(C)

render props

render props 跟高阶组件的区别在于 它是组件里接收 props 函数并作为子组件渲染 。它的基本思想是在 React 组件里通过调用 props 里某个属性，这个属性必须是个函数，然后函数必须返回一个 React 组件，通过 props 实现组件间的通信。比如下面这样：

import utils from './utils'
const withDataProps = (props) => {
  const data = utils.getData()
  return (
    <React.Fragment>
      {props.renderData({...props, data})}
    </React.Fragment>
  )
}

然后这样使用它：

<withDataProps
  renderData={(props) => {
    const {data} = props
    return <A data={renderData} />
  }}
/>

相比高阶组件，render props 更加灵活，因为它是通过 props 接收逻辑，这意味着组件可以选择性地接收一部分数据。