什么是高阶组件?
高阶组件只是一个包裹了另一个组件的 React 组件。
注1:确切的说高阶组件是一种 React 组件模式,它是一个 JavaScript 函数,将组件作为参数并返回一个新组件。
分为两类
- Props Proxy(属性代理)
- Inheritance Inversion(反向继承)
HOC有什么用?
- 代码重用,逻辑和引导抽象
- 渲染劫持(Render Highjacking)
- state(状态)抽象和操作
- props(道具)操作
代码如下:
import React from "react"
/**
* HOC
* 属性代理
* @param {*} WrappedComponent
*/
export function propsHoc(WrappedComponent) {
return class PropsHOC extends React.Component {
constructor(props) {
super(props)
this.state = {
name: "jack",
}
}
componentDidMount() {
console.log(new Date().format("yyyy-MM-dd HH:mm:ss"));
console.log(this.props);
console.log(this.state);
}
render() {
return (
<div>
<WrappedComponent {...this.props} {...{ name: this.state.name }} />
</div>
)
}
}
}
/**
* HOC
* 反向继承
* @param {*} WrappedComponent
*/
export function inversionHoc(WrappedComponent) {
return class InversionHoc extends WrappedComponent {
componentDidMount() {
this.setState({ name: "rose" }, () => console.log(this.state))
}
render() {
console.log(this.state)
return super.render()
}
}
}
/**
* 使用方法 1.注解 2.propsHoc(Index), inversionHoc(Index)
*/
@inversionHoc
@propsHoc
class Index extends React.Component {
}
标题:React 高阶组件(Higher Order Component,简称:HOC)
作者:pengdongliang
地址:https://www.p0d0.com/articles/2019/08/30/1573740604148.html