ReactJS修炼之路（五）：Immutable.js的使用及setState的一个误区

本文链接：https://blog.youkuaiyun.com/code_for_free/article/details/52816656

问题

这篇博客仅作为学习笔记，没有多少自己的东西，只有一个小误区，记录下来当做备忘。

学习资料：

关于Immutable.js如何整合进React中，推荐阅读官方的文档和上面第二篇博客，下面不会说具体的使用方法，所以阅读到这里这篇博客算是结束了。

下面说说我以前在setState中踩的坑，同时也回答了一个问题，为什么需要Immutable.js这个轮子。

年少时不小心犯下的错

最近会启动一个新的项目，在进行技术选型的时候特地看了Immutable.js，才发现自己以前写码有些错误的地方。

上代码：

    let data = this.state.data;
    data.times = data.times + 1;
    this.setState({ data: data });
    // 下面打印的结果会是已经加 1 后的值。
    console.log(this.state.data.times);

还记得该系列的上一篇文章ReactJS修炼之路（四）：组件的性能优化及开发思路中提到的shouldComponentUpdate: function(nextProps, nextState)，因为上面的操作直接改变了this.state.data的值，所以在shouldComponentUpdate中nextState.data和this.state.data其实是同一个对象（2016-12-03更新：这里容易产生误区，再说得详细一点，因为我们在调用this.setState({ data: data })时，把原来的state中的state赋给了新的state，所以下面的nextState.data和this.state.data是同一个对象，既然是同一个对象的两个不同引用而已，那么无论怎么比较得出的结果都是nextState.data和this.state.data相同，所以返回false），因此无论怎么比较都会返回false，导致组件不更新。

正确的做法应该如下：

    let data = _.cloneDeep(this.state.data);
    data.times = data.times + 1;
    this.setState({ data: data });
    // 如果上面不做 cloneDeep，下面打印的结果会是已经加 1 后的值。
    console.log(this.state.data.times);

这样的话，没有改变this.state.data的值，通过调用setState，使得在shouldComponentUpdate中nextState.data是新的值，可以与this.state.data比较，根据比较结果判断是否更新组件。

那么为什么需要Immutable.js？

let data = _.cloneDeep(this.state.data);这行代码可以看出，为了新建一个对象，我们在原对象的基础上进行了深度拷贝，然后改变新对象的值，深度拷贝的坏处很明显，对象越复杂，性能开销越大，而Immutable.js能通过不可变对象来避免这个问题，具体原理看上面的学习资料可以求解：