上手指南
Hooks 列表
后期规划
上手指南
Hooks 列表
后期规划
简体中文

useRafState

Tags:
State

一个使用 requestAnimationFrame 在下一帧更新状态以获得更好性能的 React Hook，功能类似于 React.useState，只是更新时机不同。

场景

  • 动画场景优化: 用于在动画或帧绘制中提高性能，只在下一帧更新状态
  • 高频事件处理: 例如滚动、拖拽时减少状态更新频率，防止性能损耗
  • ...

演示

源码
Count:
0

用法

// 在需要优化性能的场景中使用 const [state, setState] = useRafState({ isScrolling: false }) // 可以使用从 `useSafeState` 继承而来的 `deep` 选项进一步减少渲染，从而优化性能 const [{ x, y }, setPosition] = useRafState({ x: 0, y: 0 }, { deep: true })

源码

点击下方链接跳转 GitHub 查看源代码。

🪝 Hook🎨 Demo📄 Document

API

const [state, setState] = useRafState(initialState, options)

初始状态 InitialState

与 React.useState 相同。

选项 Options

更多详情参见 useSafeState#options。

返回值

与 React.useState 相同。