React Hooks 的优势和使用场景

# React Hooks 的优势和使用场景

## 1. React Hooks 的核心优势

### 1.1 简化组件逻辑
Hooks 允许在不编写 class 的情况下使用 state 和其他 React 特性。通过将相关逻辑拆分到独立的 Hook 中，可以显著减少代码量：

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

  render() {
    return (
      <button onClick={() => this.setState({ count: this.state.count + 1 })}>
        Count: {this.state.count}
      </button>
    );
  }
}

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

1.2 更好的逻辑复用

Hooks 解决了高阶组件和渲染属性带来的"嵌套地狱"问题。自定义 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 更细粒度的代码组织

Hooks 允许按照功能而非生命周期方法来组织代码，相关逻辑可以集中在一起：

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]);

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

2. 主要 Hooks 的使用场景

2.1 useState

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

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

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

  return (
    <form>
      <input value={name} onChange={e => setName(e.target.value)} />
      <input 
        type="number" 
        value={age} 
        onChange={e => setAge(Number(e.target.value))}
      />
    </form>
  );
}

2.2 useEffect

处理副作用操作，适用于：

• 数据获取
• 订阅事件
• 手动修改 DOM

function DataFetcher({ url }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let mounted = true;
    
    async function fetchData() {
      const response = await fetch(url);
      const result = await response.json();
      if (mounted) {
        setData(result);
        setLoading(false);
      }
    }

    fetchData();
    
    return () => {
      mounted = false;
    };
  }, [url]);

  if (loading) return <div>Loading...</div>;
  return <div>{JSON.stringify(data)}</div>;
}

2.3 useContext

简化上下文使用，适用于：

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

const ThemeContext = React.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