前端技术双周刊 2023-03-11：Signals 之争

[olivewind]

发布时间：2023.03.11

本周内容：行业资讯x2、文章推荐x2、开源项目x4，活动推荐x2

同步发布：   公众号（依赖注入）、知乎、掘金

---

行业资讯

社区关于细粒度响应式的讨论

在过去几周里，前端社区发起了一股关于细粒度响应式的热烈讨论，该讨论和 10 年前关于双向数据绑定与单向数据流的争论有异曲同工之处，可以朴素理解为是围绕以下两个模式的讨论：

模式一：Hooks

这是 React 在 16.8 为函数组件引入的概念，顾名思义是在函数组件运行过程中运行一堆钩子。因为 React 追求纯粹的 UI = f(state)，当 state 变更时需要重新运行组件函数以实现视图更新，同时为了实现 effect 需要显示声明 dependencies。这类模式带来了糟糕的性能表现，开发者需要组合 useMemo，useCallback 等手段以尽可能消除性能问题。

import { useState, useEffect } from '';
export default () => {
  console.log('render');
  const [number, setNumber] = useState(1);

  useEffect(() => {
    console.log('number changed: ', number);
  }, [number]);

  return <button onClick={() => setNumber(number + 1)}>click me</button>
}

运行结果：

- render
- number change: 1
- render
- number change: 2
- render
- number change: 3

模式二：Signals

这并不是一个新概念，但最近似乎十分流行，使用过 Mobx 的同学对此并不陌生，Signals 基于自动依赖收集可以实现非常细粒度的响应式，这意味着当数据状态发生变化时只会更新依赖它的特定组件、DOM。

以 SolidJS 为例，实现 effect 并不需要显式声明 dependencies：

export default () => {
  console.log('render');
  const [number, setNumber] = createSignal(1);

  createEffect(() => {
    console.log('number changed: ', number());
  });
  
  return <button onClick={() => setNumber(number() + 1)}>{number()}</button>;
}

运行结果：

- render
- number change: 1
- number change: 2
- number change: 3

我们看到对于没有 React 情结的开发者来说，除了明显性能优势外，显然 Signals 带来的整体心智负担会少很多，我想这也是 Signals 被 React 之外的大多数前端框架、库（ Preact、SolidJS、Vue、Mobx...）所采用的主要原因，以下是社区讨论过程中比较关键的几篇文章：

• Were React Hooks a Mistake?

• The Evolution of Signals in JavaScript

• React vs Signals: 10 Years Later

• Introducing Signals

• A Hands-on Introduction to Fine-Grained Reactivity

• Building a Reactive Library from Scratch

字节跳动开源 Rspack

Rspack 是一个基于 Rust 的高性能模块构建工具，该工具具备以下特性：

• 冷启动速度快：基于 Rust，冷启动速度是 Webpack+SWC 的 10 倍；
• 热更新速度块：内置增量编译机制，热更新是 Webpack+SWC 的 3 倍；
• 兼容社区已有生态：尽可能兼容 Webpack 常见 API；
• 内置常见构建能力：对 TS、JSX、CSS Modules、Sass 等提供开箱即用的支持;
• 默认生产优化策略：内置包括 Tree Shaking、代码压缩等在内多种优化策略;
• 无关具体前端框架：不和任何前端框架绑定，保证足够的灵活性。

根据官网提供的信息，该项目下一步的工作计划：

• 性能持续优化
• 兼容社区插件
• 模块联邦支持
• Vue 和 Svelte 支持
• Lazy Compilation 支持
• Persisten Cache 支持

文章推荐

All JavaScript and TypeScript Features of the last 3 years

该文章介绍了过去 3 年 JavaScript / ECMAScript和TypeScript的几乎所有变化。

The Most Popular Node.js Frameworks in 2023

经过多年的稳定统治，Node.js 仍然是最流行的 JavaScript 运行时。但是 Node.js 框架的格局在最近的历史中发生了巨大的变化，越来越多的框架被构建为 Meta Framework，不仅迎合了后端，也迎合了全栈开发人员。本文介绍了当前的趋势，并探讨了最流行的 Node.js 框架。

开源项目

tRPC（22.7k star）

tRPC 是一个为 Node.js 应用程序构建类型安全 API 的框架，可与 Next 无缝集成，该项目在过去两年里迅速崛起，值得重点关注。

zod（19.8k star）

zod 是一个 TypeScript 模式优先的校验库，设计精良。

import { z } from "zod";

const User = z.object({
  username: z.string(),
});

User.parse({ username: "Ludwig" });  // true

// 提取出推断的类型
type User = z.infer<typeof User>;
// { username: string }

highlight.io（2.1k star）

highlight.io 是一个对标 Sentry 的全流程应用监控工具，其主要优势是可以回放页面操作，让你可以了解发生异常时用户做了哪些操作，该重要特性通过 rrweb-io/rrweb) 项目提供支持。

《Rust语言圣经》（14.4k star）

该书完全开源，拥有全面且深入的讲解、生动贴切的示例、德芙般丝滑的内容，甚至还有 JavaScript 程序员关注的 WASM 和 Deno 等专题，这可能是目前最用心的 Rust 中文学习教程。

活动推荐

2023.06.02：React Summit - 全球最大的 React 会议

2023.05.09： Remix Conf 2023