TNG-Hooks：有狀態邏輯在標準函數中的重用和組合

TNG-Hooks軟件庫出現之後，JavaScript開發人員可通過有用的、頻繁有狀態的和有效邏輯來裝飾常規獨立函數，例如查詢遠程數據庫、訪問範圍外的上下文數據等。鉤子函數（Hook）有助於代碼重用和組合，可實現規模更小、更易於維護且更穩定的代碼庫。

正文

在去年的React大會，該組織發佈了React Hooks項目，令各開發者社區大爲讚歎。開發人員可使用Reack Hooks，將有狀態或有效計算完全抽象爲函數形式，進而在React函數組件中加以重用和組合。先前的做法是使用ES類而非函數，即用單獨的純計算函數添加效果和狀態。

對經驗不足的開發人員而言，使用函數要比ES類更易於組合代碼。此外，使用ES類需要將有效邏輯位複製到各種各樣的方法中，使代碼散碎。TNG-Hooks在降低對React依賴的同時，有效利用了React Hooks的優點。

爲了最小化React函數組件，TNG引入了一種稱爲“鉸接函數”（Articulated Functions）的概念。鉸接函數應滿足兩個條件。首先，在被調用前，它們需要包裹一個TNG裝飾器（decorator）。其次，鉸接函數可在執行過程中的某處調用鉤子函數。

下面給出例子代碼。其中，TNG函數作爲裝飾器，useState是一個鉤子函數，而hit函數就是一個鉸接函數。

function hit() {
    var [count,updateCount] = useState(0);
    count++;
    updateCount(count);
    console.log(`Hit count: ${count}`);
}

hit = TNG(hit);

hit();       // Hit計數：1
hit();       // Hit計數：2
hit();       // Hit計數：3

在上例中，hit函數被多次調用，每次調用後返回不同的值。由此，我們稱hit函數是一個有狀態函數。鉤子函數useState用於抽象本地狀態管理操作，包括檢索、存儲和狀態更新等。該鉤子函數初始化狀態變量count爲0，並返回該變量值。函數updateCount更新該狀態變量。

TNG-Hooks函數庫還提供了useReducer、useEffect、useMemo、useCallback和useRef等鉤子函數，每個鉤子函數抽象了不同的有狀態計算或有效計算。

此外，TNG軟件庫提供了仿React Custom Hooks的TNG Custom Hooks，用於支持開發人員自定義鉤子函數。使用Custom Hooks，開發人員可通過重用現的有鉤子函數去定義自己的鉤子函數。TNG Custom Hooks並非鉸接函數，而是標準JavaScript函數。鉸接函數會在執行中某處調用鉤子函數，而TNG Custom Hooks必須讓自身也在鉸接函數中調用。

// useHitCounter定義了一個Custom Hook，而不是一個鉸接函數。
function useHitCounter() {
    // 繼承TNG鉤子函數的上下文。
    var [count,updateCount] = useState(0);
    count++;
    updateCount(count);
    return count;
}

// 兩次鉸接到TNG(..)，每次均爲點擊按鈕句柄（handler）。
function onClick(evt) {
    // 使用Custom Hook。
    var hitCount = useHitCounter();
    console.log(console.log(`Button #${evt.target.id}: ${hitCount}`);
}

var fooBtn = document.getElementById("foo-btn");
var barBtn = document.getElementById("bar-btn");

// 每個點擊句柄都是鉸接的`onClick()`。
fooBtn.addEventListener("click",TNG(onClick),false);
barBtn.addEventListener("click",TNG(onClick),false);

上例展示的Custom Hook函數useHitCounter並非鉸接函數，它重用了給定的鉤子函數useState。useHitCounter本身被onClick調用，而onClick是一個鉸接函數。fooBtn和barBtn分別重用了同一自定義的有狀態邏輯useHitCounter，該邏輯嵌在onClick事件句柄中。

TNG Hooks雖然參考了React項目，但它是一個全新的項目。TNG-Hooks軟件庫的作者Kyle Simpson給出瞭如下闡述：

TNG Hooks具有自身考慮和特定行爲，它是一個獨立項目。未來，TNG將繼續保持與React Hooks的相似風格，但也會保持適當差異。

與React Hooks一樣，鉸接函數和鉤子函數必須遵守一些調用規則。當前，並沒有任何強制執行上述規則的機制，開發人員在違反規則時也不會給出警告，這可能會導致一些出錯行爲難以調試。此外，React Hooks是一種全新的實驗性技術，還沒決定哪些該做哪些不做。儘管TNG Hooks考慮到了React Hooks的一些經驗教訓，但還需要做更多測試以驗證其最佳實踐和存在的陷阱。

TNG Hooks支持通過tng-hooks npm package安裝，據該軟件包宣稱，其測試代碼覆蓋率達100％。TNG Hooks以MIT許可開源發佈，開發者可通過TNG-Hooks的GitHub項目頁面給出反饋和貢獻。

查看英文原文： TNG-Hooks: Reuse and Compose Stateful, Effectful Logic within Regular Functions