編輯
好吧,我的錯,我想答案很簡單。這是一個javascript問題。我沒有將函式傳遞給 useState,但實際上我每次都在重新執行它。所以是的,我看到的是正常的。
無論如何,我都會在這里提出我的問題。
下面是一個代碼沙盒示例。
問題 :
有人可以向我解釋為什么 React 在 useState(或 useRef)中重新執行內部函式,盡管回傳的值將被完全忽略(第一次執行除外)?這是 useState 的預期行為嗎?
解釋 :
我的意思是為什么每次重新渲染后我都會在這里看到這個控制臺日志
const [count, setCount] = React.useState((function(){
console.log('Executed !');
return 5;
})())
我曾經認為這個內部函式(或值)相當于類引數或組件建構式,但顯然不是這樣。
回傳一個簡單的值當然可以完成作業:React.useState(5)。
但是想象一下,使用在某個時候處理靜態值的第三方類,或者您只是不想在每次重新渲染后一遍又一遍地重新執行它?
一個可能的解決方法是使用useEffect空依賴項。(相當于componentDidMount)
但我問的是這次執行的目的是什么?
let count = 0; // Number of component renders
const Test = (props) => {
const [innerCount, setCount] = React.useState((function(){})(
console.log('Executed !'); // Executed after each re-render
count = count 1;
return count;
));
return innerCount; // Will be always 1 !
}
如果回傳值總是 1 = 第一個回傳值,為什么匿名函式會被執行?!這次執行的目的是什么?
這是 CodeSandbox 上的一個例子
uj5u.com熱心網友回復:
這不是 React 特定的行為,這正是 Javascript —— 以及幾乎所有主流編程語言 —— 所做的。
在呼叫函式之前,它必須評估它的引數,以便知道要傳入什么。
是的,碰巧這React.useState是一個經常“忽略”其引數的函式。(我不熟悉它的具體實作方式——顯然它并不像它那么簡單,因為它確實需要知道它何時第一次在該特定組件實體中執行,因為在這種情況下使用該值并且回傳。)但瀏覽器 Javascript 引擎不可能知道或優化它。
為了證明這與 React 無關,我可以這樣做:
function ignoresArgument(x) {
return 1;
}
for (let i = 0; i < 20; i ) {
ignoresArgument(
(function(y) {
console.log("I don't need to be executed, but Javascript doesn't know that so I will be executed 20 times");
return 2;
})(1)
);
}
uj5u.com熱心網友回復:
除了所有其他答案之外,我認為此鏈接解決了您只想useState一次呼叫該函式的問題。
您可以在沙箱中更改此行:
const [dependency] = React.useState(() => new ThirdParty());
并且第三方計數器將停止遞增。
uj5u.com熱心網友回復:
我覺得你的理解useEffect有點不對。它不僅用于componentDidMount. 您所描述的是一種副作用的癥狀,即案例狀態在組件中發生變化。這里是useEffect來自官方檔案的解釋。
如果您熟悉 React 類的生命周期方法,您可以將 useEffect Hook 視為 componentDidMount、componentDidUpdate 和 componentWillUnmount 的組合。
useEffect 如果您想避免不需要的重新渲染,這將是這種情況的理想選擇。
memo您的解決方案也可能不需要React 。
轉載請註明出處,本文鏈接:https://www.uj5u.com/ruanti/398172.html
標籤:javascript 反应
