02｜理解 Hooks：React 为什么要发明 Hooks？
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
React Hooks 是 React 16.8 版本中推出的一套全新的 API 机制，旨在解决函数组件无法存在内部状态、提供完整生命周期机制的问题。文章通过重新思考 React 组件的本质，指出函数组件更适合表达 React 组件的执行逻辑，但由于缺少状态和生命周期机制，其功能受限。随后，文章介绍了 Hooks 是如何诞生的，指出 Hooks 机制将某个目标结果钩到可能会变化的数据源或事件源上，当这些数据或事件发生变化时，相关代码会重新执行，产生更新后的结果。Hooks 的最大好处在于逻辑的复用。总的来说，React Hooks 的出现为函数组件的开发提供了更多选择，使得函数组件的力量得以真正发挥出来。 React Hooks 带来的最大好处是逻辑复用。在之前的 React 使用中，实现逻辑复用常常需要借助于高阶组件等复杂的设计模式，而 Hooks 则简化了逻辑复用的过程，避免了产生冗余的组件节点，使代码更加简洁和直观。另一大好处是有助于关注分离，让针对同一个业务逻辑的代码尽可能聚合在一块儿，从而让代码更容易理解和维护。Hooks 作为 React 自诞生以来最大的一个新功能，得到了普遍好评，成为了 React 开发的主流方式，更好地体现了 React 的开发思想。虽然 Hooks 解决了 Class 组件存在的一些问题，但两种方式在 React 开发中几乎是完全等价的，没有绝对的优劣。如果决定开始使用 Hooks，对于已有的 Class 组件，其实是完全没必要进行立刻重构的，只要在新的功能上再来使用函数组件和 Hooks 就可以了。 总的来说，React Hooks 的出现为函数组件的开发提供了更多选择，使得函数组件的力量得以真正发挥出来。Hooks 带来的最大好处是逻辑复用和有助于关注分离，让代码更加简洁、直观，易于理解和维护。
《React Hooks 核心原理与实战》，新⼈⾸单¥59
全部留言(37)
- 最新
- 精选
开开之之老师，为什么说react组件不会相互继承？我之前做过一个项目，就是通过继承来实现代码复用的作者回复: 组合的话组件之间就仅仅需要通过 props 的方式来互相交互，依赖关系更加清楚，组件内聚性更好。继承会让两个组件紧密耦合到一起。继承也不是完全不能用，只是非常不推荐。在 React 中，继承要达到的目的用组合完全可以 cover。
2021-05-301228
闲闲老师我有个疑问，麻烦看到帮忙解答一下： 上面的例子里面说是窗口大小发生变化，组件就会更新，对于这一点我不太理解，class封装的还可以理解为，state发生改变了，导致重新render了，但是hook感觉这么理解不通顺，hook哪里写的就类似一个纯函数调用，是怎么驱动组件重新更新的呢？作者回复: 很好的问题。自定义 Hooks 触发组件更新的机制是调用 useState 这一类内置的，能触发组件更新的 Hooks。所以在窗口大小变化的例子中，在事件监听中通过 setSize 这个 useState 得到的方法去设置 size，从而组件就更新了。
2021-05-31515
凡凡路由变化可以作为数据源吗作者回复: 可以的，像 react router 就提供了这个 Hook，也有一些第三方 library 也提供了，比如：https://github.com/streamich/react-use/blob/master/src/useLocation.ts 就是一个实现。
2021-05-279- Geek_d221bc王老师，你好，想请教hooks是如何让函数组件具备随状态变化触发组件重新执行返回更新的呢？这是要去读hooks相关源码？
作者回复: 不需要读源码。Hooks 让组件刷新和传统 class 组件触发刷新的机制是完全一样的，都是由 state 或者 props 变化触发。Hooks 中的 useState 和 class 中的 setState，背后是同一套实现，理解这一点就可以了。
2021-07-125 
刘洋多久更新完啊编辑回复: 每周二四六更新，预计7月13日更新完毕
2021-05-274- Geek_9878c1最喜欢的React地方就是 “在其他前端框架发生翻天覆地变化的同时，React 的 API 则非常稳定，几乎从来没有出现过重大的向后兼容的问题，而且每一次版本的升级也都非常顺滑。“ ， 隔多久都没有隔阂
作者回复: 确实如此~ 说明 API 经受住了考验，能满足不断发展的需求变化：-）
2021-06-0623 
独白思考题：首先想到的是官方的一个api useReducer。还有的话，就是监听滚动条向上向下呀。 看了老师这节课，才弄清除hooks真正重要的东西是啥。作者回复: 说的很好啊~ useReducer 是个比较通用的，类似于 useState 但是按照 Redux 的模式提供了一定的统一 state 管理机制。滚动条位置确实是个很好的例子，开发中也经常用到，在第6课就会讲到这个例子。
2021-05-273
小馋猫hooks没有出现之前如果想实现逻辑复用只能通过高阶组件的方式来实现作者回复: 是的，还有 render props 模式，后面会有介绍~
2021-06-0122
哈哈哈[吃瓜]求教 我还是对hook的想法有一些疑问 主要是开发思想上 之前一直用jq 最近才看react 总是感觉有点别扭。 用hook的时候总是想 setState了之后 函数再运行一遍会有什么结果 总是在脑补函数组件内部的运行顺序 感觉一直在函数组件内部打转。 蓝黄对比那个图 useEffect为什么要写两个 另外怎么能更好的从jq这种可以很细的去操作dmo的开发思想上转变到react上来呢？作者回复: 理解函数组件有点像理解显示器的工作原理，你可以认为函数组件的一次执行就是一次屏幕的刷新重绘。我们要控制的就是何时触发刷新。 useEffect 可以写多个，从而把多个业务逻辑分开来，每一个做自己的事情。 从 jq 转过来，主要就是把 UI 完全看成状态驱动。
2021-07-211
寇云定时器，监听滚动，键盘事件，复用Fetch。作者回复: 👍🏻
2021-06-041