前端周刊 | Mac端新版Chrome速度超Safari; React 18 RC 发布; Chrome 100 Beta 发布

新的一周，快来看看上周发生了哪些新鲜事吧！

本文首发于微信公众号：前端充电宝

欢迎添加我的微信：CUG-GZ

科技趣闻

1. ECMAScript 新提案：类型作为注释

3月10日，TypeScript 在社交平台发文称，如果可以直接在 JavaScript 中支持类型，会怎么样？我们正在探索将可选类型语法引入 JavaScript 语言！

他们表示：“类型作为注释”提案意味着浏览器可以直接运行经过 TS 检查的代码(即使它们没有做任何类型检查）。这意味着更好的编辑体验和更快的迭代。希望这个提议可以让各种规模的 TypeScript 和 JavaScript 用户更容易编码。

这是一个新的 stage0 的语法提案，该提案暂时还未提交给 TC39。

提案地址： github.com/giltayar/pr…

2. Mac端新版Chrome速度超Safari

3月8日消息，谷歌Chrome团队在Chromium博客上发文称，最新版本的Chrome M99在苹果的Speedometer网络基准测试中创造了300分的最高记录。

在Mac上比Safari浏览器速度还要快7%，自2020年底在基于M1的Mac上推出Chrome以来， Chrome比17个月前快了43%。 Speedometer是苹果WebKit团队开发的网页响应测试工具，模拟用户与网页之间的各种交互。由于是苹果WebKit出品的测试工具，很大程度上Safari的跑分肯定会领先，因此Chrome这次超越具有里程碑意义。

谷歌团队称， V8 Sparkplug编译器和简短的内置调用是最近Chrome速度提升的两个主要原因。 Sparkplug可生成高效代码且编译开销低，V8 JavaScript引擎通过在调用函数时避免间接跳转来提高性能。

Chrome 99版将是最后一个两位数的版本，Chrome 100版在开发版通道已经推出，月底就要正式版了。

详情：blog.chromium.org/2022/03/a-n…

更新速递

1. React 18 RC 正式发布

3月8日，React 18 作为候选版本 (RC) 正式发布。React 18 的完整生产版本的发布似乎已经迫在眉睫。React官方发布博客，详细说明了如何升级到 React 18 候选版本。

详情：zh-hans.reactjs.org/blog/2022/0…

2. Node.js v17.7.0 正式发布

3月9日，Node.js v17.7.0 版本正式发布，主要更新如下：

添加 KeyObject.prototype.equals 方法；
添加新选项到net.Socket和 net.Server中；
添加 Bryan English；
允许在env中初始化Inspector；
将 npm 升级到 8.5.2；
将 nghttp2 更新到 1.47.0。

更新详情：nodejs.org/en/blog/rel…

3. Chrome 100 Beta 正式发布

3 月 6 日，谷歌浏览器和火狐浏览器都即将发布 100 版本，现在 Chrome 100 已经到达 Beta 通道。该版本附带两个新 API ，包括多屏幕窗口放置 API 和数字商品 API，还包含一些功能更新。Chrome 100 正式版预计在 3 月底正式发布。

除此之外，Chrome 100 还将拥有新的图标、移动版 Chrome 100 将取消节省流量的精简模式、安卓版 Chrome 100 引入了一次性关闭所有标签的可选确认对话框、在顶部任务栏提供下载信息图标等。

详情：developer.chrome.com/blog/new-in…

开源趋势

下面来看看本周GitHub上有哪些热门的前端项目吧。

1. type-challenges

type-challenges 是一个 TypeScript 类型体操姿势合集。本项目意在于让你更好的了解 TS 的类型系统，编写你自己的类型工具，或者只是单纯的享受挑战的乐趣！同时希望可以建立一个社区，在这里你可以提出你在实际环境中遇到的问题，或者帮助他人解答疑惑 - 这些问题也可能被选中成为题库的一部分！

Star⭐： 14.1 k

本周Star⭐️： 683

Github：github.com/type-challe…

2. discord.js

discord.js 是一个强大的Node.js模块，它允许您轻松地与 Discord API进行交互。

discord.js 的特点如下：

面向对象；
可预测的抽象；
高性能；
100% 覆盖 Discord API。

Star⭐： 18.3 k

本周Star⭐️： 731

Github：github.com/discordjs/d…

3. react-query

react-query 是一个用于在 React 中获取、缓存和更新异步数据的钩子。 React Query 的特点：

从应用程序中删除许多复杂且被误解的代码，并用几行 React Query 逻辑替换；
使应用程序更易于维护，更容易构建新功能，而无需担心连接新的服务器状态数据源；
通过让应用程序感觉比以往更快、响应更快，对用户产生直接影响；
节省带宽并提高内存性能。

Star⭐： 26.1 k

本周Star⭐️： 358

Github：github.com/tannerlinsl…

4. remotion

Remotion 是一套库，为使用 React 以编程方式创建视频奠定了基础。

为什么要在 React 中创建视频？

利用web技术：使用所有 CSS、Canvas、SVG、WebGL 等；
利用编程：使用变量、函数、API、数学和算法来创造新的效果；
利用 React：可重用组件、强大的组合、快速刷新、包生态系统。

Star⭐： 11.9 k

本周Star⭐️： 1110

Github：github.com/remotion-de…

5. MarkText

MarkText 是一个简单优雅的开源 Markdown 编辑器，专注于速度和可用性。

MarkText具有以下特性：

实时预览（所见即所得）和简洁明了的界面，使您获得无干扰的写作体验。
支持 CommonMark 规范和 GitHub Flavored Markdown 规范。
Markdown扩展，例如数学表达式（KaTeX）、front matter 和 emoji。
支持段落和内联样式快捷方式，以提高您的写作效率。
输出 HTML 和 PDF 文件。
各种主题：Cadmium Light、Material Dark 等等。
各种编辑模式：源代码模式、打字机模式、专注模式。
直接从剪贴板中粘贴图片。

Star⭐： 30.1 k

本周Star⭐️： 412

Github：github.com/marktext/ma…

工具推荐

下面来推荐六个用于 React 的数据可视化库。

1. Victory

Victory 是一个用于构建交互式数据可视化的可组合 React 组件的集合。这是在React应用程序中实现图形和图表的绝佳选择，它包含诸如画笔和缩放等很棒的功能。

GitHub：github.com/FormidableL…

2. kepler.gl

Kepler.gl 是一个与数据无关的高性能基于 Web 的应用程序，用于对大规模地理定位数据集进行可视化探索。它也是一个使用Redux管理其状态和数据流的 React 组件。它可以嵌入到其他 React-Redux 应用程序中并且是高度可定制的。

GitHub：github.com/keplergl/ke…

3. fusioncharts

FusionCharts 是一个 JavaScript 图表库，为 Web 和移动应用程序提供 100 多个图表和 2,000 多个地图。所有的可视化都是交互式的和动画的，它们以 SVG 和 VML 呈现（对于 IE 6/7/8）。该软件包还包含 FusionTime（时间序列图表）、FusionWidgets（仪表、实时图表）、PowerCharts（统计和高级图表）和 FusionMaps（等值线地理地图）。