react如何处理生命周期方法中的对象严格相等答案

【问题标题】：How does react handle object strict equality in lifecycle methodsreact如何处理生命周期方法中的对象严格相等
【发布时间】：2019-08-19 12:45:41
【问题描述】：

我的理解是 react 使用严格的相等检查，所以如果你使用使用不可变状态的 redux，那么相等检查不是每次都会失败吗？

例如我在阅读的一篇文章中看到了这段代码sn-p：

componentDidUpdate(prevProps) {
//Typical usage, don't forget to compare the props
 if (this.props.user !== prevProps.user) {
   this.fetchData(this.props.user.userName);
 }
}

如果传入的 props 对象来自 redux 并且 user 属性是一个对象或数组，它将有不同的引用，并且每次检查都会失败。

这对吗？

如果是这种情况，react redux 是否会优化组件重新渲染我从 HOC 中的 mapStateToProps 返回的手动深度检查对象值？或者这也总是会失败？

谢谢

【问题讨论】：

您能否解释一下为什么您认为参考文献每次都在变化？如果 user 来自 redux 存储并且没有任何调度的操作发生变化 user 则引用在渲染中将保持不变。如果您出于某种原因从 mapStateToProps 中的 redux 存储转换值，那么在这种情况下，您需要使用类似 reselect 的东西来记忆这些转换以避免重新渲染，除非底层 redux 存储已更改：@987654321 @
是的，你是对的，React 只对相等性进行浅层检查。对对象值的更改会产生全新的对象，然后会通过相等性检查。在 Redux 中没有进行深度检查优化的普通方法，但您可以使用像 reselect 这样的库来帮助您通过选择器记住存储值：github.com/reduxjs/reselect

标签： javascript reactjs redux react-redux

【解决方案1】：

您只能对原始值执行严格相等，而不是对象。

所以你应该如下定义函数：

function isEquivalent(a, b) {
    // Create arrays of property names
    var aProps = Object.getOwnPropertyNames(a);
    var bProps = Object.getOwnPropertyNames(b);

    // If number of properties is different,
    // objects are not equivalent
    if (aProps.length != bProps.length) {
        return false;
    }

    for (var i = 0; i < aProps.length; i++) {
        var propName = aProps[i];

        // If values of same property are not equal,
        // objects are not equivalent
        if (a[propName] !== b[propName]) {
            return false;
        }
    }

    // If we made it this far, objects
    // are considered equivalent
    return true;
}

或者你可以使用lodash函数：

_.isEqual(object1, object2)

【讨论】：