在下面的代碼中
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import React, {
useState,
useEffect,
useMemo,
useRef,
useCallback
} from "react";
const App = () => {
const [channel, setChannel] = useState(null);
const handleClick1 = useCallback(() => {
console.log(channel);
}, [channel]);
const handleClick2 = () => {
console.log(channel);
};
const parentClick = () => {
console.log("parent is call");
setChannel((prev) => prev 1);
};
// useEffect(() => {
// setChannel(1);
// });
return (
<div className="App">
<button onClick={parentClick}>parent click</button>
<br />
<br />
<button onClick={handleClick1}>child click1</button>
<button onClick={handleClick2}>child click2</button>
</div>
);
};
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(<App />);
有一個帶有回呼 ( handleclick1) 的子點擊包裝，一個沒有 ( handleclick2)。父母點擊后，兩個孩子都得到正確的 channel狀態值。我的問題是handleclick2：
- 狀態值的變化會
channel觸發函式的重新評估并因此重新渲染整個 UI 嗎？ - 如果 1 的答案是否定的，那么函式如何獲得正確的
channel狀態值？
在此處查看代碼框
uj5u.com熱心網友回復：
通道狀態值的變化是否會觸發功能的重新評估，從而重新渲染整個 UI？
是的，但這不是由于任何原因handleClick2- 這是由于呼叫了狀態設定器。每當呼叫狀態設定器時，組件都會重新渲染——這意味著，在這種情況下，App函式會再次運行。
useCallback在將函式作為道具傳遞給另一個 React 組件時通常很有用，以減少該組件重新計算事物的需要。在像這樣所有事情都在單個組件中完成的情況下，它沒有用處。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/491002.html
標籤：javascript 反应
上一篇：計算成員班級的數量并在網格中顯示