如何使用 react shouldComponentUpdate() Lifecycle 方法比较对象的嵌套数组答案

【问题标题】：How to compare nested array of object using react shouldComponentUpdate() Lifecycle method如何使用 react shouldComponentUpdate() Lifecycle 方法比较对象的嵌套数组
【发布时间】：2019-09-23 12:17:38
【问题描述】：

我正在寻找最好的方法，以便在使用 shouldComponentUpdate

时将 state/props 中的当前值与 state/props 中的新值进行比较

shouldComponentUpdate(nextProps, nextState)

如果我的状态中有以下数据，让我们考虑一个示例

[
        {
          title: "Hello",
          id: 1,
          isUpdated: false,
          property: [
            {
              name: "property 1",
              area: "area 1",
              inspection: [
                {
                  isNew: true,
                  isSold: false,
                  isLicenseExpired: false
                }
              ]
            },
            {
              name: "property 2",
              area: "area 2",
              inspection: [
                {
                  isNew: false,
                  isSold: false,
                  isLicenseExpired: true
                }
              ]
            }
          ]
        },
        {
          title: "World",
          id: 2,
          isUpdated: false,
          property: [
            {
              name: "property 1",
              area: "area 1",
              inspection: [
                {
                  isNew: false,
                  isSold: false,
                  isLicenseExpired: true
                }
              ]
            },
            {
              name: "property 2",
              area: "area 2",
              inspection: [
                {
                  isNew: false,
                  isSold: false,
                  isLicenseExpired: true
                }
              ]
            }
          ]
        }
      ]

现在，当我使用相同的数据再次更新状态时，我无法手动将其与 prev 和 current props/state 进行比较，因为如果我比较它就像 nextProps.data !== this.props.data 它会给出我错误的结果，因为它只进行浅比较。

我也知道我可以使用 lodash 库来深度比较值，但我想知道比较 shouldComponentUpdate() 中对象的嵌套数组的最佳方法

这是现场示例 - https://codesandbox.io/s/crazy-perlman-f3e1k?fontsize=14 如果您有兴趣查看我的代码和问题。

感谢您的宝贵时间。

【问题讨论】：

您能告诉我您采用了什么方法吗？

标签： javascript reactjs react-dom

【解决方案1】：

对于您的问题，此线程的答案可能过于广泛。 JSON.stringify 是一种方法，但速度很慢。 Lodash，下划线也可以。或者，您可以使用线程中的响应者提供的功能之一。

How to compare arrays in JavaScript?

【讨论】：