前言

接着上一小节到内容，下面我们会来详细介绍上一节中提到到相关知识。本节我把reactjs hooks和高阶组件放在一起是因为这两块内容都是组件化中相关的内容。高阶组件使用过reactjs的人都应该有所了解，hooks是reactjs 16.8.0新增的属性。想再老项目中使用 hooks完全不用担心兼容性问题，因为hooks 是100% 向后兼容的。本节详细谈谈hooks的使用方式以及相关概念。

高阶组件

先来谈谈高阶组件解决了什么问题：reactjs文档中介绍高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧，由此可见他是用来解决组件复用的一种技巧，也可以说高阶组件是一种参数为组件，返回值为新组件的函数。

作用

无副作用：没有副作用的情况下实现组件的复用，注意没有副作用是关键点。
重用函数：高阶组件可以提取出可重用的函数，简你的state和生命周期方法。
装饰器：高阶组件可以作为装饰器来使用，如mobx-react
渲染劫持：劫持组件的props和state

简单实例

我们实际编程中总会遇到多个组件中处理相似的问题，如果把这写组件都写一遍是不是很傻，高阶组件就可以解决这个尴尬。假设我们有A B两个组件,他们的大部分实现都是相同的

import React, { Component } from 'react'
class A extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      data: "data"
    };
  }
  componentDidMount() {
     let data = "初始化数据"
     this.setState({ data })
  }
  handleChange() {
    this.setState({ data: "改变数据"});
  }
  render() {
    return  (<div><span>这是组件A自己的内容</span>
            <h2  onClick={this.handleChange.bind(this)}>{this.props.data}</h2></div>)
  }
}

class B extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: "data"};
  }
  componentDidMount() {
     let data = "初始化数据"
     this.setState({ data })
  }
  handleChange() {
    this.setState({ data: "改变数据"});
  }
  render() {
    return (<div>这是组件B自己的内容
            <h2 onClick={this.handleChange.bind(this)}>{this.props.data}</h2></div> )
  }
}

根据两个组件的特性封装高阶组件（将两个组件共通点抽取出来）

    import React, { Component } from 'react'
    const hocBox = WrappedComponent => {
      return class extends Component{
        componentWillMount() {
          let data = "这是hoc的data"
          this.setState({ data })
        }
        handleChange = () =>{
           this.setState({ data: "改变数据"});
        }
        render() {
          return <WrappedComponent update={this._alert} {...this.props}/> 
        }
      }
    }
    export default hocBox

调用

import hocBox from './hocBox';
class C extends Component{...}
C = WrapperHello(C)
export default C

使用方式

两种常见的用法属性代理（高阶组件通过ComponentClass的props来进行相关操作）和继承反转（高阶组件继承自ComponentClass）
属性代理:多用于组件的复用，例如装饰器：

复制代码
function WrapperComp(Comp) {
    class WrapComp extends React.Component {
        render() {
            return (
                <div>
                    <p>属性代理高阶组件</p>
                    <Comp {...this.props}></Comp>
                </div>
            )
        }
    }
    return WrapComp;
}
@WrapComp
class A extends React.Component {
    render() {
        return <h4>hello Jason</h4>
    }
}

此时A组件就相当于如下：

    class A extends React.Component {
        render() {
            return (
                <div>
                    <p>这是react高阶组件特有的元素</p>
                    <h4>hello Jason</h4>
                </div>
            )
        }
        
    }

继承反转：组件和包装组件之间的关系是继承关系而不是代理的方式，可以修改原组件的生命周期，渲染流程和业务逻辑.多用于渲染的劫持。

function WrapperComp(Comp) {
    class WrapComp extends Comp {
        componentDidMount() {
            console.log('反向代理高阶组件')
        }
        render() {
            return <Comp {...this.props}></Comp>
        }
    }
    return WrapComp;
}
@WrapperComp
class A extends React.Component {
    componentDidMount() {
        console.log('加载完成')
    }
    render() {
        return <h4>反向继承父组件</h4>
    }
}

注意：反向继承的高阶组件中的state和props会覆盖调原组件中的state和props

可能遇到的问题

原组件定义的静态方法丢失：如果我们原组件中定义了静态方法
refs不被传递：在高阶组件中，ref不会被传递。可以使用React.forwardRef来实现ref的传递。
组件重新挂载：不要在 render 方法中使用 HOC,因为每次render 是都会创建一个新的高阶组件这将导致该组件及其所有子组件的状态丢失

hooks

hooks的基本概念我们在上一小节中已经了解过了，本节主要来学习hooks的使用，以及详细分析hooks带来的便利

常用api

useState：返回一个 state，以及更新 state 的函数。相当于类组件中的state和 setstate

const [state, setState] = useState(initialState);

useEffect：Effect Hook 可以让你在函数组件中执行副作用操作。类似于类组件中的函数componentDidMount componentDidUpdate

 // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

useEffect 可以在组件渲染后实现各种不同的副作用。有些副作用可能需要清除，所以需要返回一个函数：

useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

注：通过使用这个 Hook，你可以告诉 React 组件需要在渲染后执行某些操作。React 会保存你传递的函数（我们将它称之为 “effect”），并且在执行 DOM 更新之后调用它。详情参见官方文档

作用

函数中可以使用类中特有state和setstate
减少了类组件的使用，加快了页面渲染。
解决了在组件之间复用状态逻辑很难的问题
降低组件的复杂度

总结

本章把hooks和高阶组件放在一起来分析，那是因为我觉的这两点都是reactjs在函数式编程上具有创造性的代码书写方式。现今前端逐渐的组件化，项目越来越复杂如果没有采用一个好的架构方式，我认为这将大大缩短项目的存活周期，以及大大降低开发效率。

前端知识库Reactjs系列三（hooks和高阶组件）

前言