反应新的更新

本周，我们将讨论新的 react 19 更新和挂钩。在经历并使用了其中一些新更新后，我只能同意它简化了开发人员在构建应用程序（尤其是与交互式表单相关的应用程序）时所经历的一些严格活动。

加入我，让我们探索其中的一些新更新。

react 编译器：react 编译器选择您的 react 代码，将其转换为浏览器的 javascript 代码，并管理组件或用户界面的状态。这个独特的操作有助于优化应用程序的性能。

如果您熟悉 usememo 钩子、usecallback 钩子和 react.memo，您就会明白它们有助于记忆（存储值或函数以供将来使用）您的组件，因此它们不必在以下情况下重新渲染：没有状态变化。当状态发生变化时，react 会重新渲染相关组件及其子组件，而当代码没有变化时，组件将保持原样，保留组件或钩子中的先前内存、值和状态以供将来使用用途；从而优化组件的性能。这正是 react 编译器自动执行的操作，无需手动调用任何上述钩子。

表单操作：使用 react 的最大优点之一是状态的管理和突变，这主要发生在我们使用元素时。表单帮助我们更有效地创建和处理用户交互。

使用 form actions，您不需要像 onsubmit 和 onchange 这样的事件处理程序来实现数据的实时突变，相反，我们可以将 action 属性传递给

const myfunction = async (formdata) => {
  const [name, setname] = usestate("")

  const updatedname = await namechange(formdata.get("name"))
     setname(updatedname)
}

<form action={myfunction}>
   <input type="name" 
          name="name" _// this is important to be able to get our data //_
   />
   <button type="submit">submit</button>
</form>

通过这种方法，我们不需要应用usestate通过event.target.value来变异数据，而是在myfunction中我们可以通过参数获取变异数据。

这意味着我们必须从表单中的元素中设置一个 name 属性。使用此方法意味着我们允许react通过native react表单对象处理表单本身，而不是通过事件处理程序手动更改状态。

服务器组件：react 19 允许在捆绑之前在服务器上渲染组件，在与客户端应用程序或 ssr 服务器设置不同的环境中。 server 组件与 ssr（服务器端渲染）不同，而是 react server components 中的一个单独的服务器环境。
此功能允许组件提前预渲染，从而实现快速内容显示并缩短加载时间。

元数据：react 19 允许灵活的元数据。开发者可以通过 documenthead 组件管理各个组件的 title、description 以及其他 meta 标签。这将有助于改善 seo（搜索引擎优化）。

ImgGood

免费在线AI照片编辑器

下载

const aboutus = () => {
 return (
    <>
      <title>learn more about our company</title>
      <meta name="aboutus" description="you can find us on ..." />
      // content
    </>
  );
}

react 19 有一系列new 钩子，一些是新的，另一些是对现有钩子的改进。下面我们就来讨论一下吧。

use() 钩子：use 钩子是一个实验性 api，可以直接用于读取组件或钩子中 promise 或上下文的值（这是目前唯一已知的限制）。
use hook 非常通用，也可以用来代替 useeffect，因为它可以用于异步数据获取。这有助于
实现更整洁、简洁的代码块。

警告：它不是 useeffect 的替代品，因为它仍然有其自身的限制，_useeffect _将无限制地执行。

import {use} from "react"
const fetchdata = async () => {
    const response = await fetch("https://........");
    return response.json()
}

const userdata = () => {
    const user = use(fetchdata());

        return (
    <div classname='username'>{user.name}</div>
  );
}

useactionstate()：这是一个新的钩子，有助于管理状态更改。它有助于管理挂起状态、错误处理和最终状态
状态更新。 useactionstate _的工作方式与 _usereduce _in 类似，它接收两个 (2) 个参数：提交表单时要调用的函数和一个 _initialstate，它返回一个包含三 (3) 个值的数组：状态，即现在，如果状态发生突变，则为当前状态，一个新的操作（formaction）可以作为表单组件中的道具传递以调用服务器操作，如果表单已提交，则_ispending_将返回_boolean_value。

import { useactionstate } from "react";

async function incrementfunction(initialstate, formdata) {
  return initialstate + 1;
}

function statefulform({}) {
  const [state, formaction, ispending] = useactionstate(incrementfunction, 0);

  console.log(state);

  return (
    <form>
      <button formaction={formaction}>{state}</button>
    </form>
  )
}

在此示例中，每次单击按钮时，incrementfunction都会将1添加到状态。 initialstate 为 0，然后在第一次单击按钮时增加到 1，从而将 state 更改为 1，并且每次单击按钮都会为组件的最后一个状态添加 1。

useoptimistic() 钩子:

这是一个新的钩子，允许用户甚至在页面完全加载之前就可以看到其操作的结果。即使服务器仍处于数据获取模式，页面也会乐观地呈现给用户。

react 希望数据获取成功，向客户端显示预期的结果，当数据获取失败时，react 恢复到之前状态的值，以免显示错误的数据。这种独特的操作有助于无缝、快速地显示数据，从而改善用户体验。

useformstatus():

顾名思义，useformstatus为我们提供表单或表单字段的状态。这个钩子不接受任何参数，但它肯定返回 4 个对象：

pending：这会返回一个boolean值：true或false。当表单提交时返回true，当表单提交时返回false。

data：当表单提交成功后，我们可以从表单字段中获取用户或对象的信息，如下所示：

(formData.get("name"))
(formData.get("address"))

方法：除非另有说明，表单的默认方法是get。我们可以通过 .method 获取表单的方法。当我们提交表单时，应将字符串方法属性指定为post。

action：这是对将传递给 元素中的 action 属性的函数的引用。

元素或在 . 内呈现的组件调用 useformstatus