为什么不可变性在React当中非常重要

妖狐艹你老母 2022-05-31 13:55 151阅读 0赞

###     ###

在上一节内容当中，我们通过使用 `.slice()` 方法对已有的数组数据进行了浅拷贝，以此来防止对已有数据的改变。接下来我们稍微了解一下为什么这样的操作是一种非常重要的概念。

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

#### 直接修改数据 ####

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};

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

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

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

#### 记录变化 ####

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

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

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

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

了解更多有关 `shouldComponentUpdate()` 以及如何编写 pure components 的内容，你可以查阅 [性能优化][Link 1] 这一篇。

[Link 1]: https://doc.react-china.org/docs/optimizing-performance.html#examples

发表评论取消回复

表情：

评论列表（有 0 条评论，151人围观）

还没有评论，来说两句吧...

相关阅读

相关 final&不可变性

一、什么是不可变性（Immutable）如果对象在`被创建后，状态就不能被修改`，那么它就是不可变的这个对象不能被修改指：对象指

旧城等待，/ 2024年03月16日 17:45/ 0 赞/ 75 阅读

相关 String不可变性

什么是不可变类？ > 这样理解： > 一个对象在创建完成后，不能去改变它的状态，不能改变它的成员变量（如果成员变量包含基本数据类型，那么这个基本数据类型的值不能改变；

阳光穿透心脏的1/2处/ 2023年10月12日 13:31/ 0 赞/ 65 阅读

相关 Java反射机制(非常重要!!!)

> 反射是框架设计的灵魂 > > （使用的前提条件：必须先得到代表的字节码的Class，Class类用于表示.class文件（字节码）） 1. 反射的概念 Jav

水深无声/ 2023年09月24日 14:33/ 0 赞/ 71 阅读

相关为什么算法在面试中这么重要？

各位，最近不少读者问了一些关于面试的事情，很多人也提到了算法对于面试到底重不重要。今天咱们就这个问题跟大家简单聊几句，当然能力水平有限，有不对或者不到位的地方还请大伙批评指正。

我不是女神ヾ/ 2023年07月21日 05:43/ 0 赞/ 112 阅读

相关并发与不可变性

对于今天的应用程序来说，并发是一个重要的、也愈发受到关注的方面。随着交易量的增加、业务日趋复杂，对大量并发线程的需求也越来越急迫。另外，由依赖注入管理的对象在应用程序中的其角色

╰+攻爆jí腚メ/ 2022年08月17日 15:12/ 0 赞/ 193 阅读

相关深入介绍STBL——非常重要

http://www.cnblogs.com/lidabo/p/3754130.html http://www.cnblogs.com/lidabo/p/37

布满荆棘的人生/ 2022年06月07日 12:14/ 0 赞/ 524 阅读

相关为什么不可变性在React当中非常重要

在上一节内容当中，我们通过使用 `.slice()` 方法对已有的数组数据进行了浅拷贝，以此来防止对已有数据的改变。接下来我们稍微了解一下为什么这样的操作是一种非

妖狐艹你老母/ 2022年05月31日 13:55/ 0 赞/ 152 阅读

相关反射（非常重要）

反射是框架设计的灵魂（使用的前提条件：必须先得到代表的字节码的Class，Class类用于表示.class文件（字节码））一、反射的概述 JAVA反射机制是在运行

Myth丶恋晨/ 2022年05月09日 10:08/ 0 赞/ 229 阅读

相关（非常非常重要）Java基础之反射

反射是框架设计的灵魂（使用的前提条件：必须先得到代表的字节码的Class，Class类用于表示.class文件（字节码））一、反射的概述 JAVA反射机制

àì夳堔傛蜴生んèń/ 2022年04月12日 13:49/ 0 赞/ 291 阅读

相关字符串的不可变性 C#

本文部分内容摘自官网。相关导读： [Built-in reference types (C\ reference)][Built-in reference types

快来打我*/ 2021年09月24日 21:38/ 0 赞/ 268 阅读