React Hooks通过useState和useEffect让函数组件可管理状态和副作用,简化逻辑复用与代码维护,实现“逻辑即组件”的理念。

React Hooks 让函数组件也能管理状态和复用逻辑,不再依赖类组件。这极大简化了状态管理的复杂度,让代码更直观、易维护。
使用 useState 管理局部状态
以前函数组件无法拥有状态,必须转为类组件。现在通过 useState 可以在函数组件中直接定义和更新状态。
例如:- 声明一个 count 状态变量和 setCount 更新函数:const [count, setCount] = useState(0);
- 点击按钮时调用 setCount(count + 1),视图自动更新
- 语法简洁,无需 this.state 和 this.setState 的冗长写法
用 useEffect 处理副作用
useEffect 统一处理数据获取、订阅或手动修改 DOM 等副作用,替代了类组件中的生命周期方法。
常见用法包括:- 组件挂载后请求 API:useEffect(() => { fetchData(); }, []);
- 监听某个状态变化时执行操作:useEffect(() => { console.log(value); }, [value]);
- 清理定时器或取消订阅:return () => clearTimeout(timer);
自定义 Hook 复用逻辑
可以把常用的状态逻辑提取成自定义 Hook,比如 useLocalStorage、useFetch,提升代码复用性。
立即学习“Java免费学习笔记(深入)”;
优势在于:- 多个组件共享同一套状态逻辑,无需高阶组件或 render props
- 逻辑独立于 UI,测试更方便
- 命名清晰,一眼看出功能用途










