怎么说呢，

在实际项目中。开发者经常因为两类常见痛点而卡住：性能浪费和状态更新错误。下面通过完整示例和底层原理，帮助你彻底掌握 useState 的两大主要特性——惰性初始化和函数式更新。

一、惰性初始化：useState) vs useState=>fn)

示例代码

import { useState } from "react";function heavyComputation {
console.log;话说回来，const startTime = performance.now;说起来，const result =;for {
result.push;}
const duration = performance.now - startTime;console.log，return result;}
function App {
// 写法①：直接传入函数调用结果
// const = useState);// 写法②：惰性初始化 —— 只在首次挂载时执行一次
const = useState => heavyComputation);const = useState;const filteredUsers = users.filter);不过，return (


使用者列表
 setFilterText}
/>

当前显示 {filteredUsers.length} 个使用者



{filteredUsers.map(user => (

{user.name}
))}


);}
export default App;

两种写法的执行时机

再看写法，useState)

• 每次组件渲染都会先执行 heavyComputation
• 说到首次渲染。函数运行 → 返回结果 → 存入 state ✅
• 后续任意一次重渲染仍会调用 heavyComputation
• 代价：昂贵计算被重复执行，造成性能浪费。

说到写法，useState => heavyComputation)

惰性初始化

• 仅在组件首次挂载时执行一次回调函数。
• 后续任意次数重渲染均不会 调用该回调。
• React 在初始化 state 时调用函数，以后直接跳过。

React 底层规则

使用场景建议

二、函数式更新：setCount` vs `setCount

计数器示例代码

import { useState } from 'react';function App {
const = useState;const addCount = => {
// 方式 A：直接传入新值
// setCount;// setCount，// setCount;// 方式 B：传入更新函数
setCount;setCount，setCount;console.log，// 永远是旧值
};return (
<>

至于当前计数，{count}
+
);}
export default App;

两种方式的结果对比

// 连续三次
setCount;setCount，setCount;// 结果：+ ❌

// 连续三次
setCоunt;setCоunt，setCоunt;说起来，// 结果：+ + +  ✅
​ 

​