技术周刊 2022-03-16：React 18 首个 RC 发布，数周后将发布正式版

前端快爆

• React 18 首个 RC 版本发布，主要有如下更新：

  • 新的客户端渲染 API ：ReactDOM.createRoot（用于替换 ReactDOM.render）。
  • 服务端渲染 API 更新，完全支持了服务端的 Suspense 和流式 SSR。
  • 自动批处理优化（解决了异步回调中无法批处理的问题）。
  • 不再存在并发模式（Concurrent Mode），而是并发特性（Concurrent Feature），侵入性更低
  • 新增 Hooks API：
    • useId: 为组件生成唯一的 ID。
    • useSyncExternalStore：可以在并行渲染时避免 UI 状态和外部数据源割裂，官方推荐所有三方状态库都切换为这个 API，react-redux 8.0.0-alpha 已切换为此 API。
    • useInsertionEffect：用于给 CSS 库在全局插入 DOM 节点，比如 <style> 或 SVG <defs>，相比 useLayoutEffect，这个方法的回调过程中拿不到 DOM 节点的 ref。
    • 用于并发渲染的 useDeferredValue、startTransition、useTransition。
  • Suspense API 更新：
    • React 16 - 17 的 Suspense API 仅限于客户端，仅和 React.lazy 进行搭配。
    • 而 React 18 起的 Suspense API 将支持内部组件的异步加载状态，同时支持流式 SSR。
    • Suspense 不再依赖 fallback 属性来定义边界。
  • 删除了 “setState on unmounted component” 警告。
  • 不再支持任何版本的 IE 浏览器。是因为 React 18 中引入的新特性是使用现代浏览器特性构建的，比如微任务，这些特性在 IE 中是无法充分填充的。而 IE 浏览器也将于 2022 年 6 月 15 日停止支持。

• Safari 15.4 发布，增加了70多个新功能，重要更新如下：

  • <img> 元素支持配置 loading 属性用于懒加载图片，此前 Chrome 77、Firefox 75、Edge 79 均已支持。
  • 新支持 <dialog> 元素、::backdrop 伪元素，此前 Chrome 37、Firefox 98、Edge 79 均已支持。
  • 新支持 [:has()](https://www.w3.org/TR/selectors-4/#relational) 父元素伪类选择器，这是首个正式支持的浏览器，Chrome 中还需要开启 Flag。
  • 支持了 CSS Cascade Layers 特性
    • 该特性包含了 @layer 规则，在内部允许声明 CSS 选择器，内部被匹配上的选择器将被赋予一个或多个图层。
    • @layer 规则的优先级比元素优先级更高。
    • 可以在文件开头声明不同的 @layer 顺序来重新组织后续 @layer 的相对优先级。
    • 此前已在 Chrome 99、 Firefox 97 中得到支持。
  • JS 数组新增三个 ECMAScript Stage 3 提案的 API
    • [findLast()](https://github.com/tc39/proposal-array-find-from-last)，找出数组最后一个元素。
    • [findLastIndex()](https://github.com/tc39/proposal-array-find-from-last)，找出数组最后一个元素的索引。
    • [at()](https://github.com/tc39/proposal-relative-indexing-method)，以指定的索引访问数组元素。
  • 开发者工具增加新的 CSS 对齐控件，用于 Flexbox 和 Grid 直观地设置 align-content、align-items、align-self、justify-content、justify-items 或 justify-self 属性。
  • 新的 Viewport 单位 svh、lvh、dvh 和 svw、lvw 和 dvw，这些值会随着用户滚动而改变。

• ECMAScript 有了新提案：类型作为注释（Types as Comments）。这个提案的目的是让开发者能够在JavaScript 代码中添加类型注释，允许 JavaScript 外部的类型检查器检查这些注释。在运行时，JavaScript引擎会忽略它们，将这些类型视为注释。运行用 TypeScript、Flow 和其他 JavaScript 的静态类型超集编写的程序，而不需要进行任何的编译。

• 随着 Chrome 99 的发布，Mac 上的 Chrome 在苹果的 Speedometer 浏览器响应速度测试中获得了迄今为止所有浏览器中最高的分数——300分，到达了一个新的速度里程碑。Chrome 99 启用了一种叫 ThinLTO 的构建优化技术，可以内联代码库中对速度至关重要的部分，即使分布在多个文件或库。结合最近的图形优化（即直通解码器和进程外光栅化），测试显示 Chrome 的图形性能比 Safari 快 15%。

百宝箱

• 随时检测有焦点的元素。如果您想随时知道网页上哪个元素有焦点，可以使用控制台工具中的实时表达式来检测。

• pppointed 是一个画箭头的工具，可以导出为 SVG。

---

编辑：墨尘 & 审阅：承虎、一丝