Hooks是React16.8新增的特性，用于函数式组件（Functional Component）。使用Hooks可以在不编写类式组件的情况下，使用state或者其他的React特性。

Hooks解决的问题

类组件的不足

  • 状态逻辑难复用：

    在组件之间复用状态逻辑很难，可能要用到 render props （渲染属性）或者 HOC（高阶组件），但无论是渲染属性，还是高阶组件，都会在原先的组件外包裹一层父容器（一般都是 div 元素），导致层级冗余

  • 趋向复杂难以维护：

在生命周期函数中混杂不相干的逻辑（如：在 componentDidMount 中注册事件以及其他的逻辑，在 componentWillUnmount 中卸载事件，这样分散不集中的写法，很容易写出 bug ）
在多数情况下，不可能将组件拆分为更小的粒度，因为状态逻辑无处不在。这也给测试带来了一定挑战。同时，这也是很多人将 React 与状态管理库结合使用的原因之一。但是，这往往会引入了很多抽象概念，需要你在不同的文件之间来回切换，使得复用变得更加困难。

  • This指向问题：

类式组件的方法，并不实际绑定到组件实例上，仍然需要手动绑定
Hooks优势

  • 优化类组件存在的三大问题
  • 可以在无需修改组件结构的情况下复用状态逻辑（自定义 Hooks ）
  • 可以将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据）
  • 副作用的关注点分离：副作用指那些没有发生在数据向视图转换过程中的逻辑，如 ajax 请求、访问原生dom 元素、本地持久化缓存、绑定/解绑事件、添加订阅、设置定时器、记录日志等。以往这些副作用都是写在类组件生命周期函数中的。而 useEffect 在全部渲染完毕后才会执行，useLayoutEffect 会在浏览器 layout 之后，painting 之前执行。

参考

  1. https://react.docschina.org/docs/hooks-intro.html Hooks Introduction
  2. https://segmentfault.com/a/1190000017182184 React Hooks深入不浅出
  3. https://www.jianshu.com/p/8693c288f700 React Hooks基础篇
  4. https://juejin.cn/post/6844903985338400782 React Hooks详解
  5. https://zhuanlan.zhihu.com/p/92211533 React Hooks完全上手指南
  6. https://www.jianshu.com/p/d600f749bb19 React Hooks详解—简书