今天我们解决以下几个问题，什么是immutable data，mutable data带来了哪些问题，immutable data优化了哪些性能？

mutable data 数据的可变性

数据的可变性用一段代码就可以描述清楚

const a = [{ todo: 'Learn js'}, {todo: 'Learn react'}];
const b = [...a];
b[1].todo = 'Learn vue';
console.log(a[1].todo); //Learn vue
复制代码

其实可以一眼看出这是浅copy导致的问题。内层的对象指向堆内存地址相同，所以修改b数组中的对象，a数组也会发生变化。平时大伙在项目中操作比较复杂的数据结构时，都习惯性deepCopy,否则就会出现一些不易察觉的bug。

那我们只要遇到需要操作多层数据结构的情况使用deepCopy不就解决了么。
然而事实是随着数据层数的增加，deepCopy性能的消耗还是十分明显的，并且在React中deepCopy会对渲染造成很大的开销，这与react的渲染机制有关。

immutable数据优化了哪些性能

首先我们要看一下React 是如何渲染的。

React 渲染机制解析