09｜React Hooks（上）：为什么说在React中函数组件和Hooks是绝配？
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
React Hooks是React v16.8.0版本引入的一种重要的组件逻辑实现方式，它可以用于操作state、定义副作用，并支持开发者自定义Hooks。Hooks借鉴自函数式编程，使得函数组件能够更加贴近React理想模型`UI=f(state)`。本文深入浅出地介绍了React Hooks的概念和使用方法，对于想要深入学习React应用开发的读者来说，是一篇值得阅读的文章。 文章介绍了基础Hooks和其他变体，包括useState、useEffect、useContext等。此外，还讨论了useState的使用方法和性能优化，以及useReducer和更新state的自动批处理。通过本文，读者可以快速了解React Hooks的基本概念和使用技巧，为进一步学习和应用React Hooks打下基础。 在具体内容方面，文章通过实例介绍了在组件内使用可变值的方法，引入了useRef这个Hook，并结合实际案例展示了其用法。同时，文章还提出了思考题，引导读者深入思考和实践，以加深对Hooks的理解。 总的来说，本文通过清晰的讲解和实例演示，使读者能够快速了解React Hooks的基本概念和使用技巧，为进一步学习和应用React Hooks打下基础。
《现代 React Web 开发实战》，新⼈⾸单¥59
全部留言(8)
- 最新
- 精选
🐑置顶你好，我是《现代React Web开发实战》的编辑辰洋，这是👇项目的源代码链接，供你学习与参考： https://gitee.com/evisong/geektime-column-oh-my-kanban/releases/tag/v0.9.02022-09-14归属地：北京11
若川1. React官方文档：Hook 规则 https://zh-hans.reactjs.org/docs/hooks-rules.html 1.1 只在最顶层使用 Hook。不要在循环，条件或嵌套函数中调用 Hook。 1.2 只在 React 函数中调用 Hook。不要在普通的 JavaScript 函数中调用 Hook。 因为本质是链表。在各种判断中写 Hook 会导致节点错乱。 2. useRef 中值变化是不会触发重新渲染。useState 中则是会触发渲染。作者回复: 你好，若川，很棒的答案！
2022-09-12归属地：北京716
0118 批处理依托的 它的调度器。 可中断。 进入commit 阶段 则不可中断。 是否只渲染一次 这个不一定吧作者回复: 你好，01，我赞同你说的。调度器会根据各个state updater的优先级，调整执行顺序，如果这一轮更新不超时，所有队列里的state updater都能执行完，那就一次渲染搞定；如果更新超时，则把未完成的updater留到下次渲染，这就造成了多次渲染的情况（为了保证state结果一致，有时还需要把上一次渲染中已经执行过的高优先级updater再重复执行一遍）。
2022-09-20归属地：北京1
__Initial我想问一下：在state自动批处理时，为什么使用函数参数就可以保证更新函数使用最新的state作者回复: 你好，__Initial，在React 18的Fiber协调引擎中，state的更新会被加入到一个名为updateQueue的单向链表中，当顺序执行更新时，如果当前更新就是一个state值，则记录这个值为newState，执行入下一个更新；如果当前更新是一个函数，则把上一个更新时记录的newState值传给函数作为参数，更新函数执行的结果会覆盖newState值，然后继续执行下一个更新。 如果你感兴趣可以读一下这部分的React源码： https://github.com/facebook/react/blob/v18.2.0/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js#L573-L580
2022-09-19归属地：北京1- 风太大太大1. 函数组件之外的一个普通函数中调用 useState 不会生效 2. 函数组件内部加一个 if 条件语句，在满足条件时才去调用 useState 不会生效。 3. 在这个函数内部调用 useState，再在函数组件内调用这个函数。 useState 不会生效
作者回复: 你好，风太大太大，很棒的答案！正如你所回答的，这些就是第10讲会讲到的React Hooks的使用规则。 另外在开发模式下，当开发者违反了使用规则时，React的Lint规则会提示错误，同时编译工具也会报错，如： Compiled with problems: ERROR src/KanbanNewCard.js Line 17:15: React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render react-hooks/rules-of-hooks 这是很好的开发者体验。
2022-09-16归属地：北京1 
joeluseRef 来代替 useState 吗? 不能，这两个是不同的使用场景，usestate 是可以出发react 的协调过程，useref 不能作者回复: 你好，joel，很棒的答案。更具体来说，调用 useState返回的state更新函数会触发React的协调过程，而为useRef返回的ref.current赋值并不会。
2022-09-15归属地：北京1
学习前端-react隔了好久，回答第二个问题。 useRef 的使用方式是用用会存放一个最新的值即 current，每次修改也不会触发当前组件的render，这个应该就区别于 useState 了，因为setState 会触发当前组件的render。作者回复: 你好，学习前端-react，赞，很棒的答案。
2022-09-17归属地：北京
奕晨Hook 在使用中都会有哪些限制： 1. 在函数组件之外的一个普通函数中调用 useState； 在函数组件之外的普通函数不能调用 useState； 2. 在函数组件内部加一个 if 条件语句，在满足条件时才去调用 useState； 不能 3. 在函数组件内部定义一个函数，在这个函数内部调用 useState，再在函数组件内调用这个函数。 不能 只能在React函数中调用Hook。 可以用 useRef 来代替 useState 吗？ 不可以，useState会重新渲染，useRef 值发生变化，不会重新渲染。2023-01-11归属地：山东1