如何在 React 中检查 prevProps 和 nextProps 是否相同？

Question

我有这样的生命周期钩子

componentDidUpdate(prevProps) {
    // Typical usage (don't forget to compare props):       

    if (prevProps.activeItems !== this.props.activeItems) {
      this.props.doAction();
    }
  }

和道具有这样的结构

[
  {id:1, hidden: true},
  {id:2, hidden: false}
  {id:3, hidden: true}
]

我需要检查每个对象的 prev 和 next props 中的属性 hidden 是否相同，因此我将知道是否需要在 if 条件下运行函数。我怎样才能做到这一点？

Answer 1

不要使用 componentWillReceiveProps —— 这个钩子很快就会被弃用。componentDidUpdate 是您需要的正确钩子。

问题在于您正在进行的比较是浅层比较——即它不比较各个数组中的嵌套值。

基本思想是，您应该遍历两个数组并比较各个嵌套值——这里有更多相关信息：如何在 JavaScript 中比较数组？

您还可以使用类似 lodash 的 isEqual 方法来执行两个数组之间的深度比较：https ://lodash.com/docs/4.17.10#isEqual