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