react 学习（11）高阶组件

原创

测不准

发布于 2022-06-12 21:54:31

4320

发布于 2022-06-12 21:54:31

文章被收录于专栏：与前端沾边

react 中的高阶组件主要是对于 hooks 之前的类组件来说的，如果组件之中有复用的代码，需要重新创建一个父类，父类中存储公共代码，返回子类，同时把公用属性传到子类中的形式。当然对于现在的 hooks 来说基本用不到了。但是 HOC 的形式也是对应 react 而衍生出来的一种设计形式。我们仅需了解一下它的形式，你可能不会在工作中用到，但是当你维护老的项目时，也可能会接触到。本节只了解简单的使用（小编也没有深入使用过），不做深入探讨。

使用示例

高阶组件就是一个函数，传给它一个组件，它返回一个新的组件

const NewComponent = higherOrderComponent(OldComponent)

示例

我们定义组件共用 show 和 hide 方法。自己的组件显示之前可以有 loading 状态显示加载中

const loading = message => OldComponent => {
  return class extends React.Component {
    render() {
      const state = {
        show:() => {
          console.log('show')
        },
        hide: () => {
          console.log('hide')
        }
      }
      return (
        // 透传属性
        <OldComponent {...this.props} {...state} />
      )
    }
  }
}

定义子组件

class Hello extends React.Component{
  render() {
    return <div>
      hello
      <button onClick={this.props.show}>show</button>
      <button onClick={this.props.hide}>hide</button>
    </div>
  }
}

// loading 函数返回一个函数，参数为 oldComponent
const Com = loading('loading')(Hello)

ReactDOM.render(<Hello></Hello>, document.getElementById('root'))

可以看到子组件中已经可以调用父中的方法了。当然这种方式是使用调用函数形式，我们还可以使用装饰器，如下：

装饰器实现

首先需要安装依赖包，npm i react-app-rewired customize-cra @babel/plugin-proposal-decorators -D

react-app-rewired 用于我们改写 react 的启动方式
customize-cra 用于我们插入新的 babel 插件

因为装饰器 js 本身不支持，需要引入插件才能使用

// project/config-overrides.js
const {override, addBabelPlugin} = require('customize-cra')

module.exports = override(
  addBabelPlugin([
    "@babel/plugin-proposal-decorators", {"version": "legacy"}
  ])
)

// project/jsconfig.json
{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

这里的使用也比较简单，只是把 loading 函数的调用改为装饰器，我们可以看到同样的效果

@loading('xxx')
class Hello extends React.Component{
  render() {
    return <div>
      hello
      <button onClick={this.props.show}>show</button>
      <button onClick={this.props.hide}>hide</button>
    </div>
  }
}