12、React Hooks：表单处理、UI阻塞避免与乐观更新实现

React Hooks：表单处理、UI阻塞避免与乐观更新实现

1. Action State Hook 介绍与使用

Action State Hook 的定义如下：

const [state, action, isPending] = useActionState(actionFn, initialState)

要定义一个 Action State Hook，至少需要提供一个函数作为参数。这个函数会在表单提交时被调用，其签名如下：

function actionFn(currentState, formData) {
  // ...
}

该动作函数的第一个参数是动作的当前状态，第二个参数是表单数据（作为一个 FormData 对象）。动作函数返回的任何内容都将成为 Action State Hook 的新状态。此外，还可以为 Action State Hook 提供一个初始状态。这个 Hook 会返回动作的当前状态、动作本身（传递给 <form> 元素）以及一个 isPending 状态，用于检查动作是否正在执行。

使用 Action State Hook 重构 CreatePost 组件的步骤如下：
1. 执行命令复制文件夹：

$ cp -R Chapter