# React Hooks 的优势和使用场景
## 1. React Hooks 的核心优势
### 1.1 简化组件逻辑
Hooks 允许在不编写 class 的情况下使用 state 和其他 React 特性。通过将相关逻辑拆分为更小的函数，而不是强制按生命周期方法拆分，使代码更易于理解和维护。
```jsx
// 使用 useState 管理状态
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
);
}
1.2 复用状态逻辑
自定义 Hook 可以提取组件逻辑到可重用的函数中，解决了高阶组件和渲染属性模式带来的"嵌套地狱"问题。
// 自定义 useWindowSize Hook
function useWindowSize() {
const [size, setSize] = useState({
width: window.innerWidth,
height: window.innerHeight
});
useEffect(() => {
const handleResize = () => setSize({
width: window.innerWidth,
height: window.innerHeight
});
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return size;
}
1.3 减少代码量
相比 class 组件，函数组件+Hooks 通常可以减少约30%的代码量，同时保持相同的功能。
2. 主要 Hooks 的使用场景
2.1 useState
管理组件内部状态，适用于:
- 表单输入控制
- 开关状态管理
- 简单计数器等场景
function Form() {
const [name, setName] = useState('');
return (
<input value={name} onChange={e => setName(e.target.value)} />
);
}
2.2 useEffect
处理副作用操作，适用于:
- 数据获取
- 订阅/取消订阅
- 手动修改DOM
- 定时器管理
function DataFetcher({ id }) {
const [data, setData] = useState(null);
useEffect(() => {
let isMounted = true;
fetchData(id).then(data => {
if(isMounted) setData(data);
});
return () => { isMounted = false; };
}, [id]);
return <div>{data}</div>;
}
2.3 useContext
访问上下文，适用于:
- 主题切换
- 多语言支持
- 全局状态共享
const ThemeContext = createContext('light');
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar() {
const theme = useContext(ThemeContext);
return <div style={{ background: theme === 'dark' ? '#333' : '#fff' }} />;
}
2.4 useReducer
管理复杂状态逻辑，适用于:
- 表单多字段验证
- 状态机实现
- 复杂业务逻辑
function todosReducer(state, action) {
switch (action.type) {
case 'add':
return [...state, action.payload];
case 'delete':
return state.filter(todo => todo.id !== action.payload);
default:
return state;
}
}
function Todos() {
const [todos, dispatch] = useReducer(todosReducer, []);
return (
<div>
<button onClick={() => dispatch({ type: 'add', payload: { id: Date.now() }})}>
Add Todo
</button>
</div>
);
}
3. 高级 Hooks 应用场景
3.1 useMemo
性能优化，适用于:
- 复杂计算缓存
- 避免不必要的重新渲染
function ExpensiveComponent({ a, b }) {
const result = useMemo(() => computeExpensiveValue(a, b), [a, b]);
return <div>{result}</div>;
}
3.2 useCallback
函数引用优化，适用于:
- 防止子组件不必要的重新渲染
- 依赖函数引用的效果
function Parent() {
const [count, setCount] = useState(0);
const increment = useCallback(() => setCount(c => c + 1), []);
return <Child onClick={increment} />;
}
