ReactJS性能优化(上)

shouldComponentUpdate？

详情先参考InfoQ上什么时候要在React组件中写shouldComponentUpdate？ 
React已经替我们实现了一个shouldComponentUpdate，原理其实非常简单，组件在决定重新渲染（虚拟dom比对完毕生成最终的dom后）之前会调用该函数，该函数将是否重新渲染的权限交给了开发者，该函数默认直接返回true，表示默认直接出发dom更新，如下代码：

shouldComponentUpdate: function(nextProps, nextState) { 
return true; 
}

but,一般情况下我们的state都是非基本类型，so,该方法需要重写，如下代码：

shouldComponentUpdate(nextProps) { 
return !deepEquals(this.props，nextProps) 
}

值得注意的是，react会非常频繁的调用该函数，并且深度遍历一个大的对象时效率极其低下，因此该方法已经无法用于生产

什么时候需要写shouldComponentUpdate

shouldComponentUpdate 对性能的优化其实微乎其微，那么什么时候该使用该方法呢，有知名博主指出：只有经过测量，发现有了shouldComponentUpdate后组件的渲染速度确实有可察觉的提升，你才应该用它。该博主在fiddle中的例子

react自身提供的与shouldComponentUpdate类似的PureRenderMixin插件？

PureRenderMixin依旧只能处理基本类型，遇到复杂类型就歇菜了~

this.props.obj !== nextProps.obj; // 如果obj.name 修改了，obj的引用依旧相对，此时就会产生bug了

如何正确使用PureRenderMixin？

使用Object.assign操作组件的initialState，

Object.assign(target, ...sources) 
拷贝过程中将调用源对象的getter方法，并在target对象上使用setter方法实现目标对象的拷贝。 
Object.assign(initialState, ...changeRes),initialState就会被改变，如下代码：

var o1 = { a: 1 }; 
var o2 = { b: 2 }; 
var o3 = { c: 3 }; 
var obj = Object.assign(o1, o2, o3); 
console.log(obj); // { a: 1, b: 2, c: 3 } 
console.log(o1); // { a: 1, b: 2, c: 3 }, target object itself is changed

每次通过Object.assign来操作组件的state,都会更新组件的state的引用,在对应组件中引用：

this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);//nice

并且此时的更新都是必要的更新，不会导致非必要的render

下一篇将简单介绍ReactJS性能优化神器immutable