问题
这篇博客仅作为学习笔记,没有多少自己的东西,只有一个小误区,记录下来当做备忘。
学习资料:
关于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能通过不可变对象来避免这个问题,具体原理看上面的学习资料可以求解:
else
有一段时间没更新博客了,跟国庆假期有关,但主要原因还是遇到的问题少了,倒不是说自己水平提升了很多,而是自己实际编码的时间少了(话说最近看了《易中天中华史》,十分推荐)。
只有coding能产生问题,也只有coding能解决问题,提升自己。
加油。