react-hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。react-hook是真的非常火热的，去年底有个项目重构，采用了下react-hook，用起来确实舒爽。
它可以让react函数组件也拥有状态；通过自定义hook可以实现在组件间公用状态操作。下面就来简单的说下react-hook的特点。
特点
1、react-hook有个很好的特点，能够完全的向后兼容，也就是说能和老版本写法兼容， Hook 和现有代码可以同时工作，你可以渐进式地使用他们。
2、表面看起来区别很大，但是实际不过影响你对react的认知，react的概念并未修改。
3、我们经常维护一些组件，组件起初很简单，但是逐渐会被状态逻辑和副作用充斥。每个生命周期常常包含一些不相关的逻辑。为了解决这个问题， Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分。你还可以使用 reducer 来管理组件的内部状态，使其更加可预测。
4、解决在组件之间复用状态逻辑很难，react没有提供将可复用性行为“附加”到组件的途径，高阶组件倒是可以但是容易形成嵌套地狱renderprops需要修改相应的组件结构但是hook 可以自定义相关的hook 把公共的状态抽离出来。
5、 函数式组件的写法真的是舒爽，写起来更加简洁，维护起来更加清晰写了react也不少也不少年了，但是hook写起来是真的舒服啊，本人自己直观感受。
起步
学习react-hook，就是要知道hook中api是如何使用的，首先要知道hook中state是如何设置以及更新的，其实和我们以前的state是同一个概念，只是用法上更加轻便。
这是官网非常经典的例子，hook中设置state,需要用到useState，数组第一个参数count是state本身,第二个参数setCount是setState的作用用来更新这个count，是一个允许你更新状态的函数。useState函数中的参数就是对count的初始化。这里是一个数组解构的写法，相信大家都懂的。
import React, { useState } from 'react';
function Example() {
// 声明一个叫 “count” 的 state 变量。
const [count, setCount] = useState(0);
return (
You clicked {count} times
);
}useState是可以多次使用的。
const [count, setCount] = useState(0)
const [animal, setAnimal] = useState('dog')很多人会有疑问，那么setCount是不是像setState有个异步回调，当state更新完成后调用，比如count变更后我们需要修改title，
setCount(count+1, () => {document.title = `You clicked ${count} times`})。这样写会报错的，setCount是没有第二参数的，如果我们需要异步回调，我们可以有另一种方法解决,使用useEffect，下面就要说到useEffect。
useEffect
你之前可能已经在 React 组件中执行过数据获取、订阅或者手动修改过 DOM。我们统一把这些操作称为“副作用”，或者简称为“作用”。
useEffect 就是一个 Effect Hook，给函数组件增加了操作副作用的能力。它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 API。
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// 相当于 componentDidMount 和 componentDidUpdate:
useEffect(() => {
// 使用浏览器的 API 更新页面标题
document.title = `You clicked ${count} times`;
});
return (
You clicked {count} times
);
}useEffect入参有两个第一个参数是副作用函数、第二个参数是个用于判断是否执行副作用的数组。
如果不写第二参数，相当于在componentDidMount 和 componentDidUpdate这两个生命周期中都会执行第一个匿名函数。
那么一进页面document.title首先会为0，然后只要count更新，document.title也会随之改变因为state变更会调用componentDidUpdate。
useEffect(() => {
console.log(count)
document.title = `You clicked ${count} times`;
});
如果第二个参数写成空数组，相当于只在componentDidMount时候执行useEffect内的匿名函数。
useEffect(() => {
console.log(count)
document.title = `You clicked ${count} times`;
}, []);由图可以看出useEffect只在页面创建时候调用一次。
如果第二个参数加入[count],那么每次count发生变化时候，这个匿名函数都会被执行，这时count已经更新成功，那么上面异步问题也得到了解决。
useEffect(() => {
console.log(count)
document.title = `You clicked ${count} times`;
}, [count]);这和第一种表面上看起来一样，但是其实概念不一样，第一种一旦页面走到componentDidUpdate，useEffect里面匿名函数就会调用，而这里是count发生变化时候调用useEffect里面匿名函数。
有些effect是需要清除的，比如订阅外部数据源，如果不清楚会引起内存泄漏，但是有些又是不必要，这里就不详细赘述：想要仔细了解可以去官网查阅：https://reactjs.org/docs/hook...
当然hook的api远远不止这些，也可以自定义hook，但是这两个是最常用到的，想要了解的可以先去观看下：https://reactjs.org/docs/hook...。