react 19 新hook，useActionState，你了解如何使用么？你回答了解了。那么你会自己实现么？你可能不会！

react 19版本 正式推出没有多久，新的特性也非常多，比如

渲染性能提升，
新的hook
对服务端组件的支持更加好等等。。。

废话不多说，这篇文章不是介绍它们如何使用的，官方链接（react.dev/reference/r...)

正如标题所说的，你可能比任何人都提前知道了新的hook的使用以及使用场景。但不知道你有没有尝试从0-1实现一下新的hook，探究一下它可能的实现原理或者有没有可能设计一个更加符合自己实际业务场景的。

useActionState

在 React 19 中，新的 useActionState 钩子简化了异步操作的处理方式，提升了可用性和性能。以下是useActionState 的一个基本实现概要：

1. 钩子定义

useActionState 钩子旨在管理异步操作的状态，包括错误处理和待处理状态。它支持乐观更新并与表单提交无缝集成。

2. 状态管理

使用 React 的 useState 来跟踪 error（错误）和 isPending（待处理）状态。

3. 函数组合

钩子接受一个异步操作函数，并管理其执行和结果。

4. 返回值

返回 error、submitAction 函数和 isPending 状态。

还返回 currentState, upateCurrentState, previousStateRef （这个与官方设计不一样）

实现示例

以下是一个基于描述的 useActionState 钩子的基本实现示例：

js 复制代码

import { useState, useCallback, useRef } from 'react';

function useActionState(action, initialError = null, initialState = null) {
  const [error, setError] = useState(initialError);
  const [isPending, setIsPending] = useState(false);
  
  // 使用 useRef 存储前一个状态
  const previousStateRef = useRef(initialState);
  
  const [currentState, setCurrentState] = useState(initialState);

  const submitAction = useCallback(
    async (...args) => {
      setIsPending(true);
      setError(initialError);
      try {
        // 传递 previousStateRef.current 作为前一个状态
        const result = await action(previousStateRef.current, ...args);
        if (result) {
          setError(result); // 如果有错误，设置错误状态
        } else {
          // 假设 action 成功后会更新 currentState
          // 例如，action 可以返回新的状态值
          // 这里假设 action 内部已经处理了 state 的更新
        }
      } catch (err) {
        setError(err.message || '发生了意外错误');
      } finally {
        setIsPending(false);
      }
    },
    [action, initialError]
  );

  // 更新当前状态并同步更新 previousStateRef
  const updateCurrentState = useCallback(
    (newState) => {
      previousStateRef.current = currentState; // 先将 currentState 赋值给 previousStateRef
      setCurrentState(newState); // 然后更新 currentState
    },
    [currentState]
  );

  return [error, submitAction, isPending, currentState, updateCurrentState, previousStateRef];
}

export default useActionState;

步骤解析：

初始化状态：
- error：初始错误状态（默认为 null）。
- isPending：表示异步操作是否在进行中。
- currentState 和 previousStateRef：用于管理当前和前一个状态。
submitAction 函数：
- 设置 isPending 为 true，并重置错误状态。
- 调用 action 函数，并传递 previousStateRef.current 作为前一个状态。
- 根据 action 的返回值：
  - 如果 result 为真值，表示有错误，调用 setError(result)。
  - 如果 result 为假值，表示操作成功，可能会通过 updateCurrentState 更新 currentState。
- 捕获异常并设置错误状态。
- 最后，将 isPending 设置回 false。
updateCurrentState 函数：
- 更新 previousStateRef.current 为当前的 currentState。
- 更新 currentState 为新的状态值。

这篇我们尝试实现了一个useActionState，以及讲解了它可能的实现原理，以及如何根据实际使用场景定制一个符合自己的版本。

如果文章对你有帮助，请点个赞支持一下！

啥也不是，散会。