React Hooks - 使用 prevState 时防止重新渲染答案

【问题标题】：React Hooks - Prevent re-render when using prevStateReact Hooks - 使用 prevState 时防止重新渲染
【发布时间】：2021-08-15 10:25:14
【问题描述】：

我希望能够使用 React Hooks 根据之前的状态更改有条件地设置状态。但如果状态保持不变，则组件不应重新渲染。

当使用类组件时，我可以使用：

this.setState(prevState => {
   if(prevState.value !== true) {
     return { value: true }
   }

   return null
})

上面的代码将状态设置为true，前提是它不是true。但是，如果它已经是 true，组件不会重新渲染。我想用 React Hooks 达到同样的效果。

我知道使用 React Hooks，我可以像这样使用 prevState：

setValue(prevValue => {
   // some code
   return newValue
})

但是，如果状态保持不变，我不知道如何防止重新渲染。使用 React Hooks prevState 后，我是否可以阻止渲染？感谢您的关心。

【问题讨论】：

if (!state.value) setState({ value: true });?
@Andy 谢谢你的建议。我目前正在使用这个。但是，据我所知，这不是最佳做法，因为它可能导致错误的结果。这是一个链接：stackoverflow.com/a/54807520/8318855。如果我弄错了，请告诉我。
如果您的状态只是一个对象，其属性为value，您可以使用它。如果不是if (!state.value) setState({ ...state, value: true }); 可能会更好，因此您将所有其他属性保留在状态中。

标签： javascript reactjs react-hooks

【解决方案1】：

两种方式：

在 React Hooks 中使用使用生命周期钩子或 useMemo 的纯组件。
shouldComponentUpdate() 在这个钩子中使用登录状态的改变。

【讨论】：

【解决方案2】：

用备忘录包装你的组件

import { useEffect, useState, memo } from "react";

const App = () => {
  const [test, setTest] = useState(false);

  useEffect(() => {
    console.log("re-rendered");
  });

  const setTestToTrue = () => {
    setTest((v) => {
      if (v !== true) return true;
      return v;
    });
  };

  return (
    <div className="App">
      <button onClick={setTestToTrue}>Set test to true</button>
    </div>
  );
};

export default memo(App);

【讨论】：