脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React HOC

React HOC高阶组件深入讲解

 更新时间：2022年10月14日 08:43:48   作者：爱思考的猪  
高阶组件就是接受一个组件作为参数并返回一个新组件（功能增强的组件）的函数。这里需要注意高阶组件是一个函数，并不是组件，这一点一定要注意，本文给大家分享React 高阶组件HOC使用小结，一起看看吧

1. 概念

高阶组件和高阶函数的类似,使用函数接收一个组件,并返回一个组件。

function withList(WrapComponent) {
  return class extends Component {
    render() {
      return <div><WrapComponent {...this.props}/></div>;
    }
  }
};

高阶组件主要用作于逻辑的封装、拦截渲染、拦截生命周期:获取渲染性能,日志打点等，安按照实现方式可以分为属性代理和反向继承两种。

2. 属性代理

属性代理的作用:

  • 代理props
  • 条件渲染
  • 添加状态(state)
  • 封装一些通用的逻辑

2.1 代理props

function withList(WrapComponent) {
  const data = [{ id: '1', text: '测试1' }, { id: '2', text: '测试2' }, { id: '3', text: '测试3' }, { id: '4', text: '测试4' }, { id: '5', text: '测试5' }]
  return class extends Component {
    render() {
      return <div>
        {this.props.data.length > 0 ? <WrapComponent {...this.props} data={data} /> : <span>{emptyText}</span>}
      </div>;
    }
  }
};
class List extends Component {
  render() {
    return (
      <ul>
        {this.props.data.map(item => {
          return <li key={item.id}>{item.text}</li>
        })}
      </ul>
    )
  }
};
export default withList(List);

2.2 条件渲染

function withList(WrapComponent, emptyText) {
  return class extends Component {
    render() {
      return <div>
        {this.props.data.length>0 ? <WrapComponent {...this.props}/> : <span>{emptyText}</span>}
      </div>;
    }
  }
};
 class List extends Component {
  render() {
    return (
      <ul>
        {this.props.data.map(item => {
          return <li key={item.id}>{item.text}</li>
        })}
      </ul>
    )
  }
};
export default withList(List,'暂无数据');

2.3 添加状态

利用这一点可以将非受控组件转为受控组件

import React, { Component } from 'react'
class Input extends Component {
  render() {
    return (
      <input value={this.props.value} />
    )
  }
};
function withInput(WrapComponent) {
  return class extends Component {
    state = {
      value: this.props.value
    }
    onChange = (value) => {
      this.setState({ value });
    }
    render() {
      return <WrapComponent {...this.props} value={this.state.value} onChange={this.onChange}/>;
    }
  }
};
export default withInput(Input);

3. 反向继承

  • 反向继承的作用
  • 拦截渲染
  • 代理props
  • 劫持生命周期函数
  • 操作state
  • 修改react树

3.1 拦截渲染

function withList(WrapComponent) {
  return class extends WrapComponent {
    render() {
      return <div>
        <span>通过反向继承拦截渲染</span>
        {super.render()}
      </div>;
    }
  }
};

3.2 劫持生命周期

function withList(WrapComponent) {
  return class extends WrapComponent {
    componentDidMount(){
      if(super.componentDidMount){
        super.componentDidMount.apply(this);
      };
      console.log('拦截生命周期');
    }
    render() {
      return <div>
        <span>通过反向继承拦截渲染</span>
        {super.render()}
      </div>;
    }
  }
};

3.3 操作state

import React, { Component } from 'react';
function withList(WrapComponent) {
  return class extends WrapComponent {
    constructor(props) {
      super(props);
      this.state.data = []; //将列表数据置空
    }
    render() {
      return <div>{super.render()}</div>
    }
  }
};
class List extends Component {
  state = {
    data: [{ id: '1', text: '测试1' }, { id: '2', text: '测试2' }, { id: '3', text: '测试3' }, { id: '4', text: '测试4' }, { id: '5', text: '测试5' }],
  }
  render() {
    return (
      <ul>
        {this.state.data.map(item => {
          return <li key={item.id}>{item.text}</li>
        })}
      </ul>
    )
  }
};
export default withList(List);

3.4 修改react树

import React, { Component } from 'react';
function withList(WrapComponent) {
  return class extends WrapComponent {
    render() {
      const tree = super.render();
      let newProps = { ...tree.props };
      if (tree.type === 'ul') {
        newProps.value = 'value';
      }
      return React.cloneElement(tree, newProps, newProps.children);
    }
  }
};
class List extends Component {
  render() {
    return (
      <ul>
        {this.props.data.map(item => {
          return <li key={item.id}>{item.text}</li>
        })}
      </ul>
    )
  }
};
export default withList(List);

3.5 记录渲染性能

function withTime(WrapComponent) {
  return class extends WrapComponent {
    constructor(props) {
      super(props);
      this.start = 0;
      this.end = 0
    }
    componentWillMount() {
      if (super.componentWillMount) {
        super.componentWillMount.call(this);
      };
      this.start = Date.now();
    }
    componentDidMount() {
      if (super.componentDidMount) {
        super.componentDidMount.call(this);
      };
      this.end = Date.now();
      console.log(`渲染的时间为:${(this.end - this.start) / 1000}秒`)
    }
    render() {
      return super.render();
    }
  }
};

4. 使用装饰器

4.1 安装和配置

首先执行npm run eject暴露出webpack配置,然后安装装饰器插件

yarn add  @babel/plugin-proposal-decoreators;

最后在package.json中的babel配置中添加一下配置然后重新项目

  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins":[
      [
        "@babel/plugin-proposal-decorators",
        {"legacy":true}
      ]
    ]
  }

配置完之后如果有报红需要配置一下:

文件-> 首选项 -> 搜索 ExperimentalDecorators 勾选上之后红线就消失了

4.2 使用

@withList
class List extends Component {
  render() {
    return (
      <ul>
        {this.props.data.map(item => {
          return <li key={item.id}>{item.text}</li>
        })}
      </ul>
    )
  }
};

5.总结

  • 高阶组件的作用有代复用、代理属性、拦截渲染、劫持生命周期
  • 反向继承能直接操作和拦截组件的state和生命周期,功能比属性代理更加强大

到此这篇关于React HOC高阶组件深入讲解的文章就介绍到这了,更多相关React HOC 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • React Router6.x路由表封装的两种写法

    React Router6.x路由表封装的两种写法

    本文主要介绍了React Router6.x路由表封装的两种写法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • React Suspense前后端IO异步操作处理

    React Suspense前后端IO异步操作处理

    这篇文章主要为大家介绍了React Suspense前后端IO异步操作处理示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-06-06
  • 详解react-navigation6.x路由库的基本使用

    详解react-navigation6.x路由库的基本使用

    最近两个项目都用到了React Navigation，所以就研究一下如何使用，本文主要介绍了react-navigation6.x路由库的基本使用，感兴趣的可以了解一下
    2021-11-11
  • ReactNative页面跳转Navigator实现的示例代码

    ReactNative页面跳转Navigator实现的示例代码

    本篇文章主要介绍了ReactNative页面跳转Navigator实现的示例代码，具有一定的参考价值，有兴趣的可以了解一下
    2017-08-08
  • Redux模块化拆分reducer函数流程介绍

    Redux模块化拆分reducer函数流程介绍

    Reducer是个纯函数，即只要传入相同的参数，每次都应返回相同的结果。不要把和处理数据无关的代码放在Reducer里，让Reducer保持纯净，只是单纯地执行计算，这篇文章主要介绍了Redux拆分reducer函数流程
    2022-09-09
  • React Native中WebView与html双向通信遇到的坑

    React Native中WebView与html双向通信遇到的坑

    这篇文章主要介绍了React Native中WebView与html双向通信的一些问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
    2023-01-01
  • react render的原理及触发时机说明

    react render的原理及触发时机说明

    这篇文章主要介绍了react render的原理及触发时机说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-02-02
  • React+Antd+Redux实现待办事件的方法

    React+Antd+Redux实现待办事件的方法

    这篇文章主要介绍了React+Antd+Redux实现待办事件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • React Native项目设置路径别名示例

    React Native项目设置路径别名示例

    这篇文章主要为大家介绍了React Native项目设置路径别名实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-05-05
  • react MPA 多页配置详解

    react MPA 多页配置详解

    这篇文章主要介绍了react MPA 多页配置详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10

最新评论