使用useOptimistic优雅实现状态预更新

useOptimistic

useOptimistic 是一个 React 钩子,能够让你在 React 中实现预更新功能。 触发这个钩子并不真正的修改 State 的内容,但是会刷新组件的UI

作用

optimistic 译为乐观,就是乐观的更新一个 state, 在一个异步操作中,我假定它的结果是好的,那我并不需要等待真正的结果返回,我就可以更新部分UI界面,以达到更好更快的交互和反馈体验。以往我们想要做这种操作是需要在失败时重置 state 的,略显麻烦, 且面临着更糟糕的性能问题,现在可以使用这个钩子实现

useOptimistic API 介绍

jsx 复制代码
const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);

参数: state: 状态数据,一般传入 useState() 产生的 State, updateFn: 更新 useOptimistic 的内部 State 的函数, 这个函数接受两个参数, 一个是当前的State, 一个是用于更新当前 State 的数据, 并且返回一个新的 State。

返回结果: optimisticState: 当前更新由 addOptimistic 触发引起时(此时置于 pendding 状态),这个值就是 updateFn 的返回值,其他情况下与传入的 state 相同。 addOptimistic: 这是一个函数, 用于触发 optimisticState 的值, 传入的参数就是 updateFn 的第二个参数

使用场景

比如说一个帖子的点赞数,在用户点击点赞之后,我们并不需要真正的等待接口返回点赞成功才更新实时的点赞数, 我们可以在用户点击的时候马上就更新UI 点赞数+1, 然后后面再处理接口返回的结果就可以了。大致的代码如下。

javascript 复制代码
async function likePulsOne() {
  await new Promise((resolve) => setTimeout(resolve, 1000))
  return true
}

export default function App() {
  const [postState, setPostState] = useState({
    like: 1,
    //...
  });
  const [optimisticPostState, updateOptimisticPostState] = useOptimistic(
    postState,
    (state, newValue) => {
      return {
        ...state,
        like: state.like + 1
      }
    }
  );
  async function postLike() {
    const postPulsLike = await likePulsOne();

    setPostState((postState) => ({
      ...postState,
      like: postState.like + 1
    }));
  }
  return <div>
    <p>{ optimisticPostState.like } </p>
    <button onClick = {async val => {
      updateOptimisticPostState()
      await postLike()
    }}> like </button>
  </div>
}

上面的例子中, 因为我们默认是+1 所以并没有用到 newValue 值。

基本原理

触发 addOptimistic 更新 optimisticState 之后,React 会自动注册下一个更新任务,在下一个更新任务执行之前(经测试,应是触发 addOptimistic的当前函数出栈(调用栈)之后, 所以一般与 async 函数匹配使用,放在同步函数中,效果转瞬即逝。), 若你传入的State 有更新, 则使用新的 state, 若没有,则采用原来的State ,看上去就好像回退了一样。所以若更新失败了,并不需要手动执行回退的操作。

注意,这个是 React 19 的新功能。

完 (: 广州前端有好坑位喊我一声啊😓

相关推荐
安分小尧1 小时前
[特殊字符] 使用 Handsontable 构建一个支持 Excel 公式计算的动态表格
前端·javascript·react.js·typescript·excel
ElasticPDF-新国产PDF编辑器1 小时前
React 项目 PDF 批注插件库在线版 API 示例教程
react.js·pdf·json
帅帅哥的兜兜2 小时前
react中hooks使用
前端·javascript·react.js
拉不动的猪11 小时前
刷刷题49(react中几个常见的性能优化问题)
前端·react.js·面试
小满zs14 小时前
React-router v7 第二章(路由模式)
前端·react.js
大莲芒14 小时前
react 15-16-17-18各版本的核心区别、底层原理及演进逻辑的深度解析--react18
前端·javascript·react.js
编程社区管理员15 小时前
「2025最新版React+Ant Design+Router+TailwindCss全栈攻略:从零到实战,打造高颜值企业级应用
前端·react.js·前端框架
gongzemin16 小时前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
黄毛火烧雪下18 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js