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

Question

我希望能够根据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 HooksprevState后阻止渲染?谢谢你的关心。

Answer 1

两种方式:

1. 使用纯组件使用生命周期钩子或在React钩子中使用ememo。
2. shouldComponentUpdate()在钩子内部使用状态更改login。

Answer 2

用memo包装组件

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);