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 };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

// 使用 Hooks
function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

1.2 复用状态逻辑

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

// 自定义 Hook
function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  }, [friendID]);

  return isOnline;
}

// 在多个组件中使用
function FriendStatus(props) {
  const isOnline = useFriendStatus(props.friend.id);

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

1.3 更细粒度的代码组织

Hooks 允许根据代码的用途而不是生命周期方法来组织代码，使得相关代码能够紧密地放在一起。

function FriendStatusWithCounter(props) {
  const [count, setCount] = useState(0);
  
  // 计数器逻辑
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  const [isOnline, setIsOnline] = useState(null);
  
  // 好友状态逻辑
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  }, [props.friend.id]);

  // ...
}

1.4 更好的性能优化

Hooks 提供了 useMemo 和 useCallback 等 API，可以更精细地控制组件的重渲染。

function Parent() {
  const [count, setCount] = useState(0);
  
  // 使用 useCallback 避免不必要的重渲染
  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  return <Child onClick={increment} />;
}

const Child = React.memo(function Child({ onClick }) {
  console.log('Child render');
  return <button onClick={onClick}>Click me</button>;
});

2. React Hooks 的使用场景

2.1 状态管理

useState 是最基础的 Hook，用于在函数组件中添加局部 state。

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

  return (
    <form>
      <input
        type="text"
        value={name}
        onChange={e => setName(e.target.value)}
      />
      <p>Your name is: {name}</p>
    </form>
  );
}

2.2 副作用处理

useEffect 用于处理副作用，如数据获取、订阅、手动修改 DOM 等。

function DataFetcher({ id }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    let ignore = false;
    
    async function fetchData() {
      const response = await fetch(`/api/data/${id}`);
      const result = await response.json();
      if (!ignore) setData(result);
    }

    fetchData();
    
    return () =>