React Hooks是什么？useState和useEffect怎么用？

React Hooks 是 React 16.8 推出的革命性特性，让函数组件首次具备了管理状态（通过 useState）和处理副作用（通过 useEffect）的能力，彻底摆脱了 class 组件的复杂生命周期。useState 简洁高效地声明和更新多个独立状态，支持惰性初始化；useEffect 则统一封装数据获取、事件监听、DOM 操作等副作用逻辑，通过依赖数组精准控制执行时机，并内置清理机制避免内存泄漏——比如一个计数器不仅能实时渲染数字，还能自动同步更新页面标题。掌握这两个核心 Hook，你就能写出更简洁、可读性更强、逻辑更内聚的现代 React 代码。

React Hooks 是 React 16.8 引入的一组函数，让函数组件也能使用状态（state）和副作用（side effects），不用写 class 组件。

useState：管理组件的本地状态

它让你在函数组件里声明一个状态变量，并提供更新它的函数。

基本用法是解构出状态值和设置器函数：

这里 count 是当前状态值，setCount 是修改它的函数，初始值是 0。

• 每次调用 setCount（比如 setCount(count + 1)），组件会重新渲染，且 count 取得新值
• 可以多次调用 useState 管理多个独立状态，比如同时有 name 和 age
• 初始值可以是任意类型（数字、字符串、对象、数组），甚至可以是函数（用于惰性初始化）：useState(() => computeInitialValue())

useEffect：处理副作用（如数据获取、订阅、手动 DOM 操作）

它替代了 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合逻辑。

基本结构：

• 不传第二个参数：每次渲染后都执行（含首次）——慎用，容易导致无限循环或性能问题
• 传空数组 []：只在组件挂载和卸载时执行（类似 componentDidMount + componentWillUnmount）
• 传非空数组（如 [count]）：仅当数组中某个值变化时才重新执行
• 清理函数会在下次 effect 运行前或组件卸载时执行，用来清除定时器、取消请求、移除监听等

一个小例子：计数器 + 页面标题同步

把 count 显示在界面上，同时让 document.title 随之更新：

基本上就这些。Hooks 让逻辑更聚焦、复用更容易，但要注意依赖数组别漏写、别写错，否则容易出 bug。

理论要掌握，实操不能落！以上关于《React Hooks是什么？useState和useEffect怎么用？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！