共计 1131 个字符，预计需要花费 3 分钟才能阅读完成。
为什么用 react-hook
在组件之间复用状态逻辑很难
可能你会使用 render props 或者高阶组件，但一方面，组件结构需要变动，使用 render props 和高阶组件也会使组件变得很难理解，另一方面会形成嵌套地狱，在用 devtools 排查问题时，很不方便。
复杂组件变得难以理解
在此之前，我们可能要关注各种生命周期（ 虽然也写过一篇 react 生命周期的文章 ），componentDidMount，componentDidUpdate 等等。举自己曾经在实际项目中的两个例子：
- componentDidMount 里面发了 n 个请求，componentWillRecieveProps 里面做了判断后，又发请求。
- componentDidMount 添加了 addEventListener，componentWillUnmount 去 removeEventListener。
- 如果 1 和 2 再混在同一个组件里面
想想，如果不是自己写的代码，去理解比较困难，其次，如果突然你去维护这样的代码，可能一不小心就把分散在其他地方的业务逻辑忘掉了，导致出现 bug，就要背锅了。
难以理解的 class
不止一次面试中问别人，以及被问过，react 组件中 constructor 内绑定事件，箭头函数，bind 绑定事件，都是怎么回事，就巴拉巴拉开始说，constructor 只执行一次，箭头函数 this 是指向上下文的，bind 每次都会重新生成函数什么什么的。
再者，可能还要区分什么可以写成无状态组件，负责 UI，什么组件要用 Component，什么组件要用 PureComponent。
异步执行，性能更好
与 componentDidMount 或 componentDidUpdate 不同，使用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕，这让你的 应用看起来响应更快。大多数情况下，effect 不需要同步地执 行。
使用多个 Effect 实现关注点分离
使用 Hook 解决 class 中生命周期函数经常包含不相关的逻辑，但又把相关逻辑分离到了几个不同方法中的问题。
Hook 是什么？
就是以 use 开头的一系列函数，可以让我们在函数当中使用 state 其他的 react 特性。不得不感慨前端更新太快，做前端好难，不过还是要不断学习进步，知晓设计的初衷，知晓怎么用，再知晓其原理，干，就对了。
常用的官方 hook API
useState
待补充
useEffect
待补充
useEffectLayout
待补充
useRef
待补充
useCallback
待补充
useMemo
待补充
结语
有人就说了，官方的 hook 那么少，写代码还要自己封装很多自定义的 hook。不得不说，世界上大佬那么多，为什么人家那么聪明，还比我们努力。
想了解更多 hook，请看下篇: