React Hooks 核心原理与实战
王沛
eBay 中国研发中心资深技术专家
10740 人已学习
新⼈⾸单¥59
登录后,你可以任选2讲全文学习
课程目录
已完结/共 25 讲
React Hooks 核心原理与实战
15
15
1.0x
00:00/00:00
登录|注册

答疑解惑01|如何转换应用React Hooks 的思路?

你好,我是王沛。今天我们来对第一章的内容进行集中答疑。
不知不觉我们的基础篇已经讲完了,也很高兴看到你在交流区积极留言,提出了很多有意义的问题。所以这节课呢,我会针对一些具有代表性的问题,进行集中答疑。一方面算是对课程内容作一个有针对性的补充,另外一方面也希望能对更多的同学有所帮助。
我会先对评论区的提出的几个具有代表性的问题进行讲解,然后再对课程中的几个思考题,做一个回答参考,并给出代码示例。

留言区的问题

02 讲

问题:文中的例子里说,窗口大小发生变化,组件就会更新。对于这一点我不太理解,Class 封装的还可以理解为,state 发生改变了,导致重新 render 了,但 Hooks 感觉这么理解并不通顺,Hook 哪里写得就类似一个纯函数调用,是怎么驱动组件重新更新的呢?
讲解:一个很好的问题,这是很多初学 Hooks 的同学都会有的困惑:一个普通函数怎么就让组件刷新了呢?其实答案也特别简单,那就是自定义 Hooks 中也是通过 useState 这样的内置 Hook 来完成组件的更新的
可能你会觉得,自定义 Hooks 中一定会用到 state 吗?如果你写多了就会发现,自定义 Hooks 要实现的逻辑,要么用到 state,要么用到副作用,是一定会用到内置 Hooks 或者其它自定义 Hooks 的。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

本文是关于React Hooks的应用和转换思路的答疑文章。作者通过回答读者提出的一些关于React Hooks的疑问,深入解释了Hooks的工作原理和使用方法。其中包括对useState、useEffect、useCallback等Hooks的使用场景和注意事项的详细讲解。同时,作者还提供了一些课后思考题,并给出了相应的解答和代码示例,帮助读者更好地理解和应用React Hooks。 在文章中,作者重点解释了Hooks中如何实现组件的更新、副作用的处理以及性能优化等方面的内容。此外,作者还通过具体的代码示例,展示了如何在自定义Hooks中实现灵活配置点击加号时应该加几的功能,以及如何在Redux中实现每次调用时增加或减少指定的变量值。这些内容对于读者理解和应用React Hooks具有很高的参考价值。 总的来说,本文通过解答读者提出的问题和提供实际的代码示例,帮助读者更好地理解和转换应用React Hooks的思路。对于正在学习或使用React Hooks的开发者来说,本文提供了宝贵的技术指导和实用建议。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《React Hooks 核心原理与实战》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(9)

  • 最新
  • 精选
  • TMiRobot
    老师,React 文档提到“React 保证了 setState 函数标识是稳定的,并且不会在重渲染时改变,因此在 useEffect 和 useCallback 的依赖列表中忽略它是安全的。” useCallback(() => setCount(count - n), [count]) 那像这种优化是不是没有必要,根本不需要再去包裹一层 useCallback

    作者回复: 可以保证在 count 不变化的时候不会产生新的回调函数。

    2021-06-18
    1
  • Geeker
    我是假期学习第一人
    2021-06-12
    9
  • 盖世英雄
    hooks也用的两年了,一直都停留在使用,完成功能上! 没有深入了解过,感谢老师!
    2021-06-25
    1
    4
  • 小鸟淫太
    老师您好,我在网上看到说过度使用 useCallback 会对性能有影响。 https://blog.csdn.net/weixin_47143210/article/details/106193323
    2021-06-14
    2
    2
  • 吴颜
    文中奖“但是始终使用 useCallback 是个比较好的习惯。”,这个感觉很难认同,而使用react过程中也确实极少使用useCallback,useCallback在函数组件中的作用我感觉与函数组件本身是有点格格不入的,我体验useCallback更多是为了保证react功能的完备性而推出的,是为了“解决问题”而非用来日常开发使用
    2023-09-07归属地:北京
  • Jackchoumine
    副作用一定是和当前 render 的结果没关系的,而只是 render 完之后做的一些额外的事情?很不理解这里。为何说副作用和当前render 结果无关呢? 比如接口发返回了,要重新设置 state 就是会触发重新渲染,就是和渲染结果相关的。 我时哪儿没有理解到位吗?
    2023-06-06归属地:贵州
    1
  • Jia添!
    补充 : useAction实际上不仅用起来麻烦且无法通过eslint-hooks检测,而且根据官方文档Dan的说法,不仅不符合hooks思想,也没有必要(因为函数式编程,hooks api是直接使用调用结果,甚至没有原先oop式独立的component中间层)。 所以useAction在最新的alpha版本中已经凉了。
    2022-01-04
  • micstone
    hooks
    2021-06-14
  • 与你.
    逃不过万年老二
    2021-06-14
    2
收起评论
显示
设置
留言
9
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部