React - 高阶组件 && ES7装饰器

• 在组件化开发中，我们都希望能提高组件复用率，那么可复用的组件一定要功能单一，但是组件功能简单了相对来说组件就变弱了，在React中我们通过高阶组件来平衡这个矛盾

• 高阶组件：HOC(Higher-Order Components)，他是一个函数，接收一个组件，将该组件加工处理后得到一个升级加强的新组件

• 假设有一个 Lesson组件，组件中展示的数据部分来自父组件传递，部分要通过异步调用获取，那父组件提供不了的这部分数据就需要高阶组件来解决了，用高阶组件强化 Lesson组件

// src/component/Hoc.js
import React from 'react'

class Lesson extends React.Component{
  render () {
    return (
      <div>
        {/* name需要异步调用获取 */}
        {this.props.stage} - {this.props.name}
      </div>
    )
  }
}

export class Hoc extends React.Component {
  render () {
    return (
      <div>
        {/* 父组件只能提供stage属性 */}
        <Lesson stage="React"></Lesson>
      </div>
    )
  }
}

• 新增一个 extendLesson高阶组件来扩展 Lesson，然后调用一下生成一个扩展后的新组件 NewLesson

// src/component/Hoc.js
import React from 'react'

const extendLesson = Comp => {
  // 这里可以理解为通过api调用获取name属性
  let name = 'hoc'
  // 传递新属性name的同时，不要忘记带上组件由上级传递的属性
  return props => <Comp {...props} name={name}></Comp>
}

class Lesson extends React.Component{
  render () {
    return (
      <div>
        {/* name需要异步调用获取 */}
        {this.props.stage} - {this.props.name}
      </div>
    )
  }
}

// 通过高阶组件的扩展生成新组件，直接使用新组件就可以了
const NewLesson = extendLesson(Lesson)

export class Hoc extends React.Component {
  render () {
    return (
      <div>
        {/* 引入高阶组件扩展后的新组件 */}
        <NewLesson stage="React"></NewLesson>
      </div>
    )
  }
}

• 也可以将高阶组件扩展的方法中，返回的组件改为一个 class 类组件，在类组件中可以改写组件的生命周期

// src/component/Hoc.js
const extendLesson = Comp => {
  let name = 'hoc'
  return class newComp extends React.Component {
    componentDidMount () {
      console.log('newComp componentDidMount')
    }
    render () {
      return <Comp {...this.props} name={name}></Comp>
    }
  }
}

• 高阶组件同时还支持链式调用，当一级高阶组件不能满足组件的扩展时还可以再用一级，改写和结果如下：

// src/component/Hoc.js
// 再新增一个高阶组件，只做日志记录
const withLog = Comp => {
  console.log(`${Comp.name}渲染了`)
  return props => <Comp {...props}></Comp>
}

// 链式调用高阶组件
const NewLesson = withLog(extendLesson(withLog(Lesson)))

链式调用.jpg

• 从上面的链式调用可以看出高阶组件扩展组件的写法比较累赘，链式调用的时候嵌套太多，阅读体验和书写的感觉都很不好，所以我们引入ES7中的装饰器用来解决这种繁琐的语法问题，引入装饰器需要先安装 react-app-rewired、customize-cra，并且在根目录下新建 config-overrides.js 文件做相应的 webpack 配置，然后使用 @高阶组件名 就可以使用了

// package.json

// 安装版本
"react-app-rewired": "^2.0.2-next.0",
"customize-cra": "^1.0.0"

// 修改对应命令
"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-app-rewired eject"
},

// config-overrides.js

const {override, addDecoratorsLegacy} = require('customize-cra')

module.exports = override(
  // 装饰器
  addDecoratorsLegacy()
)

// src/component/Hoc.js

// 装饰器只能用在class类组件上，只作用于紧跟其后的class组件
// 装饰器扩展后的组件需要导出的话，只能在组件后面加上：export 组件名 
// 装饰器是按照从上往下顺序执行的，也就是这里的执行顺序是 withLog - hocComponent - withLog
// 所以每个装饰器执行的时候，使用的都是上一个装饰器已经扩展之后的组件

@withLog
@hocComponent
@withLog
class Lesson extends React.Component{
  render () {
    return (
      <div>
        {/* name需要异步调用获取 */}
        {this.props.stage} - {this.props.name}
      </div>
    )
  }
}

// 这时候再引入子组件Lesson的时候直接引入就可以了，不用再像链式调用那样先生成一个新变量
export class Hoc extends React.Component {
  render () {
    return (
      <div>
        <Lesson stage="React"></Lesson>
      </div>
    )
  }
}