反應 function 組件內部的事件處理程序執行

Question

當我們為 function 組件設置事件處理程序時，它如何訪問 function 組件局部變量？ 因為在渲染組件時創建了局部變量，當它返回 JSX 代碼時，局部變量被刪除了。 那么當 c 不應該存在時，此代碼中的事件處理程序如何在控制台中記錄 c 呢？ clickHandler function 在組件渲染后調用。

function Sample() {
    let c = 0;
    const clickHandler = () => {
        console.log(c);
    }
    return <h2 onClick={clickHandler}>'Hello'</h2>
}
    export default Sample;

Answer 1

clickHandler如何訪問局部變量（ c ）就是所謂的閉包。

閉包讓 function 訪問其詞法 scope 中的變量（寫在哪里），即使它作為參數傳遞到別處也是如此。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures