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

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

  1. 渲染性能提升,
  2. 新的hook
  3. 对服务端组件的支持更加好等等。。。

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

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

useActionState

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

1. 钩子定义

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

2. 状态管理

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

3. 函数组合

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

4. 返回值

返回 errorsubmitAction 函数和 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;

步骤解析:

  1. 初始化状态

    • error:初始错误状态(默认为 null)。
    • isPending:表示异步操作是否在进行中。
    • currentStatepreviousStateRef:用于管理当前和前一个状态。
  2. submitAction 函数

    • 设置 isPendingtrue,并重置错误状态。

    • 调用 action 函数,并传递 previousStateRef.current 作为前一个状态。

    • 根据 action 的返回值:

      • 如果 result 为真值,表示有错误,调用 setError(result)
      • 如果 result 为假值,表示操作成功,可能会通过 updateCurrentState 更新 currentState
    • 捕获异常并设置错误状态。

    • 最后,将 isPending 设置回 false

  3. updateCurrentState 函数

    • 更新 previousStateRef.current 为当前的 currentState
    • 更新 currentState 为新的状态值。

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

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

啥也不是,散会。

相关推荐
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic5 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā5 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年6 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder7 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727577 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架