- 在组件化开发中，我们都希望能提高组件复用率，那么可复用的组件一定要功能单一，但是组件功能简单了相对来说组件就变弱了，在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>
)
}
}
网友评论