React Hook 重構可重用函數和效果的最合適方法

Question

讓我們考慮兩個鈎子組件：

export function HookCompA({a,b,c,d}){
  ...
  useEffect(...,[x])

  useEffect(...,[y])

  functionA{...};
  functionB{...};
  functionC{...};
  functionD{...};
...
}

export function HookCompB({a,b,c,e}){
  ...
  useEffect(...,[x])

  useEffect(...,[w])

  functionA{...};
  functionB{...};
  functionC{...};
  functionE{...};
  ...
}

盡管如此相似，但由於上下文的性質，我們必須將這些鈎子視為不同的組件，然而，有很多重復的代碼需要重構，它們甚至為了某些效果共享相同的代碼。

由於我對 OOP 的經驗，很難想象如何在不回調 inheritance 的情況下解決此問題，這不是 hooks 的全部意義所在。 我也不認為只是將函數導出到另一個文件中並將它們添加到兩個鈎子中是最好的主意。

我想知道在鈎子中重用代碼的最佳實踐，特別是對於效果。

Answer 1

我想知道在鈎子中重用代碼的最佳實踐，特別是對於效果。

這是一個相當主觀/自以為是的問題，所以我會嘗試客觀地回答。

React 鈎子只是普通的舊 Javascript 函數，在調用方式和位置方面應用了一些特殊規則。

盡管如此相似，但由於上下文的性質，我們必須將這些鈎子視為不同的組件，然而，有很多重復的代碼需要重構，它們甚至為了某些效果共享相同的代碼。

React 鈎子在設計時考慮了可組合性/可重用性代碼。

動機

使用 Hooks，您可以從組件中提取有狀態邏輯，以便對其進行獨立測試和重用。 Hooks 允許您在不更改組件層次結構的情況下重用有狀態邏輯。 這使得在許多組件之間或與社區共享 Hook 變得容易。

這意味着正如您所描述的那樣，將“通用”功能集中在一個src/utils目錄中，它們可以在其中單獨測試並證明可以工作，並導出以組合到其他單元中，例如自定義 React 鈎子。 甚至useEffect和其他基本 React 鈎子中使用的函數也可以集中/組織。

import {
  functionA,
  functionB,
  functionC,
  functionD,
  functionE,
  functionF,
  functionG,
  functionH,
} from '../utils';

export useBaseHook = (a,b,c) => {
  useEffect(() => {
    functionG(a, b);
    functionH(c);
  }, [a, b, c]);
};

export function useHookCompA({ a, b, c, d }) {
  ...
  useEffect(...,[x]);
  useEffect(...,[y]);

  useBaseHook(d, c, a);

  functionA{...};
  functionB{...};
  functionC{...};
  functionD{...};
  ...
}

export function useHookCompB({ a, b, c, e }) {
  ...
  useEffect(...,[x]);
  useEffect(...,[w]);

  functionA{...};
  functionB{...};
  functionC{...};
  functionE{...};
  ...
}