React中的不可变性

Posted 2023-03-09

参考技术A

在React中，有两种改变数据的方式：

对于时间旅行功能，在React中使用不可变性就显得比较重要了，这让数据回溯成为可能。

在React Fiber 架构中，在渲染时，渲染树都有与之对应的备份渲染树（即之前渲染树），在利用不可变性数据后，使得跟踪数据变更变的容易

不可变性的主要优势在于可以帮助我们再React中创建Pure Components,我们可以更容易确定数据是否发生变更，是否需要进行重新渲染。

immutable 与 immer 都是用于解决JS不可变性的问题的库。

immutable 为了解决不可变性问题，有自己的一套数据结构：List、Map等，对应这原生JS的各个数据结构，并提供了相应的转换API和工具函数。具体可到官方文档处进行浏览。

immer 属于长江后浪推前浪，api更精简，使用更方便。在源码中使用了ES6的Proxy对象，来对操作进行拦截并判断数据是否发送变更，来达到实现不可变性

参考
1. react中文文档——why-immutability-is-important
2. immutable.js官方文档
3. immer.js官方文档