Signals大火!为何众多前端主流框架都要实现它?( 二 ) _Signals

文章前面部分讲过，Signals 实际上是观察者模式的简单实现，当检索一个值时同时订阅了它。当设置一个值时，实际上是发出一个事件。真正的魔力始于 Signlas 和框架之间的接口。为了方便开发人员，创建者应用了一些有争议的技巧，例如：重写 React.createElement 函数。
4.信号比状态好在哪里一旦 useState 返回一个值，库通常不再关心该值的使用。开发人员必须自己决定在何处使用该值，并且必须确保想要订阅该值更改的任何 Effects、Memos 或 Callbacks 都在其依赖列表中提到该值。

文章插图
图片来自：https://www.YouTube.com/watch?v=0t1tJTh0bLs
除此之外，记住该值以避免不必要的重新渲染，这显然对开发者提出了更高的要求。

Signal：是最简单的原语（Primitive），它们包含值，以及 get 和 set 函数，因此我们可以在读取和写入的时候进行拦截
Effects：Effect 是读取 Signal 的封装函数，并且会在依赖的 Signal 值发生变化时重新执行。这对于创建诸如渲染之类副作用很有用。
Memos：Memo 是缓存的派生值，有着 Signal 和 Effect 相同的属性。Memo 跟踪自己的 Signal，仅在这些 Signal 发生变化时重新执行，并且本身是可跟踪的 Signal

比如下面的ParentComponent组件：

function ParentComponent() {const [state, setState] = useState(0);const stateVal = useMemo(() => {return doSomeExpensiveStateCalculation(state);}, [state]);// 显式记忆并确保依赖关系准确useEffect(() => {sendDataToServer(state);}, [state]);// 显式调用状态订阅return (<div><ChildComponent stateVal={stateVal} /></div>);}

createSignal 返回一个 getter 函数，因为信号本质上是反应性的。为了进一步分解，信号跟踪谁对状态的变化感兴趣，如果发生变化，它会通知这些订阅者。
为了获得此订阅者信息，信号会跟踪调用这些状态获取器（本质上是一个函数）的上下文，调用 getter 创建订阅。这非常有用，因为库本身可以自行管理订阅状态更改的订阅者，并在更改后通知他们，而无需开发人员明确调用它。
createEffect(() => {updateDataElswhere(state());});// effect 仅在 `state` 改变时运行 - 自动订阅调用 getter 的上下文（不要与 React Context API 混淆）是库唯一会通知的上下文，这意味着记忆、显式填充大型依赖项数组以及修复不必要的重新渲染都可以有效避免。有助于避免使用大量用于此目的的额外 Hooks，例如 useRef、useCallback、useMemo 和大量重新渲染。
Signal 极大地增强了开发人员的体验，并将重点转移回为 UI 构建组件，而不是花费额外的 10% 的开发人员精力来遵守严格的性能优化语法规则。

function ParentComponent() {const [state, setState] = createSignal(0);const stateVal = doSomeExpensiveStateCalculation(state());// 不需要显式记忆createEffect(() => {sendDataToServer(state());});// 只有在状态改变时才会被触发 - 效果会自动添加为订阅者return (<div><ChildComponent stateVal={stateVal} /></div>);}

5.本文总结一般而言，使用信号和反应式编程似乎存在非常偏见的立场。然而，事实并非如此。
React 是一个高性能、优化的库。尽管在以最佳方式使用状态方面存在一些差距或遗漏，从而导致不必要的重新渲染，但它仍然非常快。在以某种方式使用 React 多年之后，前端开发人员已经习惯于将特定的数据流可视化并重新渲染，用反应式编程思维完全取代它在一定程度上显得跛脚。但是，React 仍然是构建用户界面的优秀选择。
反应式编程，除了性能增强之外，还通过归结为三个主要原语：Signal、Memo 和 Effects，使开发人员的体验更加简单。这有助于开发者更多地关注为 UI 构建组件，而不是担心显式处理性能优化。
目前，Signal 也越来越受欢迎，并且是许多现代 Web 框架的一部分，例如 Solid.js、Preact、Qwik 和 Vue.js 。
因为篇幅有限，文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！
参考资料https://www.velotio.com/engineering-blog/why-signals-could-be-the-future-for-modern-web-frameworks
https://www.solidjs.com/guides/reactivity#how-it-works
https://www.builder.io/blog/usesignal-is-the-future-of-web-frameworks#what-signal-is
https://vived.io/signal-a-new-way-to-manage-Application-state-frontend-weekly-vol-104/
https://cloud.tencent.com/developer/article/1602301