现代 React Web 开发实战
宋一玮
FreeWheel 中国研发中心前端架构师
16115 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 31 讲
现代 React Web 开发实战
15
15
1.0x
00:00/00:00
登录|注册

17|应用状态管理(下):该用React组件状态还是Redux?

你好,我是宋一玮,欢迎回到 React 应用开发的学习。
上节课我们学习了应用状态对于 JS 前端应用的重要意义,也学习了以 Redux 为代表的应用状态管理框架,介绍了 Redux 的核心概念 actionreducerstore ,以及它单向数据流的本质。从使用角度,我们介绍了 Redux 封装库 Redux Toolkit 的用法,强调了它对 Redux 开发的简化。
不知你发现没有,上节课除了作为扩展内容的 MobX 和 XState,我们完全没有用到 React。请你放心,当然不是我忘了这个专栏的主题,而是我希望你能以更纯粹的视角,去了解应用状态管理这个领域知识,不会因为 React 的概念导致先入为主。
这节课,我们会把 Redux 与 React 结合起来使用,看看它能为 React 的状态管理带来什么好处,同时也要探讨什么时候该用 Redux,什么时候用 React 内建的 state,更或者,是否可以混用两种状态管理。

React 应用中有哪些状态?

我们在开发 React 应用时,会用到各种状态,大致可以分类成三种:业务状态、交互状态以及外部状态。
业务状态是指与业务直接相关的状态,这些状态理论上剥离 UI 也可以使用,比如在单元测试中、Node.js 环境中等等。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

本文深入探讨了在React应用中的状态管理,包括业务状态、交互状态和外部状态的分类及应用。作者首先介绍了业务状态和交互状态的概念,并通过具体例子说明了它们的应用场景和重要性。随后,文章讨论了全局状态与局部状态的区分,以及它们在React组件中的传递和应用。通过对状态管理的分类和区分,读者可以更好地理解在React应用中状态的使用和管理。 此外,文章还介绍了在React中使用Redux的方法,包括使用Redux官方的React连接器React Redux以及在组件中使用Redux的示例代码。同时,文章也提到了何时应该考虑引入Redux以及如何混用React内建state和Redux store。最后,文章提出了思考题,鼓励读者尝试用Redux改写示例项目,并分享挑战和成果。 总的来说,本文内容深入浅出,适合React开发者快速了解状态管理的核心概念和应用场景,同时也提供了对Redux的初步了解和使用指南。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《现代 React Web 开发实战》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(4)

  • 最新
  • 精选
  • 🐑
    老师提到了路径依赖这个概念,说明老师平时的知识储备是不局限于技术领域的。学习了,向老师看齐~

    作者回复: 你好,辰洋,很高兴你注意到了“路径依赖”概念。 我认为各行各业各个领域其实具有相通性,时不时地找些机会拓宽自己的视野,对自己的技术生涯和职业生涯一定会有帮助。就比如我身边一些炒股的同事,应该是从股市中学到了某些很厉害的知识技能,最近在本职工作上非常积极上进,我很佩服他们。

    2022-10-08归属地:北京
    9
  • yihang
    还有个问题我想提前问一下老师:最近使用了react router browserrouter模式,同时用懒加载实现动态路由,但页面跳转之间会有明显的闪烁。换成hashrouter能好一些,但同样有肉眼可见的闪烁,不知这个问题有没有较好的解决方案?

    作者回复: 你好,yihang,这是React 18新API useTransition的典型用例,不过直到目前(2022年10月底)为止react-router 6.x还没有正式采用这个新API,需要自己workaround,请参考: https://github.com/remix-run/react-router/issues/8860#issuecomment-1249914724 。

    2022-10-26归属地:北京
    2
    1
  • yihang
    希望讲讲redux异步数据的处理。为什么它的api设计的如此复杂,感觉mobx就简单直白很多
    2022-10-25归属地:宁夏
    4
  • 阿阳
    老师,对于外部状态,感觉还不太懂,能多举几个例子吗
    2023-02-02归属地:江苏
    1
收起评论
显示
设置
留言
4
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部