React Hooks 的优势和使用场景

# React Hooks 的优势和使用场景

## 1. React Hooks 的优势

### 1.1 简化组件逻辑
Hooks 允许在不编写 class 的情况下使用 state 和其他 React 特性。这使得函数组件能够拥有类组件的功能，同时保持简洁性。

```jsx
// 类组件
class Counter extends React.Component {
  state = { count: 0 };
  
  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

// 函数组件 + Hooks
function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

1.2 更好的代码复用

Hooks 使得逻辑复用更加容易。自定义 Hook 可以将组件逻辑提取到可重用的函数中。

// 自定义 Hook
function useCounter(initialValue) {
  const [count, setCount] = useState(initialValue);

  const increment = () => {
    setCount(count + 1);
  };

  return { count, increment };
}

// 使用自定义 Hook
function CounterA() {
  const { count, increment } = useCounter(0);
  return <button onClick={increment}>Count: {count}</button>;
}

function CounterB() {
  const { count, increment } = useCounter(10);
  return <button onClick={increment}>Count: {count}</button>;
}

1.3 更清晰的副作用管理

useEffect 将生命周期方法（如 componentDidMount、componentDidUpdate 和 componentWillUnmount）统一为一个 API。

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 相当于 componentDidMount
    fetchData().then(data => setData(data));

    // 相当于 componentWillUnmount
    return () => {
      cancelRequest();
    };
  }, []); // 空数组表示只在组件挂载时执行

  return <div>{data}</div>;
}

1.4 更灵活的 state 管理

useReducer 提供了更复杂的 state 管理方式，适合处理包含多个子值的 state 对象。

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

2. React Hooks 的使用场景

2.1 状态管理

useState 是最常用的 Hook，适用于管理简单的组件状态。

function Form() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  return (
    <form>
      <input value={name} onChange={e => setName(e.target.value)} />
      <input value={email} onChange={e => setEmail(e.target.value)} />
    </form>
  );
}

2.2 副作用处理

useEffect 适用于处理数据获取、订阅、手动 DOM 操作等副作用。

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser(userId).then(userData => setUser(userData));
  }, [userId]); // 当 userId 变化时重新获取数据

  if (!user) return <div>Loading...</div>;

  return <div>{user.name}</div>;
}

2.3 性能优化

useMemo 和 useCallback 可用于优化性能，避免不必要的计算和重新渲染。

function ExpensiveComponent({ list }) {
  const sortedList = useMemo(() =>