React基础篇（二）：React高阶组件（HOC）

1、什么是高阶组件

​ ① 高阶组件接受一个组件作为参数，返回一个新的组件（就像函数一样，传进来一个值，返回一个新值）。

​ ② 高阶组件是对某个组件进行的一个封装，形成的一个新组件。当一个组件进到一个高阶组件里面，出去以后他的功能性就变强了（会多出一个属性）。为什么会变强呢？高阶组件会得到这个被封装的组件里面的状态，这个状态会传给跑进来的组件，这个作为参数的组件有了新的状态 ，作为返回值返回，然后就变强了。

​ ③ 由此，返回的新组件具有两个数据来源，一个来自于父组件，另一个来自于高阶组件

2、高阶组件实列

我们来看一下下面这个基于Timer组件封装的高阶组件withTimer（Timer的代码可以看一下上一篇）

注意看

import React from "react";

export default function withTimer(WrappedComponent) {
  return class extends React.Component {
    state = { time: new Date() };
    componentDidMount() {
      this.timerID = setInterval(() => this.tick(), 1000);
    }

    componentWillUnmount() {
      clearInterval(this.timerID);
    }

    tick() {
      this.setState({
        time: new Date()
      });
    }
    render() {
        //注意：withTimer里面的state，通过一个time的props传递给返回的组件，然后变强了（多了一个timer）
      return <WrappedComponent time={this.state.time} {...this.props} />;
    }
  };
}

然后我们的CahtApp想用一下这个组件

import React from "react";
import withTimer from './HOC/withTimer'

class ChatApp extends React.Component {
  state = {
    messages: [],
    inputMsg: "",
  };



  handleInput = evt => {
    this.setState({
      inputMsg: evt.target.value,
    });
  };

  handleSend = () => {
    const text = this.state.inputMsg;
    if (text) {
      const newMessages = [...this.state.messages, text];
      this.setState({
        messages: newMessages,
        inputMsg: "",
      });
    }
  };
  render() {
    return (
      <div>
        <MessageList messages={this.state.messages} />

        <div>
          <input value={this.state.inputMsg} onChange={this.handleInput} />
          <button onClick={this.handleSend}>Send</button>
        </div>
		//注意：下面这个代码是关键，它使用了高阶组件的传过来的属性
		//下面这个代码，在ChatApp中没有效果，只有对传给高阶组件后返回的ChatAppWithTimer有效果
        <h2>{this.props.time.toLocaleString()}</h2>
      </div>
    );
  }
}

let ChatAppWithTimer = withTimer(ChatApp)
export default ChatAppWithTimer

3、总结：

高阶组件可以帮助我们更好的实现组件复用

参考文档：https://zh-hans.reactjs.org/docs/higher-order-components.html

参考视频：https://time.geekbang.org/course/detail/100009301-9442?utm_source=pinpaizhuanqu&utm_medium=geektime&utm_campaign=guanwang&utm_term=guanwang&utm_content=0511