React Hooks 的优势和使用场景

# React Hooks 的优势和使用场景

## 1. React Hooks 的核心优势

### 1.1 简化组件逻辑
Hooks 允许在不编写 class 的情况下使用 state 和其他 React 特性。通过将相关逻辑拆分为更小的函数，而不是强制按生命周期方法拆分，使代码更易于理解和维护。

```jsx
// Class 组件
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return <button onClick={this.handleClick}>{this.state.count}</button>;
  }
}

// 使用 Hooks 的函数组件
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

1.2 更好的代码复用

自定义 Hook 可以提取组件逻辑到可重用的函数中，解决了高阶组件和渲染 props 带来的"嵌套地狱"问题。

// 自定义 Hook
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;
}

// 在多个组件中使用
function MyComponent() {
  const width = useWindowWidth();
  return <div>Window width: {width}</div>;
}

1.3 更直观的副作用管理

useEffect 将相关副作用代码组织在一起，比 class 组件中分散在不同生命周期方法中的代码更易于理解。

// 组合相关副作用
function FriendStatus({ friendId }) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    
    ChatAPI.subscribeToFriendStatus(friendId, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendId, handleStatusChange);
    };
  }, [friendId]); // 仅在 friendId 变化时重新订阅
}

2. 主要 Hooks 的使用场景

2.1 useState

管理组件内部状态，适用于:

• 表单输入控制
• UI 开关状态
• 简单的计数器等

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 ignore = false;
    
    async function fetchData() {
      const result = await fetchData(id);
      if (!ignore) setData(result);
    }
    
    fetchData();
    return () => { ignore = true; };
  }, [id]);
}

2.3 useContext

简化 context 使用，适用于:

• 主题切换
• 用户认证信息
• 全局配置

const ThemeContext = React.createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>按钮</button>;
}

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, []);
  
  return (
    <div>
      {todos.map((todo, i) => (
        <div key={i}>
          {todo.text}
          <button onClick={() => dispatch({type: 'toggle', index: i})}>
            T