React19.0已发布

December 9, 2024

https://react.dev/blog/2024/12/05/react-19
https://www.epicreact.dev/react-19-cheatsheet

React 18 引入 transitions，即低优先级 UI 变更。
startTransition 中传入的函数称为 transitions。

jsx

function Comp({ onClick, children }) {
    const [isPending, startTransition] = useTransition(); 
    if (isPending) return <button disabled>rendering...</button>;

    const onClick = () => {
        startTransition(() => {
            onClick();
        });
    };
    return <button onClick={onClick}>{children}</button>;
}

现在 React 19 支持异步 transitions，，异步 transitions 称为 actions。
也就是说，startTransition 可以传入异步函数，而 useTransition 现在会考虑 Promise 的状态。

jsx

// Using pending state from Actions
function UpdateName({}) {
    const [name, setName] = useState("");
    const [error, setError] = useState(null);
    const [isPending, startTransition] = useTransition(); 

    const handleSubmit = () => {
        startTransition(async () => {
            const error = await updateName(name);
            if (error) {
                setError(error);
                return;
            }
            redirect("/path");
        });
    };

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

新增 useActionState 用于管理 <form> 的状态。

useActionState 接受一个函数（Action），并返回一个包装后的 Action 供调用。
调用封装后的 Action 时，useActionState 将返回 Action 的最后结果 data 和 Action 的待定状态 pending 。

可以看出，React 正在内置一些功能，避免什么事情都交给 useEffect

jsx

// Using <form> Actions and useActionState
function ChangeName({ name, setName }) {
    const [error, submitAction, isPending] = useActionState(async (previousState, formData) => {
        const error = await updateName(formData.get("name"));
        if (error) {
            return error;
        }
        redirect("/path");
        return null;
    }, null);

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

引入 useFormStatus，可以读取父级 form 上次提交的状态（类似于 context）。

jsx

function Submit() {
    const { pending, data, method, action } = useFormStatus(); 
    return <button disabled={pending}>Submit</button>;
}

export default function App() {
    return (
        <form action={action}>
            <Submit />
        </form>
    );
}

useOptimistic 已稳定

jsx

function ChangeName({ currentName, onUpdateName }) {
    const [optimisticName, setOptimisticName] = useOptimistic(currentName); 

    const submitAction = async (formData) => {
        const newName = formData.get("name");
        setOptimisticName(newName); 
        const updatedName = await updateName(newName);
        onUpdateName(updatedName);
    };

    return (
        <form action={submitAction}>
            <p>Your name is: {optimisticName}</p>
            <p>
                <label>Change Name:</label>
                <input
                    type="text"
                    name="name"
                    disabled={currentName !== optimisticName}
                />
            </p>
        </form>
    );
}

use 已稳定。注意它不是一个 hook，无需保证每次渲染的调用数量一致。

可用于读取：

Promise：配合 Suspense 使用
Context：替代 useContext

可以发现，在一次性数据获取（异步请求）时，可以避免使用 useEffect

jsx

import { use } from 'react';

function MessageComponent({ messagePromise }) {
  const message = use(messagePromise);
  const theme = use(ThemeContext);
  // ...

新增 react-dom/static 用于 SSG，而 react-dom/server 用于 SSR

SSR：支持在内容加载时进行流式处理
SSG：等待所有数据加载完毕

jsx

import { prerender } from "react-dom/static";

async function handler(request) {
    const { prelude } = await prerender(<App />, {
        bootstrapScripts: ["/main.js"],
    });
    return new Response(prelude, {
        headers: { "content-type": "text/html" },
    });
}

RSC 已稳定
另外新增 Server Functions，可以直接在 RSC 调用（实际上就是自动生成了后端接口）

async function updateName(name) {
    "use server";
    if (!name) {
        return { error: "Name is required" };
    }
    await db.users.updateName(name);
}

不需要 forwardRef 了，很方便

jsx

function MyInput({ placeholder, ref }) {
    return <input placeholder={placeholder} ref={ref} />;
}

//...
<MyInput ref={ref} />;

无需 .Provider 了

jsx

//@@prettier-ignore
const ThemeContext = createContext("");

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

ref 支持返回 cleanup 函数

BreakingChanges：而不是通过 null 调用 ref 函数

jsx

<input
    ref={(ref) => {
        // ref 创建时调用

        return () => {
            // ref 从 DOM 移除后调用
        };
    }}
/>

useDeferredValue 支持初始值参数

useDeferredValue 本身会导致渲染两次，上一次的值用于呈现，当前值用于后台（指主线程低优先级）渲染

jsx

function Search({ deferredValue }) {
    // On initial render the value is ''.
    // Then a re-render is scheduled with the deferredValue.
    const value = useDeferredValue(deferredValue, "");
    return <Results query={value} />;
}

支持在 CSR/SSR 环境下组件中使用元数据标签，会自动调整到文档的 head

jsx

function BlogPost({ post }) {
    return (
        <article>
            <h1>{post.title}</h1>
            <title>{post.title}</title>
            <meta name="author" content="Josh" />
            <link rel="author" href="https://twitter.com/joshcstory/" />
            <meta name="keywords" content={post.keywords} />
            <p>Eee equals em-see-squared...</p>
        </article>
    );
}

function ComponentOne() {
  return (
    <Suspense fallback="loading...">
      <link rel="stylesheet" href="foo" precedence="default" />
      <link rel="stylesheet" href="bar" precedence="high" />
      <article class="foo-class bar-class">
        {...}
      </article>
    </Suspense>
  )
}

function ComponentTwo() {
  return (
    <div>
      <p>{...}</p>
      <link rel="stylesheet" href="baz" precedence="default" />  <-- will be inserted between foo & bar
    </div>
  )
}


function MyComponent() {
  return (
    <div>
      <script async={true} src="..." />
      Hello World
    </div>
  )
}

内置了资源预加载的支持

jsx

import { prefetchDNS, preconnect, preload, preinit } from "react-dom";
function MyComponent() {
    preinit("https://.../path/to/some/script.js", { as: "script" }); // loads and executes this script eagerly
    preload("https://.../path/to/font.woff", { as: "font" }); // preloads this font
    preload("https://.../path/to/stylesheet.css", { as: "style" }); // preloads this stylesheet
    prefetchDNS("https://..."); // when you may not actually request anything from this host
    preconnect("https://..."); // when you will request something but aren't sure what
}

支持 Custom Element，不过这部分的文档还没更新

注：不支持像 vue 这种编译为 WebComponent

与 Custom Element 实例上的属性匹配的项将被指定为 properties，否则它们为 attributes

TODO：还没写完

←Back to home

This work is licensed under CC BY-NC-SA 4.0