ReactJS：比较 shouldComponentUpdate 上的道具和状态

Question

我想检查所有属性和状态是否发生变化，return如果有任何变化则为真，并为我的所有根组件创建一个基础组件。

我想知道这是否不是最佳做法并使我的组件变慢。另外，我所做的总是 return 正确：

shouldComponentUpdate: function(newProps, newState) {
    if (newState == this.state && this.props == newProps) {
        console.log('false');
        return false;
    }
    console.log('true');
    return true;
},

我的代码有问题吗？
我应该检查 props 和 state 中的每个变量吗？
不会根据它们的大小检查它们内部的物体使其变慢吗？

Answer 1

比较 shouldComponentUpdate 中的 props 和状态以确定是否应该重新渲染组件被认为是最佳实践。

至于为什么它总是评估为真，我相信你的 if 语句没有执行深度对象比较，而是将你以前和当前的道具和状态注册为不同的对象。

我不知道你为什么要检查两个对象中的每个字段，因为如果道具或状态没有改变，React 甚至不会尝试重新渲染组件，所以 shouldComponentUpdate 方法被调用意味着某些东西必须改变。 shouldComponentUpdate 可以更好地检查一些 props 或 state 是否有变化，并决定是否重新渲染。

Answer 2

我认为我看到的大多数教程（包括官方文档）在访问商店的方式上都存在问题。通常我看到的是这样的：

// MyStore.js

var _data = {};

var MyStore = merge(EventEmitter.prototype, {

  get: function() {
    return _data;
  },

  ...

});

当我使用这个模式时，我发现像 shouldComponentUpdate 这样的函数中的 newProps 和 newState 总是等于 this.props 和 this.state .我认为原因是商店正在返回对其可变 _data 对象的直接引用。

在我的例子中，问题是通过返回 _data 的副本而不是对象本身来解决的，如下所示：

  get: function() {
    return JSON.parse(JSON.stringify(_data));
  },

所以我会说检查你的商店并确保你没有返回任何对其私有数据对象的直接引用。

Answer 3

有一个辅助函数可以有效地进行比较。

var shallowCompare = require('react-addons-shallow-compare');
export class SampleComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
  }

  render() {
    return <div className={this.props.className}>foo</div>;
  }
}

ReactJS：比较 shouldComponentUpdate 上的道具和状态

ReactJS: Compare props and state on shouldComponentUpdate

javascript

reactjs

reactjs-flux