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

16|应用状态管理(上):应用状态管理框架Redux

你好,我是宋一玮,欢迎回到 React 应用开发的学习。
上节课我们学习了不可变数据,了解了不可变数据对 React 的重要意义,然后学习了用 React.memo 创建具有更佳性能的纯组件。最后介绍了在 JS 中实现不可变数据的几种方式,除了我们在oh-my-kanban 中的手工实现,还有 Immutable.js 和 Immer 这些开源框架。
接下来我们会用两节课的时间,学习 React 的应用状态管理。你也许已经胸有成竹了:“应用状态,不就是 useState 吗?已经很熟悉啦。”
很高兴你有这份自信,不过我们上面提到的应用状态管理的学习,是一个概念到框架再到具体案例的过程。首先应用状态管理是一个前端领域的概念,这节课我们会先来看看它是解决什么问题的,然后来学习目前仍然最流行的应用状态管理框架 Redux,了解它的用法和设计思想。
这里也提前做个小预告,在下节课我们会进一步讨论什么情况下使用 React 的 state,什么情况下使用 Redux,并举一些实际的例子。
下面开始这节课的内容。

什么是应用状态管理?

我们先看应用状态(Application State)。理论上,一个应用在运行的时候内存里所有跟它有关的数据都可以称作是应用状态,但实际上,这远远超出了应用开发者需要关注的范围。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

本文介绍了React应用开发中的应用状态管理框架Redux,以及Redux Toolkit的使用。Redux是一个用于管理应用状态的框架,通过动作、归约器和存储实现了一套单向数据流,保证了应用状态的可预测性。文章详细介绍了Redux的核心概念和设计思想,并通过示例代码展示了Redux的基本用法。此外,文章还介绍了Redux Toolkit,它简化了Redux开发,降低了配置Redux store的复杂度,减少了样板代码,并内置了Redux必备的扩展库。通过对比示例代码,展示了Redux Toolkit相对于原始Redux的简化和优势。除了Redux,文章还简要介绍了其他应用状态管理框架,包括MobX和XState。MobX以透明的函数式响应编程的方式实现状态管理,而XState则是一个有限状态机。总的来说,本文通过清晰的概念解释和实际示例,帮助读者快速了解了Redux框架的特点和用法,以及Redux Toolkit的简化优势,同时拓宽了读者对应用状态管理框架的认识。

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

全部留言(5)

  • 最新
  • 精选
  • 学习前端-react
    请问:“React.memo 创建具有更佳性能的纯组件”。对于目前创建的组件来说是不是都可以包上memo。收益是大于成本。

    作者回复: 你好,学习前端-react,这是个好问题。我的立场与React官方文档相同,即这个API只应该用于性能优化,不应该依赖它来开发业务交互逻辑。专栏的《21|性能优化:保证优秀的用户体验》也会讨论这个话题。 React.memo() 是个高阶组件,本身会加深虚拟DOM的层级,它会将props一一做对比,当props的绝对数量足够多时,它的成本也不再可以忽略不计。相应的,被修饰的原组件的渲染成本并不一定就高。当没有具体数据能佐证收益明显大于成本时,不建议加入多余的优化。 此外,React官方文档虽然提到: “此方法仅作为性能优化的方式而存在。但请不要依赖它来“阻止”渲染,因为这会产生 bug。”(https://zh-hans.reactjs.org/docs/react-api.html#reactmemo 截止到2022年11月初这段描述还在) 但它并没有提到是哪方面的Bug。经过一路考古,找到React官方Github最直接提及的issue在这里: https://github.com/facebook/react/issues/14616#issuecomment-455341032 memo vs. useMemo > Can someone please clarify what sort of bugs and how to avoid them? Thanks! This is about shouldComponentUpdate but the issue is similar: reactjs/reactjs.org#1149. Basically — if your component breaks without memo then you're not using it correctly. It only serves as perf optimization. React团队Dan提到的Bug是这个: https://github.com/reactjs/reactjs.org/issues/1149 Save previous view when move data fetch from componentWillUpdate(WillReceiveProps) to ComponentDidUpdate 如果你感兴趣,还可以看看 https://github.com/facebook/react/issues/14463 Q: When should you NOT use React memo?

    2022-10-25归属地:北京
  • demo123567
    redux的作用有点像redis ,发布订阅模式,缓存各类状态。难道开发者是后端转的前端吗
    2022-10-26归属地:重庆
    1
  • 杨永安
    新手学习,遇到跨组件状态管理问题。context 似乎只能传递一个对象,多个数据,需要在根节点上添加多层 Provider,不太方便。 看到了 redux,恍然大悟。但是写到后来模板代码太多了,还好有 redux-toolkit。 另外,Recoil 感觉更加简洁。老师怎么看这个库? https://recoiljs.org/zh-hans/docs/introduction/getting-started/
    2023-03-16归属地:北京
  • Gn
    1.useReducer+Context可以复制Redux流程,更加轻量;Redux对频繁state更新做了优化; 2.redux devTools,state改变很清晰,使用很方便; 让望补充
    2022-10-28归属地:内蒙古
  • Gn
    1.useReducer + Context 可以复制Redux状态流程,更轻量;Redux在多次状态更新有优化
    2022-10-28归属地:内蒙古
收起评论
显示
设置
留言
5
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部