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

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

我想知道这是否是最好的做法，并使我的组件缓慢。 而且，我所做的总是正确的：

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

我的代码有什么问题吗

我应该检查道具和状态中的每个变量吗

不会检查它们内部的对象，根据它们的大小使其变慢吗

---

最好的做法是比较

shouldComponentUpdate

中的道具和状态，以确定是否应该重新渲染组件

至于为什么它总是计算为true，我相信if语句没有执行深入的对象比较，而是将您以前和当前的道具和状态注册为不同的对象

---

我不知道您为什么要检查这两个对象中的每个字段，因为如果道具或状态没有更改，React甚至不会尝试重新渲染组件，因此调用了

shouldComponentUpdate

方法这一事实意味着一定发生了更改

shouldComponentUpdate

实现得更好，可以检查一些道具或状态的更改，并决定是否基于这些更改重新渲染。

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

// MyStore.js

var _data = {};

var MyStore = merge(EventEmitter.prototype, {

  get: function() {
    return _data;
  },

  ...

});

当我使用此模式时，我发现像

这样的函数中的
newProps
和
newState
应该组件更新

总是计算为等于this.props和this.state。我认为原因是存储返回对其可变

\u数据

对象的直接引用

在我的例子中，问题是通过返回

\u数据的副本而不是对象本身来解决的，如下所示：

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

因此，我建议检查您的存储，并确保您没有返回对其私有数据对象的任何直接引用。
有一个帮助函数可以有效地进行比较

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>;
  }
}

var shallowCompare=require（'react-addons-shallow-compare'）；
导出类SampleComponent扩展React.Component{
shouldComponentUpdate（下一步，下一步状态）{
返回shallwcompare（this，nextrops，nextState）；
}
render（）{
返回foo；
}
}
我想你想看看
PureRenderMixin
：<默认情况下，code>shouldComponentUpdate

返回

true

。您可以通过正确实现

shouldComponentUpdate

来提高应用程序的性能，这样它就不必再次渲染子树了。谢谢，我来看看。