React 高阶组件HOC用法归纳

2024-10-09 20:03:32

一句话介绍HOC

何为高阶组件(HOC),根据官方文档的解释：“高阶组件是react中复用组件逻辑的一项高级技术。它不属于react API的组成部分，它是从react自身组合性质中抽离出来的一种模式。具体来说，高阶组件是函数，它接受一个组件作为参数，然后返回一个新的组件

使用场景

将几个功能相似的组件里面的方法和react特性（如生命周期里面的副作用）提取到HOC中，然后向HOC传入需要封装的组件。最后将公用的方法传给组件。

优势

使代码简洁优雅、代码量更少

HOC(高阶组件)

/*
  HOC(高阶组件): 接收一个组件，返回包装后的组件(增强组件)
    - 不是React API
    - 是一种设计模式，类似于装饰器模式
    - ≈ Mixin && > Minxin

  const 包装后的组件 = 高阶组件(被包装的组件);
  // e.g. const Wrapper = withRouter(NavBar);

  高阶组件会把所有接收到的props，传递给被包装的组件（透传）
  ref 和 key 类似，不是一个prop，所以不会透传，ref会绑定到外层的包装容器上 | 解决方法可以参考下面的 <<处理ref>>
* */

怎样包装组件？

/*
  怎样包装组件？

  第一种： 普通包装
    export时就包装
      import React from 'react';
      import Hoc from './Hoc';

      class Header extends React.Component {
        render() {
          return <span>{ this.props.count }</span>
        }
      };

      export default Hoc(Header);

    ==========

    import后再包装：
      import Header from './header';
      import Hoc from './Hoc';

      const EnhanceHeader = Hoc(Header);

      const Home = () => {
        return (
          <div>
             <EnhanceHeader count={1} />
          </div>
        )
      }

  第二种： 装饰器包装，只能在类组件中使用
    import React from 'react';
    import Hoc from './Hoc';

    @Hoc
    export default class Header extends React.Component {
      render() {
        return <span>{ this.props.count }</span>
      }
    };

    =======

    @Hoc
    class Header extends React.Component {
      render() {
        return <span>{ this.props.count }</span>
      }
    };

    export default Header;
* */

定义一个简单的HOC

/*
  定义一个简单的HOC，接收一个组件，返回一个组件

  import React from 'react';

  // 返回类组件
  export default function Hoc(WrappedComponent) {
    /*
      return class extends React.Component {}
        - 在 React Developer Tools 中展示的名字是 Component

      return class Wrapper extends React.Component {}
        - 在 React Developer Tools 中展示的名字是 Wrapper
    *\
    return class extends React.Component {
      render() {
        return <WrappedComponent {...this.props} />;
      }
    };
  }

  // 返回函数式组件
  export default function Hoc(WrappedComponent) {
    /*
      return function(props) {}
        - 在 React Developer Tools 中展示的名字是 Anonymous

      return function Wrapper(props) {}
        - 在 React Developer Tools 中展示的名字是 Wrapper
    *\
    return function Wrapper(props) {
      return <WrappedComponent {...props} />;
    };
  }
* */

给Hoc传参

/*
  给Hoc传参

   // Hoc，可以接受任意参数
    export default function Hoc(WrappedComponent, title, user, data) {
      return class Wrapper extends React.Component {
        render() {
          return <WrappedComponent {...this.props} />
        }
      };
    };

    // 包装时传参
    const EnhanceHeader = Hoc(Header, 'title', { name: '霖'}, [1, 2, 3]);
* */

Hoc嵌套

/*
  Hoc嵌套，函数柯里化的原理

  // Hoc1: 给组件添加title属性
  export default function Hoc1(WrappedComponent, title) {
    return class extends React.Component {
      render() {
        return <WrappedComponent title={title} {...this.props} />
      }
    };
  };

  // Hoc2: 修改组件的显示内容
  export default function Hoc2(WrappedComponent, content) {
    return class extends WrappedComponent { // 这里用了反向继承
      render() {
        const elementTree = super.render(); // React用Js对象来模拟Dom树结构，可以通过修改Js对象的属性来操纵数据

        console.log(elementTree); // 不太了解里面的结构可以打印出来 + 官网cloneElement() 了解一下

        const newElementTree = React.cloneElement(elementTree, { children: `你的内容已被劫持: ${content}` });

        return newElementTree;
      }
    };
  };

  // 被包裹的组件
  export default class Header extends React.Component {
    render() {
      const { title } = this.props;

      return (
          <span title={title}>
            默认内容
          </span>
        )
    }
  };

  // 使用
  import Hoc1 from './Hoc1';
  import Hoc2 from './Hoc2';

  /*
    包装过程
    1. const Wrapper = Hoc2(Header, '内容');
    2. Hoc1(Wrapper)
  **
  const EnhanceHeader = Hoc1(Hoc2(Header, '内容'), '标题');

  export default function Home() {
    return (
      <div>
        <EnhanceHeader />
      </div>
    );
  };

* */

处理ref

/*
  处理ref
  e.g. Hoc1(Hoc2(Content))

  <Content ref={myRef} /> 给Content绑定的ref会绑定到Hoc1上，且不会继续向下传递

  第一种方法 React.forwardRef ===============

      在 Hoc1外面 用React.forwardRef()对ref做处理，用props来传递ref
      0. 在高阶组件外面包裹forwardRef，拦截获取ref，增加一个props（xxx={ref}），真实组件通过props.xxx获取
      1. 使用时传 ref={XXXX}  // 和第二种方法不同的地方
      2. 用forwardRef的第二个参数获取 ref
      3. 增加一个新的props，用来向下转发ref  e.g. forwardedRef={ref}
      4. 真实组件中绑定 ref={props.forwardedRef}

      const Home = (props) => {
        const connectRef = useRef(null);

        return (
          <div>
            <Content ref={connectRef} />
          </div>
        );
      };

      // 被包装组件
      const Content = (props) => {
        return (
          <div>
            <input type="password" ref={props.forwardedRef} />
          </div>
        );
      };

      // forwardRef的第二个入参可以接收ref，在Hoc外层对ref做处理
      export default React.forwardRef((props, ref) => {
        const Wrapper = React.memo(Content);  // Hoc

        // forwardRef包裹的是Wrapper
        // 需要在Wrapper中把ref向下传递给真实组件
        // Wrapper中增加一个props属性，把ref对象作为props传给子组件
        return <Wrapper {...props} forwardedRef={ref} />;
      });

  第二种方法 ==========

  0. 使用时就用一个props来保存ref
  1. 使用时传 xxx={ref}  // 和第一种方法的不同点
  2. 真实组件中绑定 ref={props.xxx}

  const Home = (props) => {
    const connectRef = useRef(null);

    return (
      <div>
        <Content forwardedRef={connectRef} />
      </div>
    );
  };

  // 定义高阶组件
  export const Hoc = (WrappedComponent) => {
    class Wrapper extends React.Component {
      render() {
        return <WrappedComponent {...props} />
      }
    }
  }

  // 被包装的组件
  const Content = (props) => {
    return (
      <div>
        <input type="password" ref={props.forwardedRef} />
      </div>
    );
  };

  // 包装过程
  export default Hoc(Content);

* */

使用被包装组件的静态方法

/*
  使用被包装组件的静态方法

  // 被包装组件，增加静态属性和方法
  export default class Header extends React.Component {
    static displayName = 'header';
    static showName = () => {
      console.log(this.displayName);
    };

    render() {
      return <span>header</span>
    }
  };

  // HOC
  export default function Hoc(WrappedComponent) {
    return class Wrapper extends React.Component {
      render() {
        return <WrappedComponent {...this.props} />
      }
    };
  };

  ===========

  // Hoc包装后的组件拿不到静态方法
    import Header from './header';
    import Hoc from './Hoc';

    const EnhanceHeader = Hoc(Header);

    export default function Home() {
      console.log(EnhanceHeader.displayName);   // undefined
      EnhanceHeader.showName();                 // undefined

      return <EnhanceHeader />
    }

  =============

  // 解决方法1：拷贝静态方法到HOC上
    export default function Hoc(WrappedComponent) {
      return class Wrapper extends React.Component {
        static displayName = WrappedComponent.displayName;  // 必须知道被包装组件中有什么静态方法
        static showName = WrappedComponent.showName;

        render() {
          return <WrappedComponent {...this.props} />
        }
      };
    };

  ==============

  // 解决方法2：自动拷贝所有静态属性和方法
    import React from 'react';
    import hoistNonReactStatic from 'hoist-non-react-statics';

    export default function Hoc(WrappedComponent) {

      class Wrapper extends React.Component {
        render() {
          return <WrappedComponent {...this.props} />
        }
      };

      hoistNonReactStatic(Wrapper, WrappedComponent);
      return Wrapper;
    };

  ==============

    // 解决方法3：导出组件时，额外导入静态属性和方法
      class Header extends React.Component {
        render() {
          return <span>header</span>
        }
      };

      const displayName = 'header';

      function showName() {
        console.log(Header.displayName);
      };

      Header.displayName =displayName;
      Header.showName = showName;

      export default Header
      export { displayName, showName }

    // 导入时
      import Header, { displayName, showName } from './header';
      import Hoc from './Hoc';

      const EnhanceHeader = Hoc(Header);

      export default function Home() {
        console.log(displayName);   // header
        showName();                 // header

        return <EnhanceHeader />
      }
* */

拦截传给被包装组件的props，对props进行增删改

/*
  拦截传给被包装组件的props，对props进行增删改
  export default function Hoc(WrappedComponent) {

    return class Wrapper extends React.Component {
      render() {
        // 过滤一些仅在当前Hoc中使用的props，不进行不必要的透传
        const { forMeProps, forOtherProps } = this.props;

        // 在该HOC内部定义，需要注入到被包装组件的额外的属性或方法
        const injectProps = some-state-or-method;         // 通常是state或实例方法

        // 为被包装组件传递上层的props + 额外的props
        return (
          <WrappedComponent
            injectProps={injectProps}    // 传递需要注入的额外props
            {...forOtherProps}           // 透传与后续相关的props
          />
        )
      }
    }
  }

  e.g.
    Hoc接收一个额外的props 'dealUpper'，如果为true，将data转换成大写
    dealUpper只在该Hoc中使用，所以没必要传给被包装的组件

  // HOC
  export default function Hoc(WrappedComponent) {
    return class Wrapper extends React.Component {
      render() {
        const { dealUpper, ...forOtherProps } = this.props;
        const { data } = forOtherProps;

        if (dealUpper) {
          Object.assign(forOtherProps, {data: data.toUpperCase()})
        }

        return <WrappedComponent {...forOtherProps} />
      }
    };
  };

  // 导出Hoc包装后的增强组件
  import React from 'react';
  import Hoc from './Hoc1';

  class Header extends React.Component {
    render() {
      console.log(this.props); // { data: 'ABC' }

      return <span>{this.props.data}</span>
    }
  };

  export default Hoc(Header); // 导出包装后的增强组件

  // 导入使用
  import Header from './header';

  const Home = () => {
    return <Header data={'abc'} dealUpper />
  }
* */

用HOC提取一些复杂的公共逻辑，在不同组件中扩展不同的功能

/*
  用HOC提取一些复杂的公共逻辑，在不同组件中扩展不同的功能
  import React from 'react';

  export const Hoc = (WrappedComponent, namespace) => {
    class Wrapper extends React.Component {
      state = {
        data: []
      }

      // 抽离的相同请求方法
      componentDidMount = () => {
        const { dispatch } = this.props;

        dispatch({
          type: `${namespace}/queryData`, // 动态请求不同的store
          payload: {},
          callback: res => {
            if (res) {
              this.setState({
                data: res.data
              })
            }
          }
        })
      }

      render() {
        return <WrappedComponent { ...this.props } data={this.state.data} />
      }
    }
  }

  // 包装A组件
  import Hoc from './Hoc';

  const A = ({ data }) => {
    ... 省略请求数据的逻辑

    return (data.map(item => item));
  }

  export default MyHoc(A, 'a');

  // 包装B组件
  import Hoc from './Hoc';

  const B = ({ data }) => {
    ... 省略请求数据的逻辑

    return (
      <ul>
        {
          data.map((item, index) => {
            return <li key={index}><{item}/li>
          }
        }
      </ul>
    )
  }

   export default Hoc(B, 'b');
* */

让不受控组件变成受控组件

/*
  让不受控组件变成受控组件

  // Hoc组件
  export default function Hoc(WrappedComponent) {
    return class Wrapper extends React.Component {
      state = {
        value: ''
      };

      onChange = (e) => {
        this.setState({
          value: e.target.value
        })
      };

      render() {
        const newProps = {
          value: this.state.value,
          onChange: this.onChange
        };

        return <WrappedComponent {...this.props} {...newProps} />
      }
    };
  };

  // 普通组件
  class InputComponent extends React.Component {
    render() {
      return <input {...this.props} />
    }
  }

  // 包装
  export default Hoc(InputComponent);
* */

反向继承

/*
  反向继承（在Hoc中使用被包装组件内部的状态和方法）
    - 反向继承的组件要是类组件，函数组件不行

  export const Hoc = (WrappedComponent) => {
    class Wrapper extends WrappedComponent { // super ≈ WrappedComponent里面的this
      render() {
        if (!this.props.data) {
            return <span>loading....</span>
        } else {
            return super.render() // 调用被包装组件的render()方法
        }
      }
    }
  }

  ====

  export default function Hoc(WrappedComponent) {
    return class extends WrappedComponent {
      render() {
        const elementTree = super.render(); // React用Js对象来模拟Dom树结构，可以通过修改Js对象的属性来操纵数据

        console.log(elementTree); // 不太了解里面的结构可以打印出来 + 官网cloneElement() 了解一下

        const newElementTree = React.cloneElement(elementTree, { children: `你的内容已被劫持` });

        return newElementTree;
      }
    };
  };
* */

渲染劫持

/*
  渲染劫持

  e.g. 控制组件是否渲染（可以做全局的loading效果，没有数据时显示loading...）

    // 基本的实现
    export const LoadingHoc = (WrappedComponent) => {
      class Wrapper extends React.Component {
        render() {
          if (!this.props.data) {
            return <span>loading....</span>
          } else {
            return <WrappedComponent {...this.props} />
          }
        }
      }
    }

    // 用反向继承实现
    export const LoadingHoc = (WrappedComponent) => {
      class Wrapper extends WrappedComponent { // super ≈ WrappedComponent里面的this
        render() {
          if (!this.props.data) {
            return <span>loading....</span>
       	  } else {
            return super.render() // 调用被包装组件的render()方法
          }
        }
      }
    }

  ======

  e.g. 劫持渲染的内容

    export default function Hoc2(WrappedComponent) {
      return class extends WrappedComponent { // 这里用了反向继承
        render() {
          const elementTree = super.render(); // React用Js对象来模拟Dom树结构，可以通过修改Js对象的属性来操纵数据

          console.log(elementTree); // 不太了解里面的结构可以打印出来 + 官网cloneElement() 了解一下

          const newElementTree = React.cloneElement(elementTree, { children: `你的内容已被劫持` });

          return newElementTree;
        }
      };
    };
* */

配置包装名

/*
  配置包装名：在调试工具 React Developer Tools 中更容易被找到
  e.g. 高阶组件为Hoc，被包装组件为WrappedComponent， 显示的名字应该是 Hoc(WrappedComponent)

    // 返回类组件
    export default function Hoc(WrappedComponent) {
      return class extends React.Component {
        /*
          没有在Hoc中定义 static displayName = 'XXX';
            - React Developer Tools 中展示的名字是 Anonymous

          没有在被包装组件中定义 static displayName = 'XXX';
            - React Developer Tools 中展示的名字是 undefined Hoc

          在被包装组件中定义 static displayName = 'header';
            - React Developer Tools 中展示的名字是 header Hoc
        *\
        static displayName = `Hoc(${WrappedComponent.displayName});

        render() {
          return <WrappedComponent {...this.props} />;
        }
      };
    }

    // 返回函数式组件
    export default function Hoc(WrappedComponent) {

      /*
        return function(props) {}
          - 在 React Developer Tools 中展示的名字是 Anonymous

        return function Wrapper(props) {}
          - 在 React Developer Tools 中展示的名字是 Wrapper
      *
      return function Wrapper(props) {
        return <WrappedComponent {...props} />;
      };
    }

    =======

    export default function Hoc(WrappedComponent) {
      const Wrapper = (props) => {
        return <WrappedComponent {...props} />;
      };

      /*
        没有在被包装组件中定义 static displayName = 'XXX';
          - React Developer Tools 中展示的名字是 undefined Hoc

        在被包装组件中定义 static displayName = 'header';
          - React Developer Tools 中展示的名字是 header Hoc
      *\
      Wrapper.displayName = `Hoc(${WrappedComponent.displayName})`;

      return Wrapper;
    }

    =====

    // 被包裹组件
    export default class Header extends React.Component {
      static displayName = 'header';

      render() {
        return <span>{ this.props.count }</span>
      }
    };

* */

不要在render中使用HOC

/*
  不要在render中使用HOC

  e.g.
  export default class Home extends React.Component {
    render() {
      // 每次render都会创建一个新的Wrapper
      // Wrapper1 !== Wrapper2
      // 导致高阶组件会卸载和重新挂载，状态会丢失（e.g. checkbox的选中丢失 | state被清空）
      × const Wrapper = Hoc(WrappedComponent);

      return <Wrapper />
    }
  }

 =========

  √ const Wrapper = myHoc(WrappedComponent);

  export default class Home extends React.Component {
    render() {
      return <Wrapper />
    }
  }
* */

Hoc的渲染顺序

/*
  Hoc的渲染顺序
    Hoc(Header)

    componentDidMount: Header -> HOC
    componentWillUnMount: HOC -> Header
* */

HOC 和 Mixin

/*
  HOC 和 Mixin
    HOC
     - 属于函数式编程思想
     - 被包裹组件感知不到高阶组件的存在
     - 高阶组件返回的组件会在原来的基础上的到增强

    Mixin
    - 混入模式，会在被包装组件上不断增加新的属性和方法
    - 被包裹组件可感知
    - 需要做处理（命名冲突、状态维护）
* */

以上就是React 高阶组件HOC用法归纳的详细内容，更多关于React 高阶组件HOC的资料请关注我们其它相关文章！

浅谈React高阶组件

前段时间在工作中写Hybrid页面时遇到了这样的一个场景,公司需要一系列的活动组件,在每个组件注册的时候都需要调用App端提供的一个接口.一开始也考虑了几种方式,包括mixin.组件继承以及react高阶组件.但经过了种种衡量,最后选择使用了高阶组件的做法. 那什么是高级组件?首先你得先了解请求ES6中的class只是语法糖,本质还是原型继承.能够更好的进行说明,我们将不会修改组件的代码.而是通过提供一些能够包裹组件的组件, 并通过一些额外的功能来增强组件.这样的组件我们称之为高阶组件(High
深入理解React高阶组件

1.在React中higher-order component (HOC)是一种重用组件逻辑的高级技术.HOC不是React API中的一部分.HOC是一个函数,该函数接收一个组件并且返回一个新组件.在React中,组件是代码复用的基本单位. 2.为了解释HOCs,举下面两个例子 CommentList组件会渲染出一个comments列表,列表中的数据来自于外部. class CommentList extends React.Component { constructor() { super(
react高阶组件添加和删除props

唠叨几句啦在看程墨老师的深入浅出高阶组件,开头一点提了一个需要,创建两个高阶组件,一个能给传入的元素自定义添加props,一个是删除特定的props.我刚刚做了一下,发现高阶组件需要区分好传入的是class还是react element, 同时也需要注意好return回去的是啥.顺便提一下高阶组件的概念,就说一个函数,能够接受一个组件作为参数,然后返回的时候,这个组件就带有这个高阶组件给的某些特性.我理解就跟掉泥坑了,得带点土出来一个道理. 对比一下两个组件,贴代码时刻来啦删除属性的高阶组件
手把手教您实现react异步加载高阶组件

本篇文章通过分析react-loadable包的源码,手把手教你实现一个react的异步加载高阶组件 1. 首先我们想象中的react异步加载组件应该如何入参以及暴露哪些API? // 组件应用 import * as React from 'react'; import ReactDOM from 'react-dom'; import Loadable from '@component/test/Loadable'; import Loading from '@component/test/
react高阶组件经典应用之权限控制详解

前言所谓高级组件,即:接受一个组件作为参数,并且其返回值也为一个react组件而大家应该都知道,权限控制算是软件项目中的常用功能了.在网站中,权限控制一般分为两个维度:页面级别和页面元素级别. 我们来说说页面元素粒度的权限控制.在某个页面中,有个"创建用户"的按钮,管理员才能看到. 一般想到的做法类似这样 class Page extends Component{ render() { let hasCreatePermission = tool.getAuth("cre
React 高阶组件HOC用法归纳

一句话介绍HOC 何为高阶组件(HOC),根据官方文档的解释:"高阶组件是react中复用组件逻辑的一项高级技术.它不属于react API的组成部分,它是从react自身组合性质中抽离出来的一种模式.具体来说,高阶组件是函数,它接受一个组件作为参数,然后返回一个新的组件使用场景将几个功能相似的组件里面的方法和react特性(如生命周期里面的副作用)提取到HOC中,然后向HOC传入需要封装的组件.最后将公用的方法传给组件. 优势使代码简洁优雅.代码量更少 HOC(高阶组件) /* HOC(
React 高阶组件入门介绍

高阶组件的定义 HoC 不属于 React 的 API,它是一种实现模式,本质上是一个函数,接受一个或多个 React 组件作为参数,返回一个全新的 React 组件,而不是改造现有的组件,这样的组件被称为高阶组件.开发过程中,有的功能需要在多个组件类复用时,这时可以创建一个 Hoc. 基本用法包裹方式 const HoC = (WrappendComponent) => { const WrappingComponent = (props) => ( <div className=&
React 高阶组件与Render Props优缺点详解

目录高阶组件增强型高级组件注入型高阶组件高阶组件 VS Render Props 总结高阶组件高阶组件(HOC)是一个接受组件作为参数并返回一个新组件的函数,如果多个组件有相同的逻辑,将这些逻辑用函数封装,使它们能跨组件共用,这种用法称为高阶组件.下面的代码演示什么是高阶组件: export default function WithPrintLog(InnerComponent) { return class extends React.Component{ componentDi
React高阶组件的使用浅析

目录高阶函数高阶组件 react常见的高阶函数高阶组件形式在学习高阶组件前,首先我们了解一下高阶函数高阶函数把一个函数作为另一个函数的参数,那么这个函数就是高阶函数高阶组件一个组件的参数是组件,并且返回值是一个组件,我们称这类组件为高阶组件 react常见的高阶函数 withRouter() memo() react-redux中connect 高阶组件形式 React中的高阶组件主要有两种形式:属性代理和反向继承属性代理:一个函数接收一个WrappedComponent组件作
React高阶组件使用教程详解

目录高阶组件(HOC) 概述使用HOC解决横切关注点问题不用改变原始组件使用组合约定-将不相关的 props 传递给被包裹的组件约定-最大化可组合性约定-包装显示名称以便轻松调试使用高阶组件的注意事项高阶组件(HOC) 概述是React复用组件逻辑的一种高级技巧,是一种基于React组合特性而形成的设计模式高阶组件是参数为组件,返回值为新组件的函数简单理解: 高阶组件本身是函数,传参数是组件,返回值也是组件: 高阶组件不用关心数据是如何渲染的,只用关心逻辑即可被包装的组
利用React高阶组件实现一个面包屑导航的示例

什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁,比如react-router 中的 withRouter 以及 react-redux 中 connect 等许多 API 都是以这样的方式来实现的. 使用 React 高阶组件的好处在工作中,我们经常会有很多功能相似,组件代码重复的页面需求,通常我们可以通过完全复制一遍代码的方式实现功能,但是这

React 高阶组件HOC用法归纳

一句话介绍HOC

使用场景

优势

相关推荐

随机推荐