新的 React 带来了什么 - 获得清晰的了解

React 19 于 2024 年 4 月 25 日发布。JavaScript 世界变化如此之快，有时让人感觉难以跟上。但是，当这些更改旨在让您作为 React 开发人员的生活变得更轻松时，就值得一看，对吧？由于 React 是这个生态系统中如此重要的一部分，因此保持更新是必须的。

React 19 最好的部分是它专注于让事情变得更简单。这些更新旨在让学习 React 变得更容易，让您花更多时间进行创建，而不是处理棘手的设置。一些新功能确实改变了游戏规则，可能会极大地改变您的工作方式，所以您绝对不想错过它们。

我总是尝试以易于理解的方式解释事物，而不使用复杂的词语。本文也不例外。我的目标是确保您清楚了解所有内容，所以让我们一起探索 React 19 中的精彩更新！

请记住，React 19 还不太稳定。目前它被称为 React Canary。因此，请记住，实际上并不建议将其用于生产。

反应编译器

为了优化我们的 React 应用程序，我们使用一些内置方法，例如 useMemo、useCallback 或 memo。这告诉 React 如果输入没有改变就不要再次编译代码。但如果你忘记应用记忆化，就会导致浪费 React 资源和计算能力。为了解决这个问题，React 19 引入了 React Compiler。 React 的新编译器是 19 版本新发布的亮点。新的编译器会在幕后优化您的代码，因此您可以放弃这些钩子并专注于编写漂亮、干净的 React 组件。

简而言之，您不需要使用 useMemo 或 useCallback 包装函数来优化性能，也不需要使用 memo 包装组件来防止重新渲染组件。

操作（useTransition 挂钩）

我们来聊点废话吧？！！你是否注意到在 React 19 发布之前 useTransition 钩子几乎没有被提及？还是只有我这样？嗯，至少这是我注意到的，尤其是对于初级开发人员来说。无论如何，让我向您介绍一下它在之前版本中的工作原理，然后我们将了解为什么它现在如此重要。

useTransition 返回一个包含两个元素的数组：startTransition 函数和 isPending 布尔值。您可以将状态更新包装在 startTransition 函数中，以将它们标记为转换（优先级较低的代码）。这意味着用 startTransition 包裹的部分在其他连续任务完成后开始工作。

在 React 18 中，startTransition 函数不直接支持异步函数。这是一个限制，因为 startTransition 旨在将更新标记为低优先级，但无法原生处理异步逻辑。

在 React 19 中，此限制已得到解决。现在，startTransition 支持异步函数，这意味着您可以在其中执行异步任务（例如，数据获取），同时将这些更新标记为转换。此增强功能允许更灵活和直观地使用 startTransition，使其感觉像是一项“新”功能，尽管它在技术上是对现有功能的改进。

？
按照惯例，使用异步转换的函数称为“操作”。

例如，您可以在 useState 中处理挂起和错误状态：

// Before Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    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>
  );
}

React 19 支持在转换中使用异步函数来自动处理待处理状态、错误、表单和乐观更新。例如，您可以使用 useTransition 来为您处理挂起状态：

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

异步转换将立即将 isPending 状态设置为 true，发出异步请求，并在任何转换后将 isPending 切换为 false。这使您可以在数据更改时保持当前 UI 的响应能力和交互性。

<表格>行动

React 团队添加了对传递函数作为操作的支持。

export default function App() {
    const [name, setName] = useState(
        () => JSON.parse(localStorage.getItem("name")) || "Anonymous user"
    )

    async function formAction(formData){
        try {
            const newName = await updateNameInDB(formData.get("name"))
            setName(newName)
        }
    }

    return (
        <>
            <p className="username">
                Current user: <span>{name}</span>
            </p>
            <form action={formAction}>
                <input
                    type="text"
                    name="name"
                    required
                />
                <button type="submit">Update</button>
            </form>
        </>
    )
}

formAction 函数（您可以命名任何名称）在其参数中获取表单数据。每个字段都由名称属性表示，因此在命名输入时必须小心。 formData 参数实际上是本机 FormData Web API 对象。您可以在 mdn 网络文档上找到它。另一个好处是你不需要应用 event.preventDefault()，因为它是由 React 处理的。

当表单操作成功时，React 会自动重置表单。但如果你想重置

手动，您可以调用新的 requestFormReset React DOM API。

新钩子：useActionState

？
React.useActionState 以前在 Canary 版本中称为 ReactDOM.useFormState，但已被重命名并弃用 useFormState。

useActionState 跟踪组件状态、挂起状态，并提供包装的操作函数，以在表单或我们可能想要执行突变的任何其他地方使用。

这是一个更描述性地分解它的示例：

import { useActionState } from "react"
import { updateNameInDB } from "../api/user"

export default function App() {
    const [user, formAction, isPending] = useActionState(insertName, {
        name: "John Doe",
        error: null
    })

    async function insertName(prevState, formData){
        try {
            const response = await updateNameInDB(formData.get("name"))
            return {name: response.name}
        }catch(error){
            return {...prevState, error: error.error}
        }
    }

    return (
        <>
            {user?.name && (
                <p>



<p>How this hook works is described with reference to the example:</p>

<ol>
<li><p>The first argument of the useActionState hook is the "Action" function, which is defined here as insertName.</p></li>
<li><p>The second argument is the initial state, which is accessible through the first element of the result array. In this example, the initial state includes name and error, and the state is represented as user in the component.</p></li>
<li><p>The insertName function returns the updated state. If the operation is successful, it updates the name property. If an error occurs, it updates the error property while preserving the rest of the previous state.</p></li>
<li>
<p>The result of the useActionState hook is an array with three elements:</p>

<ul>
<li>The current state (user): Reflects the latest state of the data.</li>
<li>A dispatchable function (formAction): Triggers the action when called, as seen in the form element's action attribute.</li>
<li>A pending state (isPending): Tracks whether the action is currently in progress, useful for managing transitions or loading indicators.</li>
</ul>
</li>
</ol>

<h2>
  
  
  New Hook: useOptimistic
</h2>

<p>When it’s performing a data mutation and to show the final state right after the user instructs (could be a tap on a button) or you could say optimistically while the async request is underway, you need to use this hook. Here is a demonstration how you can do this:<br>
</p>

<pre class="brush:php;toolbar:false">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>
  );
}

useOptimistic 钩子将在 updateName 请求正在进行时立即渲染 optimisticName。当更新完成时，React 会将更新后的值插入到 currentName 中，或者如果更新出错，React 会自动切换回 currentName 值。

新挂钩：useFormStatus

useFormStatus 挂钩可帮助您跟踪表单提交。等一下 ？！这是跟踪异步转换的另一个钩子吗？答案是“是”和“否”。由于您已经了解了 useActionState 挂钩，您可以说这是另一个用于跟踪异步转换的挂钩。但 useFormStatus 不会导致任何操作发生，而是提供上次表单提交的状态信息。

// Before Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    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>
  );
}

嗯，我想说这里要注意的最重要的事情是 useFormStatus hook 实际上来自 React-dom，而不是 React。

useFormStatus 读取父级

的状态；就好像表单是上下文提供者一样。要获取状态信息，必须在

内呈现 Submit 组件。 Hook 返回诸如挂起属性之类的信息，告诉您表单是否正在主动提交。

在上面的示例中，Submit 使用此信息来禁用 提交表单时按下。

新API：使用

你可以使用 use 来读取 Promise，React 将挂起组件直到 Promise 解决：

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

上面的示例演示了 use API 的用例。 “Comments”是一个使用名为“commentsPromise”的承诺的组件。该承诺被新的 use API 消耗，从而使其挂起组件。顺便说一句，您必须使用 Suspense Fallback 来包装组件。

使用 API 有一个您必须注意的限制。限制是每次使用包含组件的 API 重新渲染时，它都会创建另一个承诺，从而导致性能不佳。所以，基本上它没有缓存机制。以下是发布博客中的谨慎说明：

use API 也从上下文中读取数据。例如，要读取上下文值，我们只需将上下文传递给 use()，该函数就会遍历组件树以查找最近的上下文提供程序。

与读取上下文的 useContext() Hook 不同，use() 函数可以在我们组件的条件和循环中使用！

export default function App() {
    const [name, setName] = useState(
        () => JSON.parse(localStorage.getItem("name")) || "Anonymous user"
    )

    async function formAction(formData){
        try {
            const newName = await updateNameInDB(formData.get("name"))
            setName(newName)
        }
    }

    return (
        <>
            <p className="username">
                Current user: <span>{name}</span>
            </p>
            <form action={formAction}>
                <input
                    type="text"
                    name="name"
                    required
                />
                <button type="submit">Update</button>
            </form>
        </>
    )
}

ref 作为 prop（无forwardRef）

在 React 19 中，您可以像任何其他 prop 一样传递 refs，这会导致 forwardRef 被弃用。这简化了组件代码并使引用处理变得轻而易举。 ？

import { useActionState } from "react"
import { updateNameInDB } from "../api/user"

export default function App() {
    const [user, formAction, isPending] = useActionState(insertName, {
        name: "John Doe",
        error: null
    })

    async function insertName(prevState, formData){
        try {
            const response = await updateNameInDB(formData.get("name"))
            return {name: response.name}
        }catch(error){
            return {...prevState, error: error.error}
        }
    }

    return (
        <>
            {user?.name && (
                <p>



<p>How this hook works is described with reference to the example:</p>

<ol>
<li><p>The first argument of the useActionState hook is the "Action" function, which is defined here as insertName.</p></li>
<li><p>The second argument is the initial state, which is accessible through the first element of the result array. In this example, the initial state includes name and error, and the state is represented as user in the component.</p></li>
<li><p>The insertName function returns the updated state. If the operation is successful, it updates the name property. If an error occurs, it updates the error property while preserving the rest of the previous state.</p></li>
<li>
<p>The result of the useActionState hook is an array with three elements:</p>

<ul>
<li>The current state (user): Reflects the latest state of the data.</li>
<li>A dispatchable function (formAction): Triggers the action when called, as seen in the form element's action attribute.</li>
<li>A pending state (isPending): Tracks whether the action is currently in progress, useful for managing transitions or loading indicators.</li>
</ul>
</li>
</ol>

<h2>
  
  
  New Hook: useOptimistic
</h2>

<p>When it’s performing a data mutation and to show the final state right after the user instructs (could be a tap on a button) or you could say optimistically while the async request is underway, you need to use this hook. Here is a demonstration how you can do this:<br>
</p>

<pre class="brush:php;toolbar:false">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>
  );
}

React 团队决定在即将推出的版本中弃用forwardRef。

反应服务器组件

顺便说一句，React 服务器组件 (RSC) 是一个支持服务器端渲染的 React 功能，但是像 Next.js 这样的框架已经接受了 RSC，并将它们无缝集成到他们的工作流程中。如果你是这个生态系统的新手，请先弄清楚这一点，然后再开始研究它的机制。

React Server Components 是 React 19 中引入的一项新功能，它允许我们创建在服务器上运行的无状态 React 组件。

由于 React Server 组件能够在 Web 服务器上运行，因此它们可以用于访问数据层，而无需与 API 交互！

// Before Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    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>
  );
}

有了这个，我们不必公开 API 端点或使用额外的客户端获取逻辑将数据直接加载到我们的组件中。所有数据处理都在服务器上完成。

请记住，服务器组件在服务器上运行，而不是在浏览器上运行。因此，他们无法使用传统的 React 组件 API，例如 useState。为了向 React 服务器组件设置引入交互性，我们需要利用客户端组件来补充服务器组件来处理交互性。

使用 React 服务器组件时，“使用客户端”表示该组件是客户端组件，这意味着它可以管理状态、处理用户交互以及使用特定于浏览器的 API。该指令明确告诉 React 框架和捆绑器将该组件与服务器组件区别对待，服务器组件是无状态的并在服务器上运行。

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

另一方面，React 服务器组件是默认的，因此我们不会在服务器组件文件的顶部声明“使用服务器”。相反，“use server”应该仅用于标记可以从客户端组件调用的服务器端函数。

export default function App() {
    const [name, setName] = useState(
        () => JSON.parse(localStorage.getItem("name")) || "Anonymous user"
    )

    async function formAction(formData){
        try {
            const newName = await updateNameInDB(formData.get("name"))
            setName(newName)
        }
    }

    return (
        <>
            <p className="username">
                Current user: <span>{name}</span>
            </p>
            <form action={formAction}>
                <input
                    type="text"
                    name="name"
                    required
                />
                <button type="submit">Update</button>
            </form>
        </>
    )
}

我认为这个例子很好地阐明了这一点。

结论

React 19 仍称为 React Canary。因此，将其用于生产并不是一个好主意。但用 React 19 拥抱未来，让你的开发体验更顺畅、更愉快。

以上是新的 React 带来了什么 - 获得清晰的了解的详细内容。更多信息请关注PHP中文网其他相关文章！