听说Signals快要登陆React了？
“Signals”专门用于管理客户端状况，而且从最近的趋势来看，其很有可能在 React 中施展作用。
“Signals”专门用于管理客户端状况，而且从最近的趋势来看，其很有可能在 React 中施展作用。
就在上周，Dashi Kato（Waku 的缔造者）宣布了 use-signals，一个面向 TC39 signals 的试验性 React hook，旨在演示 Signals 如何在 React 中施展作用。
Signals 已然阅历约 10 年的发展周期，先后得到 Angular、Vue、SolidJS、Qwik 以及 Preact 等众多 JavaScript 框架的采用，用于管理客户端状况。Signals 属于能主动跟踪其应用地位的变量。一旦 Signal 产生变革，其值就会失效，进而触发 UI 状况更新 / 重新渲染。
举例来说，这是一个名为 counter 的 Signal，其值为 0。
const counter = new Signal.State(0);
须要明白的是，Signals 与 React 的 useState 有着实质差别。useState 是 React 供给的 hook，用于管理功效组件内的状况，并许可开发者声明状况变量并更新该变量的函数。
Signals 则是事件的侦听器或者视察器，用于处置异步事件或是超越组件直接掌握之外的数据变革。因此，大家会看到 Signal 声明中并没有定义“setter”函数。但配合 React 之后，情形将大为不同。下面来看之前的 Signal 如何在 React 中进行声明：
const [counter, setCounter] = useState(0);
Signals 的概念之所以非常有趣，就是因为 React 那“自上而下”的模型意味着每当有状况值产生变更时，组件树的所有后代都会重新渲染并对 UI 履行相应变革，从而保证 DOM/UI 与运用程序的状况同步。
而在应用 Signals 管理状况之后，开发者能够以更细粒度方法掌握对 UI 中的哪些部分进行“重新渲染”。但不要误解，这并不是说 Signals 比 React 办法的性能更高，只是二者的功效定位有所不同。
如上所示，我们可以应用 new 结构函数来声明一个 Signal，例如：
const counter = new Signal.State(0);
之后，要“get”一个 Signal 的值，我们可以应用.get() 办法；而要“set”或者更新一个 Signal，我们可以应用.set() 办法。例如：
counter.get();counter.set(10);
跟之前提到的 Signals 应用办法不同，它在 React 中另有起效方法。绕过 React 的 diffing 无疑有违 React 声明式编程这一核心原则，因此 React 中的 Signals 仍将应用 VDOM，而且同样会像变革 useState 那样触发重新渲染。
那么在 React 中应用 Signals 还有何意义？其实我的第一反响也是如此，但请大家先别急，让我们一同摸索 Signals 的深奥世界。
如果 TC39 提案获得通过，则意味着 Signals 将在 JavaScript 中原生可用，届时我们将可以在框架之外应用 Signals。更主要的是，框架作者们理论上也能够以尺度化方法实现 Signals。换言之，Signals 机制的任何改良都将令所有采取尺度化办法的框架受益。而目前，大部分应用 Signals 的框架所采取的处置方法都各有细微差别。
4 月 11 日，Rob Eisenberg 宣布 TC39 提案已经进入第一阶段。这意味着该提案已被纳入 ECMAScript 的考量规模。虽然还有很多工作要做，但这项提案似乎正朝着准确的方向稳步迈进。
TC39 提案还强调了环绕不同框架特定请求的方法开发 API 的主要性。use-signals 的意义也正在于此，它在应用建议 Signals API 的同时，也仍然遵守 React 的核心设计原则。
无论 React 团队最终是否会采用 Signals，use-signals 的涌现都在必定水平上表明 Signals 确切能够在 React 中施展作用。
Signals 目前仅支撑原语，但也有其他 signal-utils 提案正在推动当中，尽力将对象和数组引入其中。例如：
import { SignalObject } from 'signal-utils/object';let obj = new SignalObject({isLoading: true,error: null,result: null,});
import { SignalArray } from 'signal-utils/array';let arr = new SignalArray([1, 2, 3]);
聊了这么多，下面我们一起来看在 React 中具体如何应用 Signals。这里展现的 React 代码在 Waku 高低文中运行，默认在服务器端进行渲染，但其也能支撑纯客户端组件的“use client”指令。
与 useState 不同的是，对 Signals 来说，新的 Signals 声明是在组件外部实现的。在以下代码片断当中，也就是名为 counter 的 const，其用于存储初始值并可以被传递至 useSignal hook。
该 count const 公开了.set() 与.get() 办法，这些办法可以在事件处置函数 handleInc 当中应用。
Signal 值的变革将触发 DOM 更新，并在 UI 中显示新的 count 值。
尤其有趣的一点是，在返回的 Jsx 当中，我们不再须要应用.get() 来拜访并显示 HTML <div/> 元素中的值。相反，现在可以直接拜访 count 值。这与 Qwik 的实现略有不同，后者须要我们从 counter 处拜访值，例如 counter.value。
'use client';import { Signal, useSignal } from 'use-signals';const counter = new Signal.State(0);const UseSignalComponent = () => {const count = useSignal(counter);const handleInc = () => counter.set(counter.get() + 1);return (<><div>useSignal count: {count}</div><button type='button' onClick={handleInc}>Update count</button></>);};export default UseSignalComponent;
为了直观比拟，以下代码的业务逻辑不变、只是用 React 的 useState hook 进行编写。可以看到，二者之间几乎没有差别。
'use client';import { useState } from 'react';const UseStateComponent = () => {const [count, setCount] = useState(0);const handleInc = () => setCount(count + 1);return (<><div>useState count: {count}</div><button type='button' onClick={handleInc}>Update count</button></>);};export default UseStateComponent;
总结来讲，在 React 中实现 Signals 完整具备可行性。虽然 Signals 可能须要一段时光能力在 JavaScript 中获得原生身份，但我个人高度赞美其蓬勃发展的技巧社区对于全新开发方法的摸索。感兴致的朋友不妨连续关注 GitHub repo：++dai-shi/use-signals++。
