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

15|不可变数据:为什么对React这么重要?

你好,我是宋一玮,欢迎回到 React 应用开发的学习。
上节课我们不再依赖 CRA,从零开始用 Vite 搭建了一个新的 React 项目,并把 oh-my-kanban 的代码迁移了过来,熟悉了与 React 应用代码直接相关的工程化概念和工具。其中,我们也重点介绍了代码静态检查工具的用法和部分规则。结合从第 3 节课以来学到的知识,到现在你已经基本可以独立开发小型 React 项目了。
从这节课开始,我们将进入新的模块,学习一些大中型 React 项目中会用到的技术和最佳实践,尤其会重点讲解当你融入一个前端开发团队时,需要的开发工作思路和方式的转变,这会帮你更从容应对团队协作。
这节课的主要内容是不可变数据。
没能以正确方式变更数据,是 React 开发中产生 Bug 的重要原因之一。请你回忆一下在第 3 节课末尾,在更新 todoList state 时留下的伏笔: setTodoList(currentTodoList => [newCard, ...currentTodoList]) 为什么不能写成 todoList.unshift(newCard) 呢?当学习了不可变数据的原理和实现,你将对 React 的渲染与数据之间的关系更有把握。
下面开始这节课的内容。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

本文深入探讨了在React开发中不可变数据的重要性以及相关技术。首先介绍了不可变数据的特性和在JavaScript中的实现方式,然后探讨了React为何需要不可变数据以及数据对比的相关内容。此外,还介绍了React纯组件的概念和Immer框架的使用方法。文章还提到了可持久化数据结构和Immutable.js,以及在React中使用Immer的示例。通过深入浅出的方式,帮助读者了解了不可变数据在React开发中的重要性,以及如何在实际开发中应用不可变数据的技术特点。文章内容涵盖了不可变数据的概念、实践和工具,对于React开发者来说具有很高的参考价值。

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

全部留言(3)

  • 最新
  • 精选
  • 相望于江湖
    我有个疑问,不可变其实就是把对象、数组深度克隆一遍。 深度克隆这个操作应该比深度比较更耗时吧,而且对象克隆来克隆去,难道不会造成内存暴涨,甚至泄露吗?

    作者回复: 你好,相望于江湖,你对深度克隆的担心是合理的,但不可变一般不会使用深度克隆的方式来做,而是会尽可能重复利用现有的数据,比如 const objA 1 = {a: 1, b: objB1}; 在修改a属性时,会创建一个新的const objA2 = {a:2, b: objB1}; 因为b属性没有任何修改,所以会沿用之前的objB1。当然就算是这样的设计也会有性能上的损失,可以认为这是在JS语言中实现 可持久化数据结构 的必要代价。更深入的讲解可以参考immutable.js库的设计实现,推荐这篇: https://juejin.cn/post/6844903679644958728#heading-1

    2023-09-08归属地:湖北
    1
  • 01
    可能需要deepFreeze。 本身存在冻结不应该冻结对象的风险 preact给自己乃至react 提供了 signals。 用到了proxy

    作者回复: 你好,01,很赞同你的提法,无论是Object.freeze还是基于它实现的deepFreeze,都对被freeze的对象有一定要求,比如引用关系不能形成环,不能freeze window对象等。最让人担心得我觉得还是它在JS严格模式和非严格模式下的行为不一致:修改一个freeze后的属性,严格模式下会抛error,非严格模式下修改失败但代码会继续往下执行。

    2022-10-11归属地:北京
    2
  • thomas
    保存一份数据的多个版本变得可行。 --------------------------------> 没理解这句话,即使是可变的数据,也能实现一份数据多个版本。麻烦老师具体解释下
    2023-12-29归属地:广东
收起评论
显示
设置
留言
3
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部