定义：
⾼阶组件是参数为组件，返回值为新组件的函数。
基本使用：
// HocPage.js
import React, {Component} from "react";
// hoc: 是⼀个函数，接收⼀个组件，返回另外⼀个组件
//这⾥⼤写开头的Cmp是指function或者class组件
const foo = Cmp => props => {
return (
<div className="border">
<Cmp {...props} />
</div>
);
};
// const foo = Cmp => {
// return props => {
// return (
// <div className="border">
// <Cmp {...props} />
// </div>
// );
// };
// };
function Child(props) {
return <div> Child {props.name}</div>;
}
const Foo = foo(Child);
export default class HocPage extends Component {
render() {
return (
<div>
<h3>HocPage</h3>
<Foo name="msg" />
</div>
);
}
}
链式调⽤
// HocPage.js
import React, {Component} from "react";
// hoc: 是⼀个函数，接收⼀个组件，返回另外⼀个组件
//这⾥⼤写开头的Cmp是指function或者class组件
const foo = Cmp => props => {
return (
<div className="border">
<Cmp {...props} />
</div>
);
};
const foo2 = Cmp => props => {
return (
<div className="greenBorder">
<Cmp {...props} />
</div>
);
};
// const foo = Cmp => {
// return props => {
// return (
// <div className="border">
// <Cmp {...props} />
// </div>
// );
// };
// };
function Child(props) {
return <div> Child {props.name}</div>;
}
const Foo = foo2(foo(foo(Child)));
export default class HocPage extends Component {
render() {
return (
<div>
<h3>HocPage</h3>
<Foo name="msg" />
</div>
);
}
}
装饰器写法
⾼阶组件本身是对装饰器模式的应⽤，⾃然可以利⽤
ES7
中出现的
装饰器语法来更优雅的书写代码。
npm install -D @babel/plugin-proposal-decorators
更改配置
//配置完成后记得重启下
const { addDecoratorsLegacy } = require("customizecra");
module.exports = override(
...,
addDecoratorsLegacy()//配置装饰器
);
//HocPage.js
//...
// !装饰器只能⽤在class上
// 执⾏顺序从下往上
@foo2
@foo
@foo
class Child extends Component {
render() {
return <div> Child {this.props.name}</div>;
}
}
// const Foo = foo2(foo(foo(Child)));
export default class HocPage extends Component {
render() {
return (
<div>
<h3>HocPage</h3>
{/* <Foo name="msg" /> */}
<Child />
</div>
);
}
}
组件是将
props
转换为
UI
，⽽⾼阶组件是将组件转换为另⼀个组件。
使⽤
HOC
的注意事项
⾼阶组件（
HOC
）是
React
中⽤于复⽤组件逻辑的⼀种⾼级技巧。 HOC ⾃身不是
React API
的⼀部分，它是⼀种基于
React
的组合特 性⽽形成的设计模式。
不要在
render
⽅法中使⽤
HOC
React
的
diffff
算法（称为协调）使⽤组件标识来确定它是应该更 新现有⼦树还是将其丢弃并挂载新⼦树。 如果从 render
返回 的组件与前⼀个渲染中的组件相同（===
），则
React 通过将 ⼦树与新⼦树进⾏区分来递归更新⼦树。 如果它们不相等，则 完全卸载前⼀个⼦树。
这不仅仅是性能问题
-
重新挂载组件会导致该组件及其所有⼦组
件的状态丢失。
render() {
// 每次调⽤ render 函数都会创建⼀个新的
EnhancedComponent
// EnhancedComponent1 !== EnhancedComponent2
const EnhancedComponent = enhance(MyComponent);
// 这将导致⼦树每次渲染都会进⾏卸载，和重新挂载的操作！
return <EnhancedComponent />; } 原文：视频讲解笔记
