DayDreamerBlog

Appearance

新概念：Actions ​

useActionState ​

tsx
const [error, submitAction, isPending] = useActionState(
  async (previousState, newName) => {
    const error = await updateName(newName);
    if (error) {
      // 你可以返回操作的任何结果。
      // 这里，我们只返回错误。
      return error;
    }

    // 处理成功的情况。
    return null;
  },
  null,
);

（DOM）action 和 formAction 属性 ​

（DOM）useFormStatus ​

useFormStatus 读取父表单的状态，就像父表单是一个Context Provider一样。

tsx
function DesignButton() {
  const {pending} = useFormStatus();
  return <button type="submit" disabled={pending} />
}

useOptimistic ​

tsx
[
  optState, // 乐观状态
  dispatchOptimisticValue // 派发新乐观值
] = useOptimistic(
  state, // 初始时和没有挂起操作时要返回的值
  (currentState
   , optimisticValue // 被派发的新乐观值，用于让乐观值跟上正确的同步
  ) => {
    return mergedState // 根据情况处理新的值，然后返回处理后的新状态作为乐观值	
  }
)

由于莫名奇妙的原因，反正就莫名奇妙出bug，我觉得难用得一批。

ref传入子组件的方式变更 ​

原先通过forwardRef包裹子组件，使其能在props后接受接受一个ref参数

在react19中则直接可以传到props里面了

元数据支持提升 ​

https://zh-hans.react.dev/blog/2024/12/05/react-19#support-for-metadata-tags

use ​

一个让你可以使用promise资源或者context资源的api，并且允许在分支循环中使用，常与Suspense，ErrorBoundary集成使用

https://zh-hans.react.dev/reference/react/use#