高阶组件具体用法和使用场景

Posted 兰村_web

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了高阶组件具体用法和使用场景相关的知识,希望对你有一定的参考价值。

1.什么是高阶组件

高阶组件(HOC)是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分,它是一种基于 React 的组合特性而形成的设计模式。

具体而言,高阶组件是参数为组件,返回值为新组件的函数。

2.例子

高阶组件

import React from 'react';

export default function HocHour(Com) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        hour: 0,
      };
    }

    componentDidMount() {
      const p = new Promise(this.getFirstHour);
      let num = 0;
      p.then(res => {
        num += res;
        return new Promise(this.getSecondHour);
      }).then(res => {
        num += res;
        this.setState({ hour: num })
      })
    }

    getFirstHour = (resolve, reject) => {
      setTimeout(() => {
        resolve(3);
      }, 1000);
    }

    getSecondHour = (resolve, reject) => {
      setTimeout(() => {
        resolve(5);
      }, 1000);
    }

    render() {
      return <Com {...this.state} />
    }
  }
}

class组件

import React, { Component } from 'react';
import HocHover from './components/HocHour';

class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      number1: 1,
      number2: 2,
    }
  }

  componentDidMount() {
  }

  render() {
    const { hour } = this.props;
    const { number1, number2 } = this.state;

    return <div style={{ padding: '20px' }}>
      <div>{hour}</div>
      <div>{hour + number1}</div>
      <div>{hour + number2}</div>
    </div>
  }
}

export default HocHover(Index);

上面的例子是 在HocHover高阶组件中通过setTimeout模拟接口调用得到的hour值,在Index组件中各个地方使用到。最终在页面两秒后显示如下图:
在这里插入图片描述

总结

千山万水总有情,点赞再走行不行!

以上是关于高阶组件具体用法和使用场景的主要内容,如果未能解决你的问题,请参考以下文章

高阶组件具体用法和使用场景

高阶组件具体用法和使用场景

js数组高阶方法reduce经典用法代码分享

js数组高阶方法reduce经典用法代码分享

React组件重构:嵌套+继承 与 高阶组件

JavaScript高阶函数的用法和使用场景