前端食堂技术周刊第 52 期：Babel 7.19.0、Fresh 1.1、React Native 0.70、新的 Web 性能指标 INP

美味值：🌟🌟🌟🌟🌟

口味：西瓜挖球冰

• 食堂技术周刊仓库地址：https://github.com/Geekhyt/weekly

本期摘要

• Babel 7.19.0
• Fresh 1.1
• React Native 0.70
• Node.js 工作原理解析
• JSON Crack
• 新的 Web 性能指标 INP
• React 为什么重新渲染
• JavaScript 历史的时间轴

大家好，我是童欧巴。欢迎来到本期的前端食堂技术周刊，我们先来看下上周的技术资讯。

技术资讯

1.Babel 7.19.0

该版本包括对如下内容的实现：

• decorators proposal 5 年了，终于要定下来了，不过功能砍了很多；
• Duplicate named capturing groups 正则支持重复命名捕获。

2.Fresh 1.1

Fresh 1.1 近期发布，更新了好多特性：

• 默认支持 JSX；
• 支持插件，提供官方 twind 插件；
• 支持 Preact Signals；
• 支持 Preact DevTools；
• ctx.renderNotFound() 渲染 404 页面；
• 支持多个中间件；
• 实验性支持 Deno.serve；
• Showcase 展示区和 Made with Fresh 徽章。

3.React Native 0.70

React Native 0.70 主要更新如下：

• 文档更新“新的架构“部分；
• 使用 Hermes 作为默认引擎；
• 统一配置 iOS 和 Android 的 Codegen Config；
• 在新架构下 Android 支持库的 Auto-linking ；
• Android 构建时支持 CMake；
• 等等。

下面我们来看技术资料。

技术资料

1.Node.js 工作原理解析

Axel Rauschmayer 博士的这篇博文概述了 Node.js 的工作原理，包含如下几个方面：

• 架构；
• API；
• 全局变量和内置模块的亮点；
• 事件循环；
• 并发方案。

年底前，他将发布新书《Shell scripting with Node.js》。

2.JSON Crack

JSON 可视化工具。

3.新的 Web 性能指标 INP

INP 通过测量用户与页面的所有交互事件的延迟，来得出代表页面整体响应能力的实验性指标。INP 测量的范围包括鼠标/触摸屏点击事件、键盘事件，不包括悬停和滚动事件。当用户离开页面时计算，结果是一个单一的值，越低越好。

与 FID 的区别：INP 综合考虑了页面的所有交互，得出更全面的指标，而 FID 只是首次。

4.React 为什么重新渲染

你认为 React 组件更新有几个原因？

是因为它的 prop 发生了改变吗？还是 Context.Provider 的 value 发生了更新？当一个状态发生改变时，整棵 React 树都会更新吗？

上面的问题如果你不能保证你能完全回答正确，那就去这篇博文一探究竟吧～

5.JavaScript 历史的时间轴

这个站点整理了 JavaScript 历史上的关键事件节点。

• 1994-1998: 网景时代；
• 1999-2007: IE 大战 Firefox；
• 2008-2012: 网景终结，Chrome 诞生；
• 2013-2014: 从 ASM.js 到 WebAssembly；
• 2015-2020: Node.js 崛起；
• 2020-2022年：Deno 诞生，IE 退休。

其他信息

• Nuxt Icon
• Next.js 12.3
• TypeScript 4.9 Iteration Plan

好文推荐

下面来看一下好文推荐，本周推荐的好文是：

1.创意性的 CSS 布局和灵活 Web

2.React Error Boundary 指南

好了，以上就是本期的食堂周刊，观众老爷们如果觉得还不错，一键三连是对食堂老板最大的支持。

你的前端食堂，吃好每一顿饭，我们下期见。