精读React hooks（一）：useState 的几个基础用法和进阶技巧
内容提要
React Hooks为我们提供了全新的编写和思考React组件的方式，本文介绍了useState Hook的基本用法，包括懒初始化和函数式更新，同时讨论了在状态中存储函数的场景和正确的做法。
延伸解读
函数式更新：避免状态更新丢失的关键
文章通过对比示例说明，当新状态依赖于前一个状态时，直接使用 setAge(age + 1) 可能因闭包捕获旧值而导致多次调用只生效一次。而函数式更新 setAge(a => a + 1) 能确保每次更新基于最新状态，尤其在并发模式下更可靠。因此，在循环、事件处理或异步操作中更新状态时，应优先采用函数式形式。
不可变更新：对象与数组的正确操作方式
文章强调，更新对象或数组状态时必须创建新引用，而不是直接修改原状态。例如，更新表单字段应使用 setForm({ ...form, name: value })，添加数组项应使用 setTodos([...todos, newItem])。直接修改原状态（如 form.name = value 或 todos.push(...)）不会触发重新渲染，且可能导致难以追踪的 bug。
在状态中存储函数：罕见但必要的场景
文章指出，将函数存入 state 是少见做法，但某些场景下需要。错误方式是直接 setFn(someFunction)，这会将函数返回值存入状态；正确方式是使用箭头函数包裹：setFn(() => someFunction)。适用场景包括可配置行为、动态创建函数、回调与外部交互、延迟执行函数以及与第三方库集成。
Q&A
useState Hook 的基本作用是什么？
useState Hook 用于给组件添加状态变量，必须在组件的顶层或自定义 Hooks 中调用。
什么是懒初始化，如何在 useState 中使用？
懒初始化是通过函数传递给 useState，仅在初次渲染时执行，而非每次渲染。
在什么情况下应该使用函数式更新？
当新状态依赖于前一个状态时，推荐使用函数式更新以确保更新准确性。
如何正确更新对象和数组的状态？
更新对象和数组时需要创建新的引用，不能直接修改原状态。
将函数存储到状态中有什么注意事项？
将函数存储到状态中时，需使用箭头函数包裹函数，以确保正确存储。
存储函数到状态中的应用场景有哪些？
可能的场景包括可配置行为、动态创建的函数、回调和外部交互、延迟执行的函数以及与第三方库的集成。
