一、React19 概览

官网链接

React 19 旨在解决 React 长期以来的一个挑战：过度重渲染的问题。

before：开发人员依赖于 useMemo()、useCallback()、memo 等技术来管理重渲染
after：React Compiler 自动处理重渲染

二、新特性

1. React 编译器

React Compiler 可以将 React 代码转化为 JS ，从而提高渲染性能。

之前

之后

2. ref 作为一个属性

不再需要 forwardRef转发 ref，可以直接作为属性访问。

// 之前
const Button = forwardRef((props,ref)=>{
    return <button ref={ref} onClick={props.onClick}></button>
})
// 之后
const Button = ({props,ref})=>{
    return <button ref={ref} onClick={props.onClick}></button>
})

3. use

use 获取 Promise

之前：useEffect 发请求、获取数据前显示 loading、获取数据后显示数据

之后: use 读取异步方法、配合 Suspense 展示 loading 或数据

当传递给 use 的 Promise 处于 pending 时，调用 use 的组件也会挂起。如果调用 use 的组件被包装在 Suspense 边界内，将显示后备 UI。一旦 Promise 被解决，Suspense 后备方案将被使用 use API 返回的数据替换。如果传递给 use 的 Promise 被拒绝，将显示最近错误边界的后备 UI。

可以在循环和条件语句 if 中调用 use

use 获取 context

之前：createContext、Provider、useContext

之后：createContext、Provider、use(Context)

4. 服务端组件

React 组件主要运行于客户端，服务端组件即组件在服务端运行。

组件其实就是函数，可以放在浏览器端执行，也可以放在服务器端执行。

客户端组件：切换命令'use client'，文件名.client.js，在浏览器环境执行的函数，可以称为 client-component
服务器组件：切换命令'use server'，文件名.server.js，在服务器环境执行的函数，可以称为 server-component

优点：服务端组件会在服务端完成渲染后，再发送到客户端。可以构建跨越服务端和客户端的应用程序

与传统的 SSR 对比：

SEO 优化
减少打包后文件体积
服务端函数直接访问服务端数据
自动代码分割：服务端组件会自动将引入的客户端组件当做一个个代码分割点，在需要的时候才返回该客户端组件

服务端组件介绍

5. Server Actions

在 Actions 之前，需要依赖于 React 的 onSubmit 事件来处理表单提交，触发如搜索等方法的执行，该方式无法在服务端直接执行相关逻辑。

使用 Actions 并结合服务端组件，可以轻松地在服务端执行表单提交动作。

服务端执行表单提交动作：将表单提交的逻辑写在服务端组件中，减少了客户端组件的体积，同时可以不依赖 js 向服务端提交数据

不依赖 JS 提交数据：传统方式是通过 ajax，form 的 action 属性可以不依赖于 js 向服务端提交数据

const Form = () => {
  return (
    <form action={submitData}>
      <div>
        <label>Name</label>
        <input type="text" name="username" />
      </div>
      <div>
        <label>Name</label>
        <input type="text" name="email" />
      </div>
      <button type="submit">Submit</button>
    </form>
  )
}

export default Form

'use server'

const submitData = async userData => {
  const newUser = {
    username: userData.get('username'),
    email: userData.get('email')
  }
  console.log(newUser)
}

6. 文档元数据

诸如“标题”、“元标签”和“描述”等元素在优化搜索引擎优化（SEO）。

在 React 19 中，可以直接在 React 组件中使用标题和元标签。

const HomePage = () => {
  return (
    <>
      <title>博客</title>
      <meta name="description" content="博客" />
      {/* 页面内容 */}
    </>
  )
}

7. 资源加载

通常浏览器会先渲染视图，然后再加载样式表、字体和图片。页面从非样式化到样式化视图的闪烁。通常解决方案是添加一个 loading 态。

React 19 中随着用户浏览当前页面，图片和其他文件将在后台加载。可以减少页面加载时间，降低用户等待时间。

React 19 引入了资源加载的生命周期 Suspense ，包括脚本、样式表和字体等，可以精确判断内容是否准备完毕，彻底消除因资源未加载而导致的页面闪烁问题。

React 19 提供了 preload 和 preinit 等新的资源加载 API，让开发者对资源何时加载和初始化拥有更精细的控制权。

8. useOptimistic

先更改前端页面，然后向服务器发送请求，如果请求成功，则结束操作；如果请求失败，则页面回滚到先前状态。

import { useOptimistic } from 'react'

function AppContainer() {
  const [optimisticState, addOptimistic] = useOptimistic(
    state,
    // 更新函数
    (currentState, optimisticValue) => {
      // 合并并返回带有乐观值的新状态
    }
  )
}

9. Context 作为提供者

利用 <Context> 代替<Context.Provider> 作为渲染的提供者

const ThemeContext = createContext('');  

function App({children}) {  
    return (  
        <ThemeContext value="dark">{children}</ThemeContext>  
    );  
}

React19新特性