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

Posted 2023-02-14 兰村_frontend

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组件中各个地方使用到。最终在页面两秒后显示如下图：

总结

千山万水总有情，点赞再走行不行！