Question

我想检查所有属性并说明它们是否已更改，如果有任何更改则返回true，并为所有根组件创建基本组件。

我想知道它是不是最好的做法，让我的组件变慢。而且，我所做的总是返回真实：

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

我的代码有什么问题吗？
我应该检查道具和州内的每个变量吗？
不会检查里面的物品是否因为它们的大小而变慢？

Answer 1

最佳做法是在shouldComponentUpdate中比较道具和状态，以确定是否应重新渲染组件。

至于为什么它总是评估为真，我相信你的if语句不会进行深层对象比较，并且会将你之前和当前的道具和状态注册为不同的对象。

我不知道为什么你要检查两个对象中的每个字段，因为如果道具或状态没有改变，React甚至不会尝试重新渲染组件。事实上shouldComponentUpdate方法被称为必须改变的东西。 shouldComponentUpdate实现得更好，可以检查一些道具或声明更改并决定是否基于此重新渲染。

Answer 2

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

// MyStore.js

var _data = {};

var MyStore = merge(EventEmitter.prototype, {

  get: function() {
    return _data;
  },

  ...

});

当我使用此模式时，我发现像newProps这样的函数中的newState和shouldComponentUpdate总是评估为等于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上的props和state

3 个答案: