在React的功能組件中處理陳舊的道具和狀態

JavaScript封閉通常會引起頭痛，尤其是在反應中，導致了陳舊的道具和狀態。當異步代碼引用過時的prop或狀態值導致UI更新時，就會發生這種情況。

了解陳舊的道具和國家

當異步操作使用對不再當前的道具或狀態的引用時，就會出現陳舊的道具/狀態。返回的值不是最新值。讓我們以一個常見的例子說明：

功能counter（）{
  const [count，setCount] = usestate（0）;

  函數handlealertClick（）{
    settimeout（（）=> {
      警報（“您單擊：”計數）;
    }，3000）;
  }

  返回 （
    <div>
      <p>單擊{count}時間</p>
      <button onclick="{()"> setCount（計數1）}>單擊我</button>
      <button onclick="{handleAlertClick}">顯示警報</button>
    </div>
  ）；
}

（現場演示）

觀察此行為：

1. 單擊“點擊我” - 計數器增加。
2. 單擊“顯示警報” - 3秒鐘後，警報在“顯示警報”時顯示計數，而不是當前計數。
3. 再次單擊“顯示警報”，然後在警報之前迅速單擊“單擊我”。警報顯示了一個過時的計數。

這證明了封閉行為： setTimeout在定義時捕獲了對count的參考，而不是在執行時。

用裁判解決陳舊的參考

React建議使用REFS訪問異步回調中的最新狀態。裁判跨渲染提供了一個持久的對象。

“骯髒”裁判方法

我們可以使用useRef()創建一個REF，與狀態並在同步函數中使用它：

功能counter（）{
  const [count，setCount] = usestate（0）;
  const ref = useref（count）;

  函數handlealertClick（）{
    settimeout（（）=> {
      警報（“您單擊：” ref.current）;
    }，3000）;
  }

  返回 （
    <div>
      <p>單擊{count}時間</p>
      <button onclick="{()"> {
        setCount（計數1）;
        ref.Current =計數1;
      }}>單擊我</button>
      <button onclick="{handleAlertClick}">顯示警報</button>
    </div>
  ）；
}

（現場演示）

這是因為裁判保持一致，這與狀態變量的參考不同。

清潔裁判方法

手動更新各處的裁判很麻煩。更可擴展的方法涉及輔助功能：

功能counter（）{
  const [count，setCount] = usestate（0）;
  const ref = useref（count）;

  功能UpdateState（NewState）{
    ref.current = newstate;
    SetCount（Newstate）;
  }

  函數handlealertClick（）{...}

  返回 （
    <div>
      <p>單擊{count}時間</p>
      <button onclick="{()"> UpdateState（計數1）}>單擊我</button>
      <button onclick="{handleAlertClick}">顯示警報</button>
    </div>
  ）；
}

（現場演示）

可重複使用的自定義掛鉤

為了增強可重複性，請創建一個自定義鉤子：

函數useasyncreference（value）{
  const ref = useref（value）;
  const [，forceRender] = usestate（false）; //力重新渲染

  功能UpdateState（NewState）{
    ref.current = newstate;
    前面的人（s =>！s）;
  }

  返回[參考，UpdateState];
}

功能counter（）{
  const [count，setCount] = useasyncreference（0）;
  // ...其餘的計數器組件
}

此掛鉤管理REF並提供updateState功能。 forceRender確保UI更新。

處理道具

為了支持道具，請在鉤子上添加一個標誌：

函數useasyncreference（value，isprop = false）{
  const ref = useref（value）;
  const [，forceRender] = usestate（false）;

  功能UpdateState（NewState）{
    if（！object.is（ref.Current，newstate））{//優化重新租賃
      ref.current = newstate;
      前面的人（s =>！s）;
    }
  }

  如果（ISProp）返回參考；
  返回[參考，UpdateState];
}

現在，鉤子可以有效地處理狀態和道具。在使用道具時，請記住將true作為第二個參數。

這種全面的方法解決了反應功能組件中的陳舊參考，提供了可重複使用的解決方案。

以上是在React的功能組件中處理陳舊的道具和狀態的詳細內容。更多資訊請關注PHP中文網其他相關文章！