import { useState } from "react";
export default function App() {
console.log("rendered...")
const [count, setCount] = useState(0);
const increaseCount = () => {
setCount(count 1);
};
const setFourValue = () => {
setCount(4);
};
return (
<div className="App">
<div
style={{ display: "flex", alignItems: "center", columnGap: ".25rem" }}
>
<button onClick={increaseCount}>Increase</button>
<button onClick={setFourValue}>Set 4</button>
<span>{count}</span>
</div>
</div>
);
}
我試圖弄清楚組件何時以及如何渲染。我嘗試的情況是我將計數增加到 4，現在我的計數值為 4。但我單擊“設定 4”按鈕，我的計數值仍然是 4，但仍然重新渲染組件。之后，如果再次單擊“設定 4”按鈕組件不會重新渲染。為什么 ？
uj5u.com熱心網友回復：
在 React 中，組件只會在 astate或propin 組件發生變化時重新渲染。
設定4為4不是更改。
React 足夠聰明，不會不必要地重新渲染。
uj5u.com熱心網友回復：
要補充巴里的答案，當您將計數設定4為第一次 withsetFourValue后將其增加到4with 時increaseCount，它實際上不是 4。控制臺記錄計數，您會看到它實際上是3即使它顯示4在螢屏上。
uj5u.com熱心網友回復：
increaseCount你的功能有問題。當您使用之前的值更新狀態屬性時，必須使用回呼引數。這是由于狀態更新的異步性質。（見https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous）
const increaseCount = () => {
setCount((count) => (count 1));
};
正如@Tim van Dam 所說，這可能是計數為 3 而不是 4 的原因。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/493169.html
標籤：javascript 反应 反应钩子 使用状态
上一篇：如何計算哪個組中有多少專案？