React Hooks 的优势和使用场景

React Hooks 是 React 16.8 引入的重要特性，它让函数组件拥有了类组件的能力，同时提供了更简洁、更灵活的代码组织方式。以下是 React Hooks 的核心优势和使用场景：

1. 代码复用性提升

Hooks 通过自定义 Hook 实现了逻辑复用，解决了高阶组件和渲染属性带来的嵌套问题。例如，我们可以创建一个 useFetch Hook 来复用数据获取逻辑：

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

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

// 在多个组件中使用
function UserProfile() {
  const { data, loading } = useFetch('/api/user');
  // ...
}

2. 逻辑关注点分离

Hooks 允许按照功能而非生命周期方法来组织代码。例如，一个组件的订阅逻辑可以集中在一起：

function FriendStatus({ friendId }) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    const handleStatusChange = status => setIsOnline(status.isOnline);
    ChatAPI.subscribe(friendId, handleStatusChange);
    return () => ChatAPI.unsubscribe(friendId, handleStatusChange);
  }, [friendId]);

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

3. 简化复杂组件

Hooks 可以替代类组件中的 this、生命周期方法和状态管理，使代码更简洁。对比类组件和函数组件：

// 类组件
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.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>
  );
}

4. 常用 Hooks 使用场景

• useState: 管理组件内部状态
• useEffect: 处理副作用（数据获取、订阅等）
• useContext: 访问 React Context
• useReducer: 复杂状态逻辑管理
• useCallback: 记忆函数，优化性能
• useMemo: 记忆计算结果
• useRef: 访问 DOM 或存储可变值

5. 性能优化

Hooks 提供了细粒度的性能优化手段：

function ExpensiveComponent({ value }) {
  const computedValue = useMemo(() => {
    // 复杂计算
    return computeExpensiveValue(value);
  }, [value]); // 仅在 value 变化时重新计算

  const handleClick = useCallback(() => {
    // 事件处理
  }, []); // 创建一次，不会在每次渲染时重新创建

  return <div onClick={handleClick}>{computedValue}</div>;
}

6. 渐进式采用

Hooks 可以与现有代码共存，可以逐步迁移而无需重写整个应用。

7. 自定义 Hook 模式

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

// 使用
function MyComponent() {
  const { width, height } = useWindowSize();
  // ...
}

8. 测试友好性

Hooks 使组件更易于测试，因为逻辑可以独立于 UI 进行测试。

9. 未来兼容性

React 团队表示 Hooks 是 React 未来的发展方向，新特性将首先以 Hooks 形式提供。

10. 使用注意事项

• 只在 React 函数组件或自定义 Hook 中调用 Hooks
• 不要在循环、条件或嵌套函数中调用 Hooks
• 使用 ESLint 插件 eslint-plugin-react-hooks 确保规则遵守
• 复杂的业务逻辑建议使用 useReducer 而非多个 useState

Hooks 不仅简化了 React 代码，更重要的是改变了我们思考组件的方式，从生命周期导向转变为逻辑导向。这种模式更符合现代前端开发的趋势，能够更好地处理复杂应用的状态和副作用。