React Hooks 的优势和使用场景

# React Hooks 的优势和使用场景

## 核心优势

### 1. 简化组件逻辑
Hooks 允许在不编写 class 的情况下使用 state 和其他 React 特性。通过 `useState` 可以轻松管理组件状态：

```javascript
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

2. 逻辑复用能力

自定义 Hook 可以提取组件逻辑到可重用函数中，解决高阶组件和render props的嵌套问题：

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);
  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  return width;
}

3. 更细粒度的代码组织

相关逻辑可以集中在一起，而不是分散在不同的生命周期方法中：

function FriendStatus({ friendId }) {
  const [status, setStatus] = useState(null);

  // 替代componentDidMount和componentDidUpdate
  useEffect(() => {
    const handleStatusChange = (status) => setStatus(status);
    ChatAPI.subscribe(friendId, handleStatusChange);
    return () => ChatAPI.unsubscribe(friendId, handleStatusChange);
  }, [friendId]); // 仅在friendId变化时重新订阅
}

主要使用场景

1. 状态管理

useState 适用于简单的局部状态管理，useReducer 适合复杂状态逻辑：

function todosReducer(state, action) {
  switch (action.type) {
    case 'add':
      return [...state, { text: action.text, completed: false }];
    default:
      return state;
  }
}

function Todos() {
  const [todos, dispatch] = useReducer(todosReducer, []);
  // ...
}

2. 副作用处理

useEffect 统一处理副作用，替代生命周期方法：

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // 仅在count变化时执行

3. 性能优化

useMemo 和 useCallback 避免不必要的计算和渲染：

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]);

4. 访问DOM元素

useRef 可以获取DOM节点或保存可变值：

function TextInput() {
  const inputEl = useRef(null);
  const onButtonClick = () => inputEl.current.focus();
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus</button>
    </>
  );
}

最佳实践

1. 只在顶层调用Hooks：不要在循环、条件或嵌套函数中调用
2. 合理使用依赖数组：确保useEffect等Hook的依赖项完整
3. 自定义Hook命名规范：始终以"use"开头
4. 拆分复杂逻辑：将大型组件拆分为多个小型Hook
5. 使用eslint-plugin-react-hooks：自动检测Hooks规则违反

注意事项

1. 避免在class组件中使用Hooks
2. 不要有条件地调用Hook（如if语句中）
3. 对于复杂状态逻辑，优先考虑useReducer而非多个useState
4. 清除effect中的订阅和事件监听
5. 性能敏感场景使用useMemo/useCallback

总结

React Hooks通过以下方式改进开发体验：

• 简化组件结构
• 提高代码复用性
• 改善代码可读性
• 提供更灵活的状态管理
• 统一副作用处理方式

适用于：

• 新功能开发
• 重构class组件
• 提取可复用逻辑
• 优化组件性能
• 管理复杂状态