AIGC革命已来,如何在企业场景落地?如何选择模型、怎样应用RAG、需要哪些组织流程配套? 了解详情
写点什么

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

  • 2019-02-19
  • 本文字数:1907 字

    阅读完需:约 6 分钟

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、工程化、性能优化…大前端的下一站在哪里?点击下图了解更多详情。



2019-02-19 07:302803
用户头像

发布了 391 篇内容, 共 125.1 次阅读, 收获喜欢 255 次。

关注

评论

发布
暂无评论
发现更多内容

Yii2.0 RESTful API 之版本控制

Middleware

php RESTful Yii2

Yii2.0 RESTful API 之速率限制

Middleware

php RESTful Yii2

简述 HTTP 缓存相关的首部及其行为

黄耗子皮

缓存 HTTP

钱从哪里来 - 中国家庭的财富方案

石云升

读书笔记 工作 财富 买房 资产配置

Yii2.0 RESTful API 认证教程

Middleware

php RESTful Yii2

将footer固定在底部: Flexbox vs Grid

寇云

CSS css3

如何用五步建设数据中台?

博文视点Broadview

大数据 数据中台 架构 中台

到底谁是你老板

Neco.W

工作 创业心态

JVM最佳学习笔记<一>---Java内存区域与内存溢出异常

Loubobooo

Java JVM

JVM最佳学习笔记<二>---垃圾收集器与内存分配策略

Loubobooo

Java JVM

JVM最佳学习笔记<三>---虚拟机性能监控与故障处理工具

Loubobooo

Java JVM

一周信创舆情观察(5.18~5.24)

统小信uos

基础软件 操作系统

七年老程序员面试经历

代码诗人

最长回文算法(马拉车算法)分析

Gadzan

Java 算法 LeetCode

技术工作的一二三之快餐

拖地先生

项目管理 软件开发 技术管理 软件开发流程

Yii2.0 RESTful API 基础配置教程

Middleware

php RESTful Yii2

ESP8266远程控制+MicroPython 固件初体验

黄耗子皮

物联网 esp8266

Python 沙盒环境配置

黄耗子皮

RocketMQ broker.properties

李绍俊

RocketMQ

DevOps知识点——3C知多少

禅道项目管理

DevOps 测试 持续集成

[JVM] String#intern 面试必会

猴哥一一 cium

Java JVM string pool string Java 25 周年

介绍一下自研开源NLP工具库---MYNLP

陈吉米

自然语言处理 中文分词 mynlp nlp

OAM v1alpha2 新版:平衡标准与可扩展性

孙健波

运维那点事 - jenkins流水线

yann [扬] :曹同学

JVM最佳学习笔记<四>---虚拟机类加载机制

Loubobooo

Java JVM

2020年全球经济萎缩,飞链热交易所逆袭而来闪耀数字经济

极客编

运维与云

yann [扬] :曹同学

JVM最佳学习笔记---总览

Loubobooo

Java JVM

技术工作的一二三之内功

拖地先生

个人成长

技术工作的一二三之价值观方法论

拖地先生

个人成长 方法论

如何成为高手: 到知识的源头去

lmymirror

学习 方法论 高手

TNG-Hooks:有状态逻辑在标准函数中的重用和组合_语言 & 开发_Bruno Couriol_InfoQ精选文章