React HOC高階組件深入講解

更新時(shí)間：2022年10月14日 08:43:48 作者：愛(ài)思考的豬

高階組件就是接受一個(gè)組件作為參數(shù)并返回一個(gè)新組件（功能增強(qiáng)的組件）的函數(shù)。這里需要注意高階組件是一個(gè)函數(shù)，并不是組件，這一點(diǎn)一定要注意，本文給大家分享React 高階組件HOC使用小結(jié)，一起看看吧

1. 概念

高階組件和高階函數(shù)的類似,使用函數(shù)接收一個(gè)組件,并返回一個(gè)組件。

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

高階組件主要用作于邏輯的封裝、攔截渲染、攔截生命周期:獲取渲染性能,日志打點(diǎn)等，安按照實(shí)現(xiàn)方式可以分為屬性代理和反向繼承兩種。

2. 屬性代理

屬性代理的作用:

代理props
條件渲染
添加狀態(tài)(state)
封裝一些通用的邏輯

2.1 代理props

function withList(WrapComponent) {
  const data = [{ id: '1', text: '測(cè)試1' }, { id: '2', text: '測(cè)試2' }, { id: '3', text: '測(cè)試3' }, { id: '4', text: '測(cè)試4' }, { id: '5', text: '測(cè)試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,'暫無(wú)數(shù)據(jù)');

2.3 添加狀態(tài)

利用這一點(diǎn)可以將非受控組件轉(zhuǎn)為受控組件

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
劫持生命周期函數(shù)
操作state
修改react樹(shù)

3.1 攔截渲染

function withList(WrapComponent) {
  return class extends WrapComponent {
    render() {
      return <div>
        <span>通過(guò)反向繼承攔截渲染</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>通過(guò)反向繼承攔截渲染</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 = []; //將列表數(shù)據(jù)置空
    }
    render() {
      return <div>{super.render()}</div>
    }
  }
};
class List extends Component {
  state = {
    data: [{ id: '1', text: '測(cè)試1' }, { id: '2', text: '測(cè)試2' }, { id: '3', text: '測(cè)試3' }, { id: '4', text: '測(cè)試4' }, { id: '5', text: '測(cè)試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樹(shù)

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(`渲染的時(shí)間為:${(this.end - this.start) / 1000}秒`)
    }
    render() {
      return super.render();
    }
  }
};

4. 使用裝飾器

4.1 安裝和配置

首先執(zhí)行npm run eject暴露出webpack配置,然后安裝裝飾器插件

yarn add @babel/plugin-proposal-decoreators;

最后在package.json中的babel配置中添加一下配置然后重新項(xiàng)目

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

配置完之后如果有報(bào)紅需要配置一下:

文件-> 首選項(xiàng) -> 搜索 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>
    )
  }
};