Hook初识及简单了解

一. 认识hook

1. 为什么需要hook

Hook 是 React 16.8 的新增特性，它可以让我们在不编写class的情况下使用state以及其他的React特性（比如生命周期）。

我们先来思考一下class组件相对于函数式组件有什么优势？比较常见的是下面的优势：

• 1.class组件可以定义自己的state，用来保存组件自己内部的状态；
  1.函数式组件不可以，因为函数每次调用都会产生新的临时变量；
• 2.class组件有自己的生命周期，我们可以在对应的生命周期中完成自己的逻辑；比如在componentDidMount中发送网络请求，并且该生命周期函数只会执行一次；
  2.函数式组件在学习hooks之前，如果在函数中发送网络请求，意味着每次重新渲染都会重新发送一次网络请求；
• 3.class组件可以在状态改变时只会重新执行render函数以及我们希望重新调用的生命周期函数componentDidUpdate等；
  3.函数式组件在重新渲染时，整个函数都会被执行，似乎没有什么地方可以只让它们调用一次；

所以，在Hook出现之前，对于上面这些情况我们通常都会编写class组件。

1.1 class组件的问题：

1.1.1复杂组件变得难以理解：

• 在最初编写一个class组件时，往往逻辑比较简单，并不会非常复杂。
• 但是随着业务的增多，我们的class组件会变得越来越复杂；
• 比如componentDidMount中，可能就会包含大量的逻辑代码：包括网络请求、一些事件的监听（还需要在componentWillUnmount中移除）；
• 而对于这样的class实际上非常难以拆分：因为它们的逻辑往往混在一起，强行拆分反而会造成过度设计，增加代码的复杂度；

1.1.2 难以理解的class：

• 很多人发现学习ES6的class是学习React的一个障碍。
• 比如在class中，我们必须搞清楚this的指向到底是谁，所以需要花很多的精力去学习this；
• 虽然我认为前端开发人员必须掌握this，但是依然处理起来非常麻烦；

1.1.3 组件复用状态很难：

• 在前面为了一些状态的复用我们需要通过高阶组件或render props；
• 像我们之前学习的redux中connect或者react-router中的withRouter，这些高阶组件设计的目的就是为了状态的复用；
• 或者类似于Provider、Consumer来共享一些状态，但是多次使用Consumer时，我们的代码就会存在很多嵌套；
• 这些代码让我们不管是编写和设计上来说，都变得非常困难；

2.Hook了解

Hook的出现，可以解决上面提到的这些问题；

2.1 简单总结一下hooks：

• 它可以让我们在不编写class的情况下使用state以及其他的React特性；
• 但是我们可以由此延伸出非常多的用法，来让我们前面所提到的问题得到解决；

2.2 Hook的使用场景：

• Hook的出现基本可以代替我们之前所有使用class组件的地方（除了一些非常不常用的场景）；
• 但是如果是一个旧的项目，你并不需要直接将所有的代码重构为Hooks，因为它完全向下兼容，你-- 可以渐进式的来使用它；
• Hook只能在函数组件中使用，不能在类组件，或者函数组件之外的地方使用；

3.hooks的基本演练

我们通过一个计数器案例，来对比一下class组件和函数式组件结合hooks的对比：
class组件实现：

import React, {
    PureComponent } from 'react'

export default class Counter01 extends PureComponent {
   
  constructor(props) {
   
    super(props);

    this.state = {
   
      counter: 0
    }
  }

  render() {
   
    return (
      <div>
        <h2>当前计数: {
   this.state.counter}</h2>
        <button onClick={
   e => this.increment()}>+1</button>
        <button onClick={
   e =>