React Hook 实战指南！（1）

什么是React Hook？

React Hook简介

Hook是React在16.8以上版本新增的API，此概念一出就引发界内强烈的反响，尤大大也悄咪的整出了vue-hook来跟风一波。

Hook的本质目的很简单，但愿咱们在不编写类组件的状况下也能使用state来构建组件自身数据，开发者在开发React应用的过程当中，编写最多的组件有以下几种：

1. 类组件（能够构建state并接收props）

class App extends React.Component {}
复制代码

2. 无状态组件（只能接收props，没法构建自身state）

const ListItem = (props) => (<div>{props.content}</div>)
复制代码

3. 高阶组件（HOC，负责抽离公共逻辑）

const HOC = (Component) => {
  // ...公共逻辑
	return <Component/>
}
复制代码

这三种组件是构建最多的，咱们构建组件的时候也会根据业务需求进行思考，根据组件是否须要自身state来选择类组件或者无状态组件，并将复用的公共逻辑抽离到高阶组件，可是实话说，组件分的越多，对开发者的考验就越多，在开发前进行总体性思考的需求就越必要，而对于大多数人来讲，对于类组件来讲，更为喜欢编写无状态组件，缘由不外乎就是由于：
构造类组件有必定的难度，尤为是生命周期在16.4版本更新后，不只钩子函数难以掌握（名字都老长了，还新增了static静态方法来充当钩子函数），生命周期学习成本高。

总结一下Hook想要解决的问题：

1. 在组件间复用状态逻辑很难，高阶组件和render props的技术老是属于“我知道，可是我想不起来用”的状态。
2. 复杂组件变得难以理解，在一个类组件中每每存在大量的生命周期函数，每一个钩子函数的编写都耗费了心机。
3. 难以理解的class，类组件不只有额外的学习成本（光处理个this就够麻烦了），并且老是须要编译，再不济也得垫个垫片吧（@babel/polyfill）。

React对于目前存在的这些问题就一句话：“各位走好（各类组件），之后，这里的一切，都交给Hook吧！”
Hook是怎么解决这些问题的呢：

1. 复用逻辑？HOC？通通走开，所有拆成Hook组件，拆拆拆，拆的越多，复用越方便！
2. 生命周期改合并合并，该干掉干掉，就留一个useEffec函数，方便多了吧？
3. 类难写？别写！this整不明白？Hook组件就是个相似于无状态组件的函数，哪来的this！

最最主要的是，Hook是渐进式提出的，意思就是说不会让用户一会儿就改写为Hook的开发模式，而是能够慢慢来适应的，而在将来的某个版本才会真正的移除class的写法。

听了这么多，你们是否是对Hook已经充满兴趣了呢？Ok，让咱们继续往下走。

---

初识Hook真容

Hook究竟是什么呢，Hook 是一些可让你在无状态组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用 —— 这使得你不使用 class 也能使用 React。

也就是说Hook只是一种“工具”，这种工具可让咱们在无状态组件中使用到state以及生命周期等特性，而在无状态组件中使用来Hook工具后，咱们就称这个组件为**“函数组件”（其实我习惯称为Hook组件）。**

那么就来看一个函数组件是怎么变身的吧：

首先咱们先来看一个class组件的例子，咱们想要实现一个点击按钮就会计数的效果：

import React, { Component } from 'react';

class Example extends Component {
	constructor () {
  	super()
    // 想办法先搞一个状态出来
    this.state = { count: 0 }
    // 对方法中this的绑定
    this.setCount = this.setCount.bind(this)
  }
  // 更改状态的方法
  setCount () {
  	this.setState((prevState) => ({ count: prevState.count + 1 }))
  }
  render () {
    // 最烦在这里解构赋值
    let { count } = this.state
  	return (
      <div> <p>You clicked {count} times</p> <button onClick={this.setCount}> Click me </button> </div>
    );
  }
}
复制代码

相信上面的代码你们都能看明白，就很少说了，再看一下Hook实现的函数组件：

import React, { useState } from 'react';

function Example (props) {
  // 声明一个叫 “count” 的 state 变量。
  const [count, setCount] = useState(0);

  return (
    <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div>
  );
}
复制代码

是否是感受眼前一亮呀，你们能够看到，useState其实就是一个Hook函数，它能够为Example这个普普统统的无状态组件添加一个叫作count的数据，并且还提供了一个setCount的专属方法（一物降一物的感受）来更改这个count数据。传入的0就是这个count数据的默认值，由于使用的是数组的解构赋值，因此数据和方法的名字能够根据我的喜欢去命名，好比count + updateCount均可以。

你们能够看到，转换为函数组件后不用再操心this的问题，编写方法也简单了不少，把构建状态、设置默认值、构建更改状态的方法都融合到短短的一行代码中，并且也保留了无状态组件使用传入的props的方法，完美！

Ok，初识就到这里，这里只是为给你们展现一下Hook的魅力，由于不喜欢枯燥的讲解API，由于你们彻底能够去官网查阅API文档，因此在接下来的内容中，我将利用一个Todolist的例子来进行阐述，而这里也更多的以代码的展现为主，想要学习更多的api的使用以及概念，仍是要去查阅问题哟。

记住：文档基本没有废话，因此每句话都应该是知识点，读文档的时候要耐着性子一句一句的看完哟。