react高阶组件HOC

客官°小女子只卖身不卖艺 2022-12-11 15:12 193阅读 0赞

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

基本使用：

// 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 />; }

原文：视频讲解笔记