React高阶组件链式调用以及装饰器的使用

今天写一些React高阶组件的demo(此项目demo基于next.js写的)，高阶组件在开发中用的也比较多，熟练使用高阶组件有利于我们封装一些公共的组件。高阶组件其实就是一个函数它接收一个组件作为参数并返回。

开始写我们的代码，创建一个Demo组件，下面写的高阶组件都调用这个组件。

function Demo(props){
    return <div>这是被包裹的组件----WithHoc：{props.name}</div>//通过高阶组件把name传过来
}
//实现一个高阶组件
function WithHoc(Comp){
  const name="这是一个函数高阶组件"
  return function (props) {//保留组件原有的属性
    return <Comp {...props} name={name}></Comp>
  }
}
//可以这样导出
export default WithHoc(Demo)

1.png

高阶组件链式调用

再创建一个高阶组件WithHocTwo这次返回一个类组件，并且重写他的生命周期，让他也作用于Demo组件

//高阶组件2给传入的组件传递一个word属性
function WithHocTwo(Comp){
  return class extends React.Component{
    state = {
      word: ""
    }
    componentDidMount(){
      setTimeout(()=>{
        this.setState({word: "这是一个类高阶组件"})
      },1000)
    }
    render(){
      return(
        <Comp {...this.props} word={this.state.word}></Comp>
      )
    }
  }
}
//在Demo组件中接收word
function Demo(props){
  return <div>这是被包裹的组件----WithHoc：{props.name}----WithHocTwo：{props.word}</div>
}
//修改导出的代码链式调用写法
export default WithHocTwo(WithHoc(Demo))

2.png

装饰器写法

要使用装饰器首先我们要去安装一下依赖包

npm install @babel/plugin-proposal-decorators -S 或
cnpm install @babel/plugin-proposal-decorators -S 或
yarn add  @babel/plugin-proposal-decorators

找到根目录下的.babelrc配置如下代码

{
    "presets": ["@babel/react","next/babel"],
    "plugins": [
        ["import", {
          "libraryName": "antd",
          "style": "css" // `style: true` 会加载 less 文件
        },
        "transform-decorators-legacy"
      ],
    ["styled-components", { "ssr": true, "displayName": false }],
    //添加下面这段代码配置，可以识别解析装饰器
    ["@babel/plugin-proposal-decorators",{"legacy": true }]
  ]
}

装饰器修饰的组件是类组件，装饰器作用于紧挨着他的类组件，放在类组件的上面，一个类组件上面可放多个装饰器，按从上到下顺序执行。
下面修改代码：

//前面高阶组件的代码不变，在Demo组件上面放上装饰器
@WithHoc
@WithHocTwo
//将Demo组件改为类组件
class Demo extends React.Component{
  render(){
    return <div>这是被包裹的组件----WithHoc：{this.props.name}----WithHocTwo：{this.props.word}</div>
  }
}
//使用装饰器后我们就可以直接导出Demo组件了
export default Demo

3.png

一样可以正常展示。