关于React.js 的shouldComponentUpdate()方法中值变化的调试

翻译自medium

React中的可选生命周期方法shouldComponentUpdate()可以配合自己写的代码逻辑来优化性能，但是与此同时如果你忘记了比较值的变化，项目调试起来也会比较麻烦。

当和Redux和其他周边库一起使用的时候，这其实就是通过比较所有属性是否相等来决定是否要页面重新渲染更新。如果你漏掉了某一个值，那么接下来你就嗨皮了，因为你要花半天找到底漏掉了哪一个。下面就是我们经常会写的代码：

 shouldComponentUpdate(props, state) {    return props.first !== this.props.first      || props.last !== this.props.last  }

这样写一般没有问题，但是就像上面说的如果你面对的是个大的组件，你很容易漏掉了某个值。试想一下，你是否需要这样的东西：

一个很小的changed()工具方法就能帮我们把这些脏活累活都干了，而且能告诉我们是否有值变化了，如下图所示(你也可以自定义一些log的样式:P)。

const changed = (name, keys, old, v) => {    for (var i = 0; i < keys.length; i++) {    if (v[keys[i]] !== old[keys[i]]) {      console.log('%c %s: %s has changed from %o to %o', 'color: #c00', name, keys[i], old[keys[i]], v[keys[i]])      return true    }