反应备忘录 nextState答案

【问题标题】：React memo nextState反应备忘录 nextState
【发布时间】：2021-08-05 20:50:11
【问题描述】：

我正在尝试在功能组件中实现 shouldComponentUpdate 方法。

这里是原始方法（classfull组件）

shouldComponentUpdate(nextProps, nextState) {
   return (
     this.state.isSelected || nextState.isSelected !== this.state.isSelected
   );
}

但是，使用 React 备忘录，我似乎只能访问 prevProps 和 nextProps，而不是 nextState。

memo(..., (prevProps, nextProps) => true);

如何在功能组件中访问 nextState 来模拟 shouldComponentUpdate？

【问题讨论】：

所以基本上，那个条件是说：如果当前的isSelected 是true，总是重新渲染。如果是false，只有在变成true时才重新渲染？
条件是什么？所以组件应该在this.state.isSelected 为真并且状态发生任何变化时更新（nextState.isSelected !== this.state.isSelected）？您可以将isSelected 放在useEffect 的dep 数组中，应该没问题。

【解决方案1】：

react memo 的目的是只检查 props 何时更改而不是状态。如果你试图这样做，你就违反了规则——纯组件功能的目的。你想要的是使用效果挂钩：

useState(()=>{
  //...
}, [state that you want to check])

因此，根据此要求，请避免使用备忘录，因为它不是纯组件。组件会在状态改变时渲染，所以没有纯粹的功能。

在执行 shouldComponentUpdate 时，不需要传递依赖数组，只需检查条件，然后将 useEffect 作为 shouldComponentUpdate 使用。

useState(()=>{
  //check condition here and do logic
})

【讨论】：