React Hooks 的优势和使用场景

# React Hooks 的优势和使用场景

## 1. React Hooks 的核心优势

### 1.1 逻辑复用更简单
- 传统方案：高阶组件(HOC)和render props会导致"嵌套地狱"
- Hooks方案：自定义Hook可提取组件逻辑，实现干净复用
```javascript
// 自定义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.2 代码组织更清晰

• 传统class组件：相关逻辑分散在不同生命周期
• Hooks组件：按功能组织代码，相关逻辑集中处理

function UserProfile({ userId }) {
  // 用户数据相关逻辑
  const [user, setUser] = useState(null);
  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [userId]);

  // 用户偏好设置相关逻辑
  const [preferences, setPreferences] = useState({});
  useEffect(() => {
    fetchPreferences(userId).then(setPreferences);
  }, [userId]);

  // 渲染逻辑
  if (!user) return <Loading />;
  return <Profile user={user} preferences={preferences} />;
}

1.3 学习成本更低

• 无需掌握class的this绑定问题
• 无需理解复杂的生命周期方法
• 函数式编程思维更符合现代JS发展趋势

2. 常用Hooks使用场景

2.1 useState - 状态管理

适用场景：

• 组件内部状态管理
• 表单控件状态
• 简单的UI状态切换

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

2.2 useEffect - 副作用处理

适用场景：

• 数据获取
• 事件监听
• DOM操作
• 定时器管理

function DataFetcher({ url }) {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    let isMounted = true;
    fetch(url)
      .then(res => res.json())
      .then(data => isMounted && setData(data));
    
    return () => { isMounted = false };
  }, [url]);

  return data ? <DataView data={data} /> : <Loading />;
}

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' }}>
    Current theme: {theme}
  </div>;
}

2.4 useReducer - 复杂状态逻辑

适用场景：

• 状态逻辑复杂
• 下一个状态依赖前一个状态
• 需要可预测的状态更新

function todosReducer(state, action) {
  switch (action.type) {
    case 'add':
      return [...state, { text: action.text, completed: false }];
    case 'toggle':
      return state.map((todo, i) => 
        i === action.index ? {...todo, completed: !todo.completed} : todo
      );
    default:
      return state;
  }
}

function TodoList() {
  const [todos, dispatch] = useReducer(todosReducer, []);
  
  function handleAdd(text) {
    dispatch({ type: 'add', text });
  }

  // 渲染逻辑...
}

3. 高级Hooks应用场景

3.1 useMemo - 性能优化

适用场景：

• 计算昂贵的值
• 避免子组件不必要的重渲染

function ExpensiveComponent({ a, b }) {
  const result = useMemo(() => {
    // 复杂计算
    return computeExpensiveValue(a, b