React19 新特性

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;

 

有条件的读取 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简化

const ThemeContext = createContext('');

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

 

refs的优化

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>
  );
}
 

React 编译器

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

兼容 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;