DEV Community
·
useState 和 useEffect
💡
原文英文，约1300词，阅读约需5分钟。
📝
内容提要
本文介绍了React的两个重要hooks：useState和useEffect。useState用于在函数组件中管理状态，返回当前状态和更新函数；useEffect用于处理副作用，如数据获取和DOM更新。使用时需注意依赖数组和避免条件调用，以防止错误和性能问题。
🎯
关键要点
- React Hooks 是特殊函数，让你在函数组件中使用状态和生命周期方法。
- useState 用于为函数组件添加状态，返回当前状态和更新函数。
- 使用 useState 时，必须在组件体内调用，不能在条件块或嵌套函数中使用。
- useEffect 处理副作用，如数据获取和 DOM 更新，依赖数组控制副作用的运行时机。
- useEffect 的依赖数组为空时只在组件挂载时运行，指定依赖时仅在依赖变化时运行。
- 常见错误包括遗漏依赖和在副作用中更新状态导致无限循环。
- 在使用 useState 更新对象时，需使用扩展运算符复制先前状态以避免覆盖。
- useEffect 可以用于条件效果和数据获取，确保在依赖变化时运行。
- 面试常见问题包括 hooks 的定义、useEffect 的依赖数组影响及清理效果的方法。
- 使用函数形式的 setState 确保每次更新基于最新状态。
- 未清理的 interval 会导致内存泄漏和对已卸载组件的状态更新警告。
❓
延伸问答
useState 的主要功能是什么？
useState 用于在函数组件中添加状态，返回当前状态和更新函数。
如何正确使用 useEffect？
useEffect 用于处理副作用，依赖数组控制副作用的运行时机，空数组时只在组件挂载时运行。
使用 useState 时常见的错误有哪些？
常见错误包括在条件块或嵌套函数中调用 useState，以及直接更新状态而不是使用 setState 函数。
useEffect 的依赖数组有什么作用？
依赖数组控制 useEffect 的运行时机，指定依赖时仅在依赖变化时运行，空数组时只在组件挂载时运行。
如何避免 useEffect 中的无限循环？
确保在 useEffect 中更新状态时正确设置依赖数组，以防止无限循环。
在面试中常见的关于 hooks 的问题有哪些？
常见问题包括 hooks 的定义、useEffect 的依赖数组影响及如何清理效果。
➡️
