在 React 中，閉包陷阱是一個(gè)常見(jiàn)的問(wèn)題，尤其是在處理異步操作、事件處理器、或是定時(shí)器時(shí)。理解閉包的工作原理以及它在 React 中如何與狀態(tài)和渲染交互，可以幫助你避免陷入一些常見(jiàn)的錯(cuò)誤。

一、閉包陷阱的產(chǎn)生

1、什么是閉包陷阱？

閉包（Closure）是 JavaScript 中一個(gè)重要的概念，它允許函數(shù)訪問(wèn)其外部函數(shù)作用域中的變量，即使外部函數(shù)已經(jīng)執(zhí)行完畢。在 React 中，這意味著事件處理函數(shù)、定時(shí)器回調(diào)、或者異步操作可能會(huì)“捕獲”某些狀態(tài)的值，而這些狀態(tài)可能會(huì)在它們被執(zhí)行時(shí)發(fā)生變化，導(dǎo)致一些難以察覺(jué)的錯(cuò)誤。

2、問(wèn)題的出現(xiàn)

在 React 中，組件的狀態(tài)通常是異步更新的。如果你在一個(gè)事件或定時(shí)器中使用了狀態(tài)值，并且這些狀態(tài)值發(fā)生變化時(shí)，你可能會(huì)遇到閉包陷阱問(wèn)題。具體來(lái)說(shuō)，回調(diào)函數(shù)在定義時(shí)會(huì)“捕獲”狀態(tài)的值，而不是在執(zhí)行時(shí)獲取最新的狀態(tài)。

3、示例：閉包陷阱示例

假設(shè)你有一個(gè)計(jì)數(shù)器，當(dāng)你點(diǎn)擊按鈕時(shí)，計(jì)數(shù)器會(huì)增加 1。

export default function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setTimeout(() => {
      setCount(count + 1); // 閉包陷阱
      console.log('count的值', count);
    }, 1000);
  };

  return (
    <div>
      <h1 className="title">閉包陷阱</h1>
      <p>視圖中的Count: {count}</p>
      <button onClick={handleClick}>增加</button>
    </div>
  );
}

點(diǎn)擊增加后：

視圖中的count變化了，然而值沒(méi)有變化： 

為什么視圖仍然正常？

1. React 狀態(tài)更新機(jī)制：

React 是基于虛擬 DOM 的，useState 和 setState 是異步更新的。React 會(huì)批量更新?tīng)顟B(tài)，保證組件在渲染時(shí)使用的是最新的狀態(tài)值。

具體來(lái)說(shuō)，React 內(nèi)部會(huì)在狀態(tài)更新后重新渲染組件，而在渲染時(shí)會(huì)使用 最新的狀態(tài)值。即使你在回調(diào)函數(shù)中捕獲到了一個(gè)舊的狀態(tài)值，React 會(huì)在下一次渲染時(shí)使用該更新后的 count 值。每次調(diào)用 setCount(count + 1) 都會(huì)觸發(fā)組件重新渲染，而渲染時(shí) React 會(huì)重新獲取最新的狀態(tài)。

2. 事件處理和異步更新：

由于 setTimeout 是異步執(zhí)行的，count 變量會(huì)在 handleClick 定義時(shí)被捕獲，但這個(gè)值并不會(huì)直接影響渲染。React 會(huì)在狀態(tài)更新后重新渲染組件，而這種重新渲染會(huì)讓視圖顯示最新的狀態(tài)。

因此，當(dāng)你點(diǎn)擊按鈕時(shí)，React 會(huì)渲染新的組件，并且 在渲染時(shí)，你會(huì)看到更新后的 count 值。

二、閉包陷阱的解決

1. 使用 useRef 保持最新的狀態(tài)值

useRef 可以用來(lái)保持一個(gè)“可變的引用”，它不會(huì)觸發(fā)組件重新渲染，并且它的值是持久化的。我們可以使用 useRef 來(lái)保存最新的狀態(tài)值，然后在回調(diào)中引用它，而不是直接在閉包中捕獲。

• useRef 返回的對(duì)象（通常是 ref）有一個(gè) current 屬性，用來(lái)保存數(shù)據(jù)。這個(gè) current 屬性可以在組件的整個(gè)生命周期內(nèi)保持不變，且可以跨渲染周期訪問(wèn)。
• 當(dāng)你修改 ref.current 時(shí)，React 并不會(huì)重新渲染組件。這意味著 ref.current 的值改變并不會(huì)引發(fā) React 重新計(jì)算虛擬 DOM 和實(shí)際 DOM 的差異，也不會(huì)觸發(fā)組件的更新過(guò)程。

import React, { useState, useRef, useEffect } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);

  // 在每次 count 更新時(shí)同步 countRef
  useEffect(() => {
    countRef.current = count;
    console.log(countRef.current); // 輸出最新的 countRef
  }, [count]);

  const handleClick = () => {
    setTimeout(() => {
      setCount(countRef.current + 1); // 使用最新的 countRef
    }, 1000);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>增加</button>
    </div>
  );
}

2. 使用 useCallback 緩存回調(diào)函數(shù)

如果你在某個(gè)回調(diào)函數(shù)中依賴于狀態(tài)或 props，可以考慮使用 useCallback 來(lái)緩存該回調(diào)函數(shù)，從而避免每次組件重新渲染時(shí)重新定義該函數(shù)，尤其是在異步操作或事件處理器中。

• 緩存函數(shù)：使用 useCallback 后，handleClick 只會(huì)在 count 發(fā)生變化時(shí)才會(huì)重新創(chuàng)建。如果 count 沒(méi)有變化，React 會(huì)返回之前緩存的函數(shù)實(shí)例，而不會(huì)重新創(chuàng)建函數(shù)。

• 避免子組件不必要的重新渲染：由于 Child 組件接收到的 onClick 函數(shù)實(shí)例不會(huì)隨著每次父組件的渲染而改變，因此 Child 組件不會(huì)因?yàn)楹瘮?shù)實(shí)例的變化而重新渲染。

import React, { useState, useCallback } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setTimeout(() => {
      setCount(prevCount => {
        console.log('當(dāng)前 count:', prevCount); // 打印的是更新前的 count
        return prevCount + 1; // 使用函數(shù)式更新來(lái)確保更新的是最新的 count 值
      });

    }, 1000);
  }, []); // 空依賴數(shù)組表示該函數(shù)只在組件掛載時(shí)創(chuàng)建

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>增加</button>
    </div>
  );
}

到此這篇關(guān)于React閉包陷阱產(chǎn)生和解決小結(jié)的文章就介紹到這了,更多相關(guān)React閉包陷阱內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論