react hook 中的閉包問題

2021-10-01 14:47:57 字數 2370 閱讀 6138

1、在 react 中,當父元件向子元件傳遞乙個函式的時候,那個函式中包含乙個變數,state ,會產生閉包問題

上**:

// 父元件

const uploadtable = (props) => = props;

const deletefile = (file) =>

return (

)}

當子元件 呼叫 父元件 deletefile 函式的時候,會發現 裡面  uploadingfilelist 為空

這種情況下,自然執行不下去了

經過檢查,這裡發生了閉包的現象,也就是說,這裡的 deletefile  函式 uploadingfilelist 發生了閉包

解決1: 自然是 純純地把 uploadingfilelist 通過

deletefile 再傳回來,但是一點逼格都沒有

解決2:上** 重點在於 使用 useref

// 父元件

const uploadtable = (props) => = props;

const uploadingfilelistref = useref('');

uploadingfilelistref.current = uploadingfilelist;

const deletefile = (file) =>

return (

)}

這裡 就圓滿地解決了 這個問題。

畢竟即使是閉包,但是閉包裡面引入的終究是乙個 位址,而這個位址裡面的 資料變化是可以被讀取到的

2、事實上,當使用usecallback也一樣會引起閉包的問題,值得注意

不過usecallback的話,只需要在監聽的陣列裡放入對應的資料即可解決

3、但是當 usestate 中,呼叫 set*** 的時候,可以選擇朝裡面傳乙個函式進去,函式的 引數就是 當前的 state ,這樣可以避免 閉包、非同步等等一系列的問題,如下:

setcurstep(cur => cur + 1);
4、當然,還有一種特殊的方法能避免 很多的閉包問題

import react,  from 'react';

let page = 1; // 將 引數 提到 函式外面來

return (

);}

因為 產生閉包 就其更本,大多數 都是因為

state、props 改變了之後,會導致 當前的函式元件重新 執行

上一次 執行的 **中,使用的就是 執行上下文中 儲存的 之前的 值,而不是 現在 改變之後的結果

所以 使用 useref 也好,將 變數拿到外面也好,都是 讓函式 裡面的變數是同乙個

但是這樣的話,變數的改變不會 讓函式元件 重新執行,

useeffect(() => , 1000);

return () => clearinterval(id);

}, );

因此,類似於上面這樣的**,你會發現 count 只有在 第一次執行之後,就不會再 有任何改變

為什麼?

因為 這裡 useeffect 設定了乙個 空陣列的 依賴,也就是說,這個 useeffect 只會執行一次,接下來這個 函式元件繼續執行的時候, 這裡返回的其實是 第一次執行的結果。

也就是說,這裡 setinterval 也形成了閉包,乙隻包著 第一次執行的結果

useeffect(() => , 1000);

return () => clearinterval(id);

}, );

題外話:

記錄乙個很有意思的 問題

var a = 100;

let b = async () =>

b();

a ++;

console.log('1', a);

// 1 101

// 2 110

這裡其實還因為 運算 過程的問題,先是 計算出了 這個表示式的一半,那就是 100,也就變成了 a = 100 + await 10

然後 計算 非同步呼叫 之後,a = 100 + 10

var tmp = 100

async function test() )

})console.log(2, tmp)

}test()

tmp++

console.log(1, tmp)

// 1 101

// 2 111

JS閉包中的this問題

首先看一段 var obj var c obj.get console.log c 那麼輸出c的值為多少呢?看下圖 這說明obj.get 只是返回乙個匿名函式,並沒有執行。所以轉到this,相應的 為 var name ss var obj var val obj.get console.log v...

Python中的閉包問題

閉包 內層函式引用了外層函式的變數 引數也算變數 然後返回內層函式的情況 閉包的特點 是返回的函式還引用了外層函式的區域性變數,所以,要正確使用閉包,就要確保引用的區域性變數在函式返回後不能變 栗子1 一次返回3個函式,分別計算1x1,2x2,3x3 def count fs for i in ra...

閉包 解決閉包問題

1 函式和對其周圍狀態 lexical environment,詞法環境 的引用 在一起構成閉包 closure 2 函式與函式所依賴的上下文環境組成閉包問題。3 閉包指的是 能夠訪問另乙個函式作用域的變數的函式。清晰的講 閉包就是乙個函式,這個函式能夠訪問其他函式的作用域中的變數。var arr ...