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计数：1hit();       // Hit计数：2hit();       // 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

会议推荐

2019 年 6 月，GMTC 全球大前端技术大会 2019 即将到来。小程序、Flutter、移动 AI、工程化、性能优化…大前端的下一站在哪里？点击下图了解更多详情。