Hooks 是React官方 在2018 React Conf 大会上宣布React v16.7.0-alpha（内测）引入的，React v16.8.0 release 可以使用。
why Hooks
- 难以重用和共享状态逻辑
- 更小粒度的组件维护，往往项目中类组件的逻辑比较复杂，需要处理多个互不相关的local state, 生命周期函数中可能还包含各种互不相关的逻辑。
- JavaScript 中闭包函数的性能是非常快的，并且得益于相对于class 更轻量的函数组件，以及避免了HOC，renderProps 等等 …
Hooks如何解决问题
- 状态逻辑共享
- 更小粒度的组件维护，往往项目中类组件的逻辑比较复杂，需要处理多个互不相关的local state, 生命周期函数中可能还包含各种互不相关的逻辑。
Hooks 使用
hooks出现之前，函数组件就是通过props传递，输入到输出的映射逻辑；而Hooks 让函数组件拥有和类组件一样的local state和生命周期处理。最常用的几个hooks是 useState, useEffect, useContext，下面详细介绍：
useState
useState 这个方法可以为函数组件带来 local state。
import React, {useState, useEffect } from 'react'
const Example = () => {
const [count, setCount] = useState(0)
return (
<div>
<span>{count}</span>
<button onClick={() => setCount(count+1)}>click</button>
</div>
)
}
useState 接收一个用于初始 state 的值，返回一对变量。第一个变量是存放state 的变量；第二个变量是一个函数，用于改变该状态值，它可以接受一个值，也可以接受一个函数作为入参， 当入参是函数时，该函数的入参是当前状态值， 返回一个新的状态值。
useEffect
useEffect 可以为函数组件带来一些生命周期的处理。
import React, {useState, useEffect } from 'react'
const Example = () => {
useEffect(() => {
document.title = `you clicked ${count} times`
}, [count])
const [count, setCount] = useState(0)
return (
<div>
<span>{count}</span>
<button onClick={() => setCount(count+1)}>click</button>
</div>
)
}
useEffect可以看做componentDidMount、componentDidUpdate、componentWillUnmount生命周期的结合。每次render后都会调用useEffect()注册的effect函数。当React 渲染我们的组件时，它会记住我们的effect。
有经验的js开发者可能注意到：每次rerender后执行的effect都不同，实际上，每次rerender, React会schedule一个不同的effect,代替上一个effect.
useEffect函数的第二个参数是该effect所依赖的变量，只有当[ ]里的变量发生改变时，才会执行effect。例如，当第二个参数为[]，该effect 只会在组件didMount和willUnmount后执行。
Effects with Cleanup
useEffect的设计就把subscribe 和unSubscribe 绑定在一起啦， 当useEffect()函数返回一个函数时，当需要清理时，React就会调用他。
React 清理effect的时机
当组件unmount时，React 清理effect。上面我们说过，effects 在每次render时都会执行，因此，React 会在前一次 effect执行后，下一次 effect 将要执行前，以及 Unmount 时清理。
useContext
useContext 接受一个context对象（通过React.createContext生成的）作为入参， 并返回当前context的value。当前context的value是由组件上层级的最近的 <MyContext.Provider>的value属性决定的。当最近的<MyContext.Provider>的value属性值发生变化，useContext 就会触发组组件的rerender。
const value = useContext(MyContext);
Hooks使用规则
- 只在React函数中使用hooks，不要在regular js函数中调用
- 在函数组件的top Level 中使用hooks, 不要在循环、条件语句、嵌套函数中使用，保证每次render后hooks的调用顺序都是一样的
注： React依赖hooks执行的顺序来保证各个状态与各个useState之间的对应关系。
custom hooks
- 可以把复用的状态逻辑，提取出custom hooks。不同的组件使用同一个custom hook， 并不会共享状态。
- custom hooks的命名最好以"use"开头，方便eslint 检查
Hooks 原理
使用hooks 的感受
- 状态与UI的界限越来越清晰
- hooks让函数组件的功能得到了扩充，拥有了和类组件相似的功能，改善了“原有的React组件嵌套太深”的境况， 但通过React Devtools看到的组件树结构也没有嵌套时的结构更便于调试开发。
-
强大的API设计
认真拍的照
