img

近期 React 团队发布了最新的技术博客。兴奋地公布了他们已经准备好推出全新的 React Compiler。

React Compiler

React Compiler 很好的解决了 React 项目的性能优化问题。以前我们写一些优化性的代码，必须引入 useMemo , useCallback , memo 来根据依赖项的改变，缓存已经计算过的数据。这给开发者的代码不仅增加了复杂度，而且开发者的心智负担也有明显增加。

React 团队了解这个问题，当时使用 useMemo 等方式也是一个妥协的解决方案，随着社区的呼吁声，React 团队着重解决了这个问题，研发 React Compiler 让框架能够自动判断是否需要优化并缓存，而开发者无须关注细节。

React 团队发布一项重大的、破坏性的功能之前，都会提前将新技术应用到生产环境中，保证其可行性。这点非常令普通开发者安心。本次 React Compiler 已经在 Instagram 线上使用。

博客地址：

React Labs: What We’ve Been Working On – February 2024 – React

New React Hooks

useMemo, useCallback, memo

不再需要了！因为 React Compiler 已经可以自动判断并优化。

ref

ref 可以当作一个 常规的 prop 通过 props 直接传输，而不需要 forwardRef 包裹。

1
2
3
4
5
6
import React from 'react'
const Button = ({ ref, children }) => {
  <button ref={ref}>
    {children}
  </button>
)

useContext

新的 use(Context hook 将会替代 useContext 。

<Context.Provider>

Context 将会替代 <Context.Provider> 。

Promise 请求

新的 use(promise) 将可以直接管理 promise 函数的处理。

Server components

React 19 开始全面支持“服务端渲染”。

带来一系列的高级特性：

  • SEO: 搜索引擎友好
  • 启动速度：减少初始化渲染时间
  • 服务端执行：可以在服务端执行一些API请求，提高执行效率。

React 的组件默认是客户端侧的，当使用 'use server' 时才会作为服务端侧的组件。

Actions

主要针对 form 的增强，同时兼顾客户端侧/服务端侧的逻辑处理。

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 19之前的版本
<form onSubmit={search}>
  <input name="query" />
  <button type="submit">Search</button>
</form>

// 19版本
"use server"
const submitData = async (userData) => {
  const newUser = {
	  username: userData.get('username'),
	  email: userData.get('email')
  }
  console.log(newUser)
}

<form action="submitData">
  <input name="username"/>
  <input name="email" />
  <button type="submit">Submit</button>
</form>

Web Components

“Web Components” 允许通过原生的 HTML, CSS, JavaScript 创建自定义的组件，目前该技术已经有一定的成熟性。

之前 React 是无法直接与 Web Components 直接进行结合的。但在 19 之后这会变得非常容易且优雅。

Document Metadata

在 HTML 中大家通常忽略了 “title”, “meta tags”, “description” 等元素。然而这些元素对搜索引擎的 SEO 有重大影响。

以前的 React 对这部分的控制很少，尤其是在路由跳转之后，变更上述的一些状态是很常见的。目前开发者通常会直接操作 Document 元素，或者使用一些第三方的包（如：react-helmet）来操作 meta 数据。

之后的操作方式：

可以在 React 中直接使用 title , meta 标签

1
2
3
4
5
6
7
8
const HomePage = () => {
  return (
    <>
      <title>foo</title>
      <meta name="description" content="bar"/>
    </>
  )
}

Asset Loading

React 或者说前端 UI 库中，资源加载一直是一个比较影响用户体验的点。19 版本优化了 stylesheets, fonts, scripts 的加载速度和展示上的体验。

另外提供了 preload 和 preinit 更好地控制资源的加载。

React Canary

“金丝雀”发布是 React 项目尝试的一种全新的开发流程。

以前新的特性只在 Meta 内部进行研究与开发，最后大众开发者会见到一个改变巨大的稳定版本。在实行金丝雀研发模式后，React 的开发会转变为公开。通过 React Labs 博客系列不停同步新的特性，然后收集来自社区的反馈。