react高阶组件HOC_综合

定义： ?阶组件是参数为组件，返回值为新组件的函数。

基本使用：

// 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 !== EnhancedComponent2const EnhancedComponent = enhance(MyComponent);// 这将导致?树每次渲染都会进?卸载，和重新挂载的操作！return <EnhancedComponent />; }

原文：视频讲解笔记