SuperAPI AI 工具集

rerender-lazy-state

通用与其它

查看项目

更新于 10-16 02:32

技能介绍

用途:优化 React 组件在渲染时的初始值计算,避免每次渲染都重复执行昂贵逻辑。

主要能力:资料说明 useState 支持传入函数形式,使初始化逻辑只在初始渲染时执行一次;若直接传入已计算好的值,初始化表达式会随每次渲染重新求值,即便该值只被使用一次。

必要用法:将昂贵初始化逻辑包在函数中传给 useState,例如 const [searchIndex, setSearchIndex] = useState(() => buildSearchIndex(items)),以及 const [settings, setSettings] = useState(() => { const stored = localStorage.getItem('settings'); return stored ? JSON.parse(stored) : {} })。错误写法是直接写 useState(buildSearchIndex(items)) 或 useState(JSON.parse(localStorage.getItem('settings') || '{}')),这会导致每次都重新计算。

适用场景:从 localStorage/sessionStorage 计算初始值、构建索引或映射等数据结构、读取 DOM、以及执行较重转换时使用惰性初始化。

限制:对于简单原始值 useState(0)、直接引用 useState(props.value) 或低成本字面量 useState({}),无需函数形式。资料未提供安装方式、依赖、代码示例以外的实现细节或价格信息。