精读React hooks（一）：useState 的几个基础用法和进阶技巧
💡
原文中文，约3800字，阅读约需9分钟。
📝
内容提要
React Hooks为我们提供了全新的编写和思考React组件的方式，本文介绍了useState Hook的基本用法，包括懒初始化和函数式更新，同时讨论了在状态中存储函数的场景和正确的做法。
🎯
关键要点
- React Hooks自v16.8版本以来提供了新的组件编写和思考方式。
- useState Hook用于给组件添加状态变量，必须在组件顶层或自定义Hooks中调用。
- 懒初始化可以通过函数传递给useState，仅在初次渲染时执行。
- 当新状态依赖于前一个状态时，推荐使用函数式更新以确保更新准确性。
- 对象和数组的更新需要创建新的引用，不能直接修改原状态。
- 将函数存储到state中是少见的做法，但在某些情况下是必要的。
- 正确的做法是使用箭头函数包裹函数以存储到状态中。
- 可能需要将函数存储为状态的场景包括可配置行为、动态创建的函数、回调和外部交互、延迟执行的函数以及与第三方库的集成。
❓
延伸问答
useState Hook 的基本作用是什么？
useState Hook 用于给组件添加状态变量，必须在组件的顶层或自定义 Hooks 中调用。
什么是懒初始化，如何在 useState 中使用？
懒初始化是通过函数传递给 useState，仅在初次渲染时执行，而非每次渲染。
在什么情况下应该使用函数式更新？
当新状态依赖于前一个状态时，推荐使用函数式更新以确保更新准确性。
如何正确更新对象和数组的状态？
更新对象和数组时需要创建新的引用，不能直接修改原状态。
将函数存储到状态中有什么注意事项？
将函数存储到状态中时，需使用箭头函数包裹函数，以确保正确存储。
存储函数到状态中的应用场景有哪些？
可能的场景包括可配置行为、动态创建的函数、回调和外部交互、延迟执行的函数以及与第三方库的集成。
➡️
