react19新特性React 19 会是引入 hooks 之后又一次里程碑式版本，react当前可以用的版本为reac

Api和hooks的变化

use

在 React 19 中，引入了一个新的多用途的 Api use，它有两个用途：

1.异步数据获取

通过 use 我们可以在组件 render 执行时进行数据获取。使用 use 时，它接受一个 Promise 作为参数，会在 Promise 状态为非 fullfilled 时阻塞组件 render。通常我们会使用 use 配合 Suspense 来一起使用，从而处理在数据获取时的页面加载状态展示。以往在 use 出现之前，我们需要在组件中进行数据获取通常需要经历以下步骤：

第一先创建 useState 用于存储获取后的数据以及控制 Loading 加载状态。
第二是初始化时在 useEffect 中进行异步数据获取。
第三最后在数据获取返回后调用 setState 更新数据和 UI 展示。

示例：

import { useState, useEffect } from 'react';
function getPerson(): Promise<{ name: string }> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: 'react19之前的写法' });
    }, 1000);
  });
}

const personPromise = getPerson();

function App() {
  // 使用 useState 控制 UI 展示和数据存储
  const [loading, setLoading] = useState(false);
  const [name, setName] = useState<string>('');

  // useEffect 中进行数据获取
  useEffect(() => {
    setLoading(true);
    personPromise.then(({ name }) => {
      // 数据获取成功后调用 setState 更新页面展示
      setName(name);
      setLoading(false);
    });
  }, []);

  return (
    <div>
      <p>Hello:</p>
      {loading ? 'loading' : <div>userName: {name}</div>}
    </div>
  );
}

export default App;

在 React 19 新增的 use 这个 Api 后，我们可以使用 use 配合 Suspense 来简化这一过程：

import { use, Suspense } from 'react';

function getPerson(): Promise<{ name: string }> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: 'react19之后' });
    }, 1000);
  });
}

const personPromise = getPerson();

function Person() {
  // use Api 接受传入一个 Promise 作为参数
  const person = use(personPromise);

  return <div>userName: {person.name}</div>;
}

function App() {
  return (
    <div>
      <p>Hello:</p>
      {/* 同时配合 Suspense 实现使用 use 组件的渲染加载态 */}
      <Suspense fallback={<div>Loading...</div>}>
        <Person />
      </Suspense>
    </div>
  );
}

export default App;

可以看到使用 use Api 来实现了相同的数据内容获取，相较以往的数据获取步骤的话让我们的代码简洁了许多。

2.有条件的读取 React Context（ useContext => use(context) ）

再来看看 use Api 的另一个用途：有条件的读取 React Context。在 React 19 之前要使用 Context ，只能通过 useContenxt 来使用。由于 React Hook 的特殊性，hook 是无法出现在条件判断语句中。无论之后的条件中是否用得到这部分数据，我们都需要将 useContext 声明在整个组件最顶端。

但在 React19 之后，我们可以通过 use api 来有条件的获取 Context 而不必再局限于传统 hook 的一些限制。

import { use } from 'react';
import ThemeContext from './ThemeContext';

function Heading({ children }) {
  if (children == null) {
    return null;
  }

  // 使用 use APi 有条件的获取 Context
  const theme = use(ThemeContext);
  return <h1 style={{ color: theme.color }}>{children}</h1>;
}

useTransition的改动

在 React19 版本之前，我们需要通过一系列的 hook 来手动处理待处理状态、错误、乐观更新和顺序请求等等状态。

比如一个常见提交表单的用例：

import { useState } from 'react';
import {Button,Input} from "@douyinfe/semi-ui"

function UpdateName() {
  const [name, setName] = useState<string>('');
  const [error, setError] = useState<any>(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    if (error) {
      setError(error);
      return;
    }
    console.log('表单更新完毕')
  };

  return (
    <div>
      <Input value={name} onChange={(event) => setName(event.target.value)} />
      <Button onClick={handleSubmit} disabled={isPending}>
        Update
      </Button>
      {error && <p>{error}</p>}
    </div>
  );
}

而在 React19 中，对于 useTransition 提供了异步函数的支持，从而可以使用 useTransition 更加便捷的进行异步的数据处理：

import { useState, useTransition } from 'react';
import {Button,Input} from "@douyinfe/semi-ui"

function updateName(name) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(undefined);
    }, 1000);
  });
}

export default function UpdateName() {
  const [name, setName] = useState('');
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    // startTransition 中的异步函数被称为 Action
    // 当 startTransition 被调用时 React 会自动变更 isPending 为 true
    // 同理，当函数执行完毕后 isPending 会自动变更为 false
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      }
      console.log('表单更新完毕')
    });
  };

  return (
    <div>
      <Input value={name} onChange={(event) => setName(event.target.value)} />
      <Button onClick={handleSubmit} disabled={isPending}>
        Update
      </Button>
      {error && <p>{error}</p>}
    </div>
  );
}

可以看到在 useTransition 返回的 startTransition 函数中，异步的 startTransition 在点击 update 时会将 isPending 状态自动设置为 true 同时发起异步更新请求。

在 updateName 异步更新请求完成后，React 会自动将 isPending 重置为 false 从而自动控制 button 的禁用状态。

useActionState

在 React19 中，对于表单提交行为的 Action React 提供了更加便捷的方式：

import { useActionState } from 'react';

function updateName(name) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      Math.random() > 0.5 ?  resolve("表单更新完成":name) : reject();
    }, 200);
  });
}

export default function ChangeName() {
  const [state, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
    //previousState:是上一次的值
      try {
        const result = await updateName(formData.get('name'));
        return result;
      } catch (e) {
        return e;
      }
    },
    null
  );

  return (
    <form action={submitAction}>
      <input type="text" name="name" />
      <button type="submit" disabled={isPending}>
        Update
      </button>
      <p>{state}</p>
    </form>
  );
}

useActionState 接受一个函数（“Action”），同时返回被包装好的 Action 方法（submitAction）。

当调用被包装好的 submitAction 方法时，useActionState 返回的第三个 isPending 用于控制当前是否为 isPending （被执行状态），同时在 Action 执行完毕后 useActionState 会自动将 Action 的返回值更新到 state 中。

useFormStatus

在 react-dom 库中提供了一个全新的 Hook useFormStatus 可以帮助我们更好地控制创建的表单，用于在表单内部的元素来获取到表单当前状态：

import { useFormStatus } from "react-dom";

function Submit() {
  const { pending, data, method, action } = useFormStatus();
  return (
    <button disabled={pending}>
      {pending ? "正在提交..." : "提交完成"}
    </button>
  );
}

const formAction = async () => {
  // 模拟延迟 3 秒
  await new Promise((resolve) => setTimeout(resolve, 3000));
};

const FormStatus = () => {
  return (
    <form action={formAction}>
      <Submit />
    </form>
  );
};

export default FormStatus;

pending：如果表单处于待处理状态，则为 true，否则为 false。
data：一个实现了 FormData 接口的对象，其中包含表单提交的数据。
method：HTTP 方法 – GET或 POST
action：一个函数引用。

useOptimistic

React 19 引入了useOptimistic 来管理乐观更新。

所谓 Optimistic updates(乐观更新) 是一种更新应用程序中数据的策略，这种策略通常会理解先修改前端页面，然后再向服务器发起请求。

当请求成功后，则结束操作。
当请求失败后，则会将页面 UI 回归到更新前的状态。

useOptimistic的主要目的是允许我们假设异步操作成功，并在等待实际结果时相应地更新状态。这种做法的好处是可以防止新旧数据之间的跳转或闪烁，提供更快的用户体验。

比如，在绝大多数提交表单的场景中。通常在某个 input 输入完毕后，我们需要将 input 的值输入提交到后台服务中保存后再来更新页面 UI ，这种情况就可以使用 useOptimistic 来进行所谓的“乐观更新”。

import { useOptimistic, useRef } from "react";

export async function isMessage(message) {
  await new Promise((resolve, reject) =>
    setTimeout(() => {
      if (Math.random() > 0.5) {
        resolve();
      } else {
        reject();
      }
    }, 1000)
  );
  return message;
}

export function Thread({ messages, sendMessage }) {
  const formRef = useRef();
  async function formAction(formData) {
    addOptimisticMessage(formData.get("message"));
    formRef.current.reset();
    await sendMessage(formData);
  }
  //入参一：初始状态和未进行任何操作时返回的状态。
  //入参二：一个纯函数,它获取当前状态和addOptimistic传递的乐观值,返回合并后的乐观状态。
  //optimisticState:乐观状态。如果没有正在进行的操作,则等于状态;否则,它等于updateFn的结果。
  //addOptimistic:用于触发乐观更新的函数,接受任何类型的 optimisticValue 并将其传递给 updateFn。
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (state, newMessage) => [
      ...state,
      {
        text: newMessage,
        sending: true,
      },
    ]
  );
  console.log(optimisticMessages, "1");
  return (
    <>
      {optimisticMessages.map((message, index) => (
        <div key={index}>
          {message.text}
          {!!message.sending && <small> (Sending...)</small>}
        </div>
      ))}
      <form action={formAction} ref={formRef}>
        <input type="text" name="message" placeholder="Hello!" />
        <button type="submit">Send</button>
      </form>
    </>
  );
}


import { Thread, isMessage } from "./Thard";
import { useState } from "react";

function App() {
  const [messages, setMessages] = useState([
    { text: "Hello there!", sending: false, key: 1 },
  ]);
  async function sendMessage(formData) {
    try {
      const sentMessage = await isMessage(formData.get("message"));
      setMessages((messages) => [...messages, { text: sentMessage }]);
    } catch (e) {
      console.error(e);
    }
  }
  return <Thread messages={messages} sendMessage={sendMessage} />;
}

export default App;

上边的例子中我们使用 useOptimistic 来每次表单提交发送数据前调用 addOptimisticMessage 将页面立即更新。

在isMessage使用Math.random()和延时器模拟了一个请求的成功或者失败，之后等待 isMessage 异步方法完成后，useOptimistic 会根据异步方法是否正常执行完毕从而进行是否保留 useOptimistic 乐观更新后的值。

当 sendMessage Promise Resolved 后，useOptimistic 会更新父组件中的 state 保留之前乐观更新的值
当 sendMessage Promise Rejected 后，useOptimistic 并不会更新 App 中的 state 自然也会重置页面中的值

useOptimistic 的应用范围也很广，例如表单提交、点赞、书签、删除以及其他需要立即反馈的场景。

forwardRef的改进

从 React 19 开始，现在可以将 ref 通过 props 在父子组件中进行传递，这能简化代码，forwardRef 也成了一个即将要被废弃的 API。（但是如果要通过ref实现调用子组件中的方法的话，仍然需要useImperativeHandle这个hooks将方法暴露出去）

import React, { forwardRef } from 'react';
import {Button} from '@douyinfe/semi-ui'
const ExampleButton = forwardRef((props, ref) => (
  <Button ref={ref}>
    {props.children}
  </Button>
));

之后的写法：

import React from 'react';
import {Button} from '@douyinfe/semi-ui'
const ExampleButton = ({ ref, children }) => (
  <Button ref={ref}>
    {children}
  </Button>
);

Context简化

在 React19 之前，对于 Context 上下文我们需要使用 <Context.Provider> 来作为上下文提供者。

在 React 19 之后，我们可以将 <Context> 渲染为提供者，就无需再使用 <Context.Provider> 了：

const ThemeContext = createContext('');

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

refs的优化

之前的做法：

当需要设置 ref 时，React 会调用这个 ref 回调，并传入对应的 DOM 节点作为参数。当需要清除 ref 时，React 会再次调用这个 ref 回调，并传入 null 作为参数。通过使用 ref 回调，就可以在 React 组件的生命周期中执行特定的操作，比如操作 DOM、获取 DOM 属性等。

import { useRef } from 'react';

function ExampleComponent() {
  const myRef = useRef(null);

  function handleRef(node) {
    // 在创建ref/卸载DOM时调用
    if (node) {
      // 执行你的操作，比如操作 DOM
      console.log(node);
    } else {
      // 在清除 ref 时调用，此时 node 是 null
      console.log('Ref is cleared');
    }
  }

  return (
    <div ref={handleRef}>
      {/* ... */}
    </div>
  );
}

其他

文档元数据

像“title”、“meta 标签”和“description”之类的元素在优化 SEO 和确保可访问性方面尤为重要。在 React 中，单页应用程序普遍存在，跨不同路由管理这些元素可能有些麻烦。

目前，可以通常编写自定义代码，或使用类似 react-helmet 的包来处理路由更改并相应地更新元数据。这个过程可能是重复的，并且容易出错，特别是在处理像 meta 标签这样对 SEO 敏感的元素时。

在react19之前：写起来方式比较麻烦

import React, { useEffect } from 'react';
const HeadDocument = ({ title }) => {
  useEffect(() => {
      document.title = title;
      const metaDescriptionTag = document.querySelector('meta[name="description"]'); 
      if (metaDescriptionTag) { 
         metaDescriptionTag.setAttribute('content', 'New description'); 
       } 
  },[title]); 
  
   return null;
 };
  
export default HeadDocument;

在之后：

在 React 中以前是不支持直接在组件中使用 title 和 meta 标签。唯一的方法是使用像 react-helmet 这样的包。在React19 中，可以直接在 React 组件中使用 title 和 meta 标签：

Const HomePage = () => {
  return (
      <>
           <title>Freecodecamp</title>
           <meta name="description" content="Freecode camp blogs" />
     </>
   )
  }

React 编译器

React 编译器是一个**「自动记忆编译器」，可以自动执行应用程序中的所有记忆操作。react19之前的版本，当状态发生变化时,React有时会重新渲染不相干的部分，我们针对此类情况的解决方案一直是「手动记忆化」，**应用useMemo、useCallback和memo API来手动调整React在状态变化时重新渲染的部分。但手动记忆化可能会使代码变得复杂、容易出错、并需要额外的工作来保持更新。React 团队意识到手动优化很繁琐。React 团队创建了React 编译器。React 编译器现在将管理这些重新渲染。有了这个功能，我们不再需要手动处理这个问题。目前React Compiler 仍然处于 experimental 状态。

服务器组件（RSC）

服务器组件的概念已经流传多年，Next.js 是第一个在生产环境中实现它们的。从 Next.js 13 开始，默认情况下，所有组件都是服务器组件。要使组件在客户端上运行，需要使用“use client”指令。

在 React 19 中，服务器组件将直接集成到 React 中，带来许多优势：

SEO：服务器渲染的组件通过向网络爬虫提供更可访问的内容来增强搜索引擎优化。
性能提升：服务器组件有助于更快地加载页面和改善整体性能，特别是对于内容密集型应用程序。
服务器端执行：服务器组件使在服务器上执行代码变得无缝和高效，使诸如 API 调用之类的任务变得轻松。

React 中所有组件默认都是客户端的。只有当我们使用 'use server' 添加为组件的第一行时，组件才是服务器组件。

兼容 Web Components

Web 组件允许我们使用原生 HTML、CSS 和 JavaScript 创建自定义组件，无缝地将它们整合到我们的 Web 应用程序中，就像使用HTML 标签一样。

之前在react中使用 web 组件的方式：

class MyButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    const button = document.createElement('button');
    button.textContent = this.getAttribute('label') || 'Click me';
    
    button.addEventListener('click', () => {
      const event = new CustomEvent('button-click', {
        detail: { message: 'Button clicked!' }
      });
      this.dispatchEvent(event);
    });

    this.shadowRoot.append(button);
  }
}

customElements.define('my-button', MyButton);

// MyButton.js
import React, { useRef, useEffect } from 'react';

const MyButton = ({ label, onClick }) => {
  const buttonRef = useRef();

  useEffect(() => {
    const buttonElement = buttonRef.current;

    const handleButtonClick = (e) => {
      if (onClick) {
        onClick(e);
      }
    };
    //需要手动绑定事件
    buttonElement.addEventListener('button-click', handleButtonClick);

    // 清除事件监听器避免内存泄漏
    return () => {
      buttonElement.removeEventListener('button-click', handleButtonClick);
    };
  }, [onClick]);

  return <my-button ref={buttonRef} label={label}></my-button>;
};

export default MyButton;

React19 兼容 Web Components**：**

在React19之前，在React中集成Web Components并不直接。通常，我们需要将 Web Components 转换为React 组件，或者安装额外的包并编写额外的代码来使 Web Components 与 React协同工作。React 19 将帮助我们更轻松地将 Web Components 整合到我们的 React 代码中。如果我们遇到一个非常有用的 Web Components，我们可以无缝地将其整合到React项目中，而不需要将其转换为 React代码。

这简化了开发流程，并允许我们在 React 应用程序中利用现有 Web Components 的广泛生态系统。

总结

React 19 会是引入 hooks 之后又一次里程碑式版本，让我们拭目以待！