動態推導及其殺死useEffect的方法

標題有點“點擊誘餌”，但想法並沒有錯。

我並不認為 useEffect 是個不好的 hook，其實恰恰相反。但在作為派生機的 React 中，使用 useEffect 進行狀態同步並不是最好的選擇，核心團隊也不推薦。

但等等，如果我有需要同步狀態的狀況？

是的，這是非常罕見的情況，也許有更好的解決方案選項，但想像一下我們在應用程式中有一個帖子，並且當用戶單擊“喜歡”按鈕時，我們希望有一個本地狀態來處理樂觀更新，但它與外部狀態（來自後端）同步，以真正了解是否發生了類似情況。

可變的派生

在這種情況下，我們需要一個可以同時進行狀態和推導的原語。從概念上講，我們可以將其視為可變推導。 Ryan Carniato 有一篇關於它的很好的部落格文章，但是存在一些與 React 管理反應性的方式相關的限制，但是這個新的原語將是推導和狀態：
派生作為預設行為，取得最後更新的事實來源（來自伺服器的資料道具）。
說明使用者何時點選「喜歡」按鈕。此變更是臨時的，將在下一次依賴項變更時被覆蓋。

當然，我們在 React 上沒有它，但我們可以想像這樣的原語。它的優點：

• 它從 useEffect 中又刪除了一個用例。
• 它清楚地表明我們有一個可以作為狀態處理的推導。

使用MemoState

const [internalState, setInternalState] = useMemoState(() => data, [data]);

鉤子像普通的useMemo一樣接受兩個參數，第一個參數是memo函數，通常在第一次執行，傳回值將是狀態。第二個參數是眾所周知的依賴項數組，用於追蹤值並在必要時重新計算備忘錄。它傳回一個包含兩個值的元組，即狀態/備忘錄值和臨時更改狀態的設定器。

使用鉤子就像這個例子：

function MemoState ({ data }: { data: State}) {
  const [internalState, setInternalState] = useMemoState(() => data, [data]);

  return (
    

      
name: {internalState?.title}
      
{internalState?.like ? "liked post" : "not liked post"}
       {
        // likePost();
        setInternalState(state => ({
          ...state,
          like: !state.like
        }))
      }}>Like Button
    
  )
}

透過這種方式，您可以消除這裡對 useEffect 的需求，確切地知道這個鉤子正在做什麼和能夠做什麼，並填補這個概念空白，我們的問題同時需要一個狀態和一個派生。諷刺的是，它因此消除了對效果的需要。

我們如何在 React 中做類似的事情？

為了遵循 React 規則並保持鉤子安全，我們需要使用 useEffect 在今天的 React 中創建類似的東西。我不認為將來會做出這樣的鉤子，但誰知道呢，對吧？

為了避免在這裡使用 useEffect，我們需要使用一些外部程式碼（例如迷你狀態函式庫）來處理它，或者如果我們想保留嚴格的 React 原語，則使用 useRef 來保持值的同步。

這種方法的問題在於它違反了 React 規則，而且文件不建議這樣做。因為它在沒有效果的情況下工作的唯一方法是在元件渲染期間同步引用，一點也不安全。

因此，為了保持簡單和安全，hook 的例子如下：

const [internalState, setInternalState] = useMemoState(() => data, [data]);

以上是動態推導及其殺死useEffect的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！