京东技术三面：React 加入 Hooks 的意义是什么？
共 1802字，需浏览 4分钟
·
2021-05-08 03:07
最近看到一个关于 React 的面试题，是京东技术三面的题目，感觉很有意思，一起来看看：
React 加入 Hooks 的意义是什么？
或者说一下为什么 React 要加入Hooks 这一特性？
最后举例说一下 Hooks 的基本实现原理。
首先，我们看一下典型的两个 Hooks 的基本使用，直接看代码，这里就不细说了。
useState 基本使用：
useEffect：
回到前面的问题，其实这样的问题并没有什么标准答案，但是我们可以换位思考，站在面试官的角度想一下“为什么会问这样的问题？”。无非就是想考察我们对 Hooks 最基本的使用情况以及对 Hooks 设计理念的个人思考。
其实在 React 官方文档中，已经给出了答案，奈何很多人就是不看文档啊。
Hook 简介 – React (docschina.org)
https://react.docschina.org/docs/hooks-intro.html
文档中的 “动机” 就很好的解释了为什么 React 要加入 Hooks 特性，总结来说就是三个基本要素：
1：组件之间的逻辑状态难以复用。
2：大型复杂的组件很难拆分。
3：Class 语法的使用不友好。
总的来说，实际上就是类组件在多年的应用实践中，发现了很多无法避免而又难以解决的问题。而相对类组件，函数组件又太过于简陋，比如：
类组件可以访问生命周期方法，函数组件不能；
类组件中可以定义并维护 state（状态），而函数组件不可以；
类组件中可以获取到实例化后的 this，并基于这个 this 做各种各样的事情，而函数组件不可以。
但是，函数式编程方式在 JS 中确实比 Class 的面向对象方式更加友好直观，那么只要能够将函数的组件能力补齐，也就解决了上面的问题。而如果直接修改函数组件的能力，势必会造成更大的成本，最好的方式就是开放对应接口进行调用，非侵入式引入组件能力，也就是我们现在看到的 Hooks 了。
明白了原因，面试中的问题也就迎刃而解了，基本思路就是先阐述在没有 Hooks 的时候，类组件有哪些问题，函数组件有哪些不足，而 Hooks 就是解决这些问题出现的。这也就是 Hooks 出现的意义了，那么接着，我们再来解答下一个问题，Hooks 的设计理念是什么呢？
我们先用代码来模仿一个基本的 Hooks 的实现过程，重写 useState :
Rudi Yardley 在 2018 年的时候写过一篇文章 《React hooks: not magic, just arrays》，详细地阐释了它的设计原理，感兴趣的话可以找来看一下。
上面案例，其实就是文章中用到的，通过在函数中调用 useState 会返回当前状态与更新状态的函数。count 的初始值是 1，然后通过 useState 赋值初始值，获取当前状态 state 与函数 setState。那么在点击按钮时调用 setCount，修改 count 的值。本质上 state hook 替代了类组件中 setState 的作用。
一般情况下，一段激情的阐述之后都是要上价值的，所以，咱也来一段：
React 团队当然清楚，新加一个全新的概念，对我们开发者来说是一个很高的学习成本，因此官方为好奇的读者准备了详细的征求意见文档（https://github.com/reactjs/rfcs/pull/68），在文档中用更多细节深入讨论了 React 推进这件事的动机，也在具体设计决策和相关先进技术上提供了额外的视角。
最重要的是，Hook 和现有代码可以同时工作，你可以渐进式地使用他们，而不用急着迁移到 Hook。尤其是对于现有的、复杂的 class 组件，我们建议避免任何“大规模重写”。在开始“用 Hook 的方式思考”之前，我们需要做一些思维上的转变。
推荐阅读：
恭喜你又在前端道路上进步了一点点。
点个“在看”和“赞”吧！