hooks

定义：Hooks are a new feature proposal that lets you use state and other React features without writing a class.

作者们为了解决如下问题：

1、复用组件间的逻辑（之前通过 render props 和 高阶组件）

2、复杂的组件逻辑很难理解；

3、class 阻碍了理解 react

而提出了 hooks。

所以 hooks 到底是什么呢？hooks 是一个可以 hook into react features 的函数。当你写一个函数组件，有需要用到 state 的时候就可以用 hooks。

（1）useState：在组件函数内生命一个 state 变量，以及一个可以改变该 state 的函数（类似之前的 setState 函数）。

        定义 state：const [count, setCount] = useState()；使用 state：直接在函数内部使用 count 即可；更新 state：通过调用 setCount 

        一个函数内可以用同样的方法定义多个 state。

（2）useEffect ：可以理解成是组件的生命周期函数，入参为函数，组件每次 render 完成就会执行该函数（可以解决需要在多个生命周期中写重复代码的问题）。在函数组件内部执行，可以直接访问函数内部的 state 变量。入参函数在每次 render 完成后都会重新赋值，重新执行，可以看成是 render 后的产物。effect 不会阻碍浏览器刷新页面，因为不是同步的。

        (a) Effects Without Cleanup

        (b) Effects with Cleanup：有时为了防止内存泄漏，入参函数需 return 一个回调函数来 cleanup。当组件 unmount 的时候就会触发该 cleanup 回调。

    tips：可以定义多个 effect；可以 skip effect 来提升性能：给 useEffect 传入第二个入参来过滤 监听的 state。

rules（待实践中理解）

（1）Only Call Hooks at the Top Level

（2）Only Call Hooks from React Functions

可通过 eslint-plugin-react-hooks 插件来控制，后期可能会融入 react 中。