001.Hooks

React DOM 包含仅支持 Web（在浏览器 DOM 环境中运行）的 Hooks。这些 Hook 在 iOS、Android、Windows、canvas 等非 DOM 环境中不受支持

Form Hooks

useFormStatus（实验特性）

根据表单的状态更新 UI，提供上次表单提交的状态信息

const { pending, data, method, action } = useFormStatus()

• pending：Boolean。如果 true，意味着父级 <form> 正在等待提交，否则 false
• data：实现 FormData interface 的对象，其中包含父级 <form> 正在提交的数据
  • 如果没有主动提交或没有父级 <form>，则将为 null
• method：字符串值 'get' 或 'post'
  • 这表示父级 <form> 是使用 GET 还是 POST HTTP 方法提交
  • 默认情况下，<form> 将使用 GET 方法，并且可以通过 <form> 的 method 属性指定
• action：对传递给父级 <form> 上的 action prop 的函数的引用
  • 如果没有父级 <form>，则该属性为 null
  • 如果为 action prop 提供了 URI 值，或者未指定 action prop，则该属性为 null

举例：

function Form({ action }) {
  async function increment(n) {
    return n + 1;
  }
  const [count, incrementFormAction] = useActionState(increment, 0);
  return (
    <form action={action}>
      <button formAction={incrementFormAction}>Count: {count}</button>
      <Button />
    </form>
  );
}
 
function Button() {
  const { pending } = useFormStatus();
  return (
    <button disabled={pending} type="submit">
      Submit
    </button>
  );
}

注意：

• useFormStatus Hook 必须从在 <form> 子组件调用，useFormStatus 将仅返回父级 <form> 的状态信息