不可变性思想

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yingzizizizizizzz/article/details/81544158

摘抄自:https://doc.react-china.org/tutorial/tutorial.html

不可变性思想的重要性

改变应用数据的方式一般分为两种。第一种是直接修改已有的变量的值。第二种则是将已有的变量替换为一个新的变量。

直接修改数据

var player = {score: 1, name: 'Jeff'};
player.score = 2;
// Now player is {score: 2, name: 'Jeff'}

替换修改数据

var player = {score: 1, name: 'Jeff'};

var newPlayer = Object.assign({}, player, {score: 2});
// Now player is unchanged, but newPlayer is {score: 2, name: 'Jeff'}

// 或者使用最新的对象分隔符语法,你可以这么写:
// var newPlayer = {...player, score: 2};

两种方式的结果是一样的,但是第二种并没有改变之前已有的数据。通过这样的方式,我们可以得到以下几点好处:

1、很轻松地实现 撤销/重做以及时间旅行

运用不可变性原则可以让我们很容易实现一些复杂的功能。例如我们在这个教程中会实现的,通过点击列表中的某一项直接返回当某一步棋时的状态。不改变已有的数据内容可以让我们在需要的时候随时切换回历史数据。

2、记录变化

在我们直接修改一个对象的内容之后,是很难判断它哪里发生了改变的。我们想要判断一个对象的改变,必须拿当前的对象和改变之前的对象相互比较,遍历整个对象树,比较每一个值,这样的操作复杂度是非常高的。

而运用不可变性原则之后则要轻松得多。因为我们每次都是返回一个新的对象,所以只要判断这个对象被替换了,那么其中数据肯定是改变了的。

(当时记得面试饿了么的时候,有一个问题就是消消乐游戏怎么判断能消除三个一样的?怎么显示之后的数据?当时想的是遍历整个格子,然后符合三个的就消除;然后遍历数组显示到相应位置,这样的话复杂度非常高。今天学习react的时候看到了这个思想,感觉很重要,应该可以用到这个上边(有空了自己实现一个))

3、在 React 当中判定何时重新渲染

运用不可变性原则给 React 带来最大的好处是,既然我们现在可以很方便地判断对象数据是否发生改变了,那么也就很好决定何时根据数据的改变重新渲染组件。尤其是当我们编写的都属于 纯组件 pure components 的时候,这种好处的效果更为明显。

猜你喜欢

转载自blog.csdn.net/yingzizizizizizzz/article/details/81544158