TNG-Hooks：有状态逻辑在标准函数中的重用和组合

最新推荐文章于 2024-08-27 07:47:32 发布

糖糖糖糖糖糖糖糖糖糖糖糖糖糖糖糖糖糖

最新推荐文章于 2024-08-27 07:47:32 发布

阅读量158

点赞数

本文链接：https://blog.csdn.net/cpongo4/article/details/89088866

版权

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(\u0026quot;foo-btn\u0026quot;);var barBtn = document.getElementById(\u0026quot;bar-btn\u0026quot;);// 每个点击句柄都是铰接的`onClick()`。fooBtn.addEventListener(\u0026quot;click\u0026quot;,TNG(onClick),false);barBtn.addEventListener(\u0026quot;click\u0026quot;,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、工程化、性能优化…大前端的下一站在哪里？点击下图了解更多详情。

$\"\"$