本周，我们将讨论新的 React 19 更新和挂钩。在经历并使用了其中一些新更新后，我只能同意它简化了开发人员在构建应用程序（尤其是与交互式表单相关的应用程序）时所经历的一些严格活动。
加入我，让我们探索其中的一些新更新。
React 编译器：React 编译器选择您的 React 代码，将其转换为浏览器的 JavaScript 代码，并管理组件或用户界面的状态。这个独特的操作有助于优化应用程序的性能。
如果您熟悉 useMemo 钩子、useCallback 钩子和 React.Memo，您就会明白它们有助于记忆（存储值或函数以供将来使用）您的组件，因此它们不必重新编写当没有状态改变时渲染。当状态发生变化时，React 会重新渲染相关组件及其子组件，而当代码没有变化时，组件将保持原样，保留组件或钩子中的先前内存、值和状态以供将来使用用途；从而优化组件的性能。这正是 React 编译器自动执行的操作，无需手动调用任何上述钩子。
表单操作：使用React的最大优点之一是状态的管理和突变，这主要发生在我们使用时 元素。表单帮助我们更有效地创建和处理用户交互。
使用表单操作，您不需要像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 form Object 处理表单本身，而不是通过事件处理程序手动更改状态。
服务器组件：React 19 允许在捆绑之前在服务器上渲染组件，在与客户端应用程序或 SSR 服务器设置不同的环境中。 Server 组件与 SSR（服务器端渲染）不同，而是 React Server Components 中的一个独立的服务器环境。
此功能允许组件提前预渲染，从而实现快速内容显示并缩短加载时间。
元数据：React 19 允许灵活的元数据。开发者可以通过 DocumentHead 组件管理各个组件的 title、description 以及其他 meta 标签。这将有助于改善 SEO（搜索引擎优化）。
Const AboutUs = () => {
return (
<>
<title>Learn more about our company</title>
<meta name="AboutUs" description="You can find us on ..." />
// content
</>
);
}
登录后复制
React 19 有一系列新 钩子，一些是新的，另一些是对现有钩子的改进。下面我们就来讨论一下。
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) 个值的数组： state，如果状态发生突变，则为当前状态，一个新的操作（formAction）可以作为表单组件中的道具传递以调用服务器操作，并且 _isPending _that 返回一个 _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>
)
}
登录后复制
From this example, the incrementFunction adds 1 to the state every time the button is clicked. The initialState being 0, and then increases to 1 at the first click of the button, thereby changing the state to 1, and for every other click on the button adds 1 to the last state of the component.
useOptimistic() hook:
This is a new hook that allows users to see the outcome of their action even before the pages load completely. The pages are optimistically rendered to the user even when the server is still in its data fetching mode.
With the hope that data fetching will be successful, React displays the intended result to the client, and when data fetching fails, React reverts to the value of the previous state in order not to display incorrect data. This singular action helps in a seamless and fast display of data thereby improving user experience.
useFormStatus():
As the name implies, useFormStatus gives us the status of our form or form fields. This hook does not take in any parameter, but it sure returns 4 objects:
pending: This returns a boolean value: true or false. It returns true when the form is submitting, and false when the form is submitted.
data: When the form is successfully submitted, we can get the information of the user or object from the form field like this:
(formData.get("name"))
(formData.get("address"))
登录后复制
method: The default method of a form is GET, unless stated otherwise. We can get the method of our form with .method. When we are submitting a form, a string method property should be specified as a POST.
action: This is a reference to the function that will be passed to the action prop in our element.
The useFormStatus must always be called from a element or a component that is rendered inside a .
There's quite a few more updates that I can't really write about, so you don't get bored having to read so much. You can click on the React Docs Website to check out some of the other updates.
I hope you had a great time learning with me.
Do well to follow me if you enjoyed my articles.
Thanks, and have a great week ahead my friends.
以上是反应新的更新的详细内容。更多信息请关注PHP中文网其他相关文章！
