React：在反应类组件中，我应该使用 !== 来匹配 nextState 和 currentState答案

【问题标题】：React: In react class component, should I use !== to match nextState with currentStateReact：在反应类组件中，我应该使用 !== 来匹配 nextState 和 currentState
【发布时间】：2021-06-15 05:31:05
【问题描述】：

我有一个关于反应类组件的问题。我了解功能组件是使用 react 时的最新技术。

通常，如果我需要在 ShouldComponentUpdate 中检查当前状态/道具和下一个状态/道具，以根据检查决定组件是否应该更新。

在与数组或对象进行比较时，我应该使用 use clonedDeep 还是 !==？我知道 clonedDeep 是完全克隆对象，而 !== 是浅检查。

【问题讨论】：

你想通过深度克隆对象来达到什么目的？

标签： reactjs components state

【解决方案1】：

浅与深

如果你进行浅层比较，你的代码会被执行，如果你的逻辑涉及更新相同的状态，有时会出现错误Maximum call stack size exceeded，因为每次更新的引用都不相同。

因此，使用一些库来执行深度比较会很有用，或者至少比较您感兴趣的属性以运行您的代码。

获取上一个状态

比较它们听起来可能很困难，因为一开始你手边没有prevState。为了实现这一点，您可以利用 useRef，创建一个 usePrevious 自定义钩子，就像 react docs 中建议的那样来存储以前的状态：

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => { ref.current = value });
  return ref.current;
}

您可以在您的组件中使用它，例如：

  const [arr, setarr] = useState([1, 2, 3])
  const previousArr = usePrevious(arr)

比较状态

最后，您将使用useEffect（将您的 state 和 prevState 作为依赖项）在其中进行一些验证以执行您的代码：

  useEffect(() => {
    const isEqual = _.isEqual(arr, previousArr)
    isEqual
      ? console.log('same content')
      : console.log('different content')
  }, [arr, previousArr])

注意：在山上previousArr 是undefined，这样他们就不相等了。如果您想跳过 Mount 上的任何操作，您可以验证 previousArr 是否未定义。

【讨论】：