📌 什么是 React Hooks？

React Hooks 是 React 16.8 引入的特性，允许在函数组件中使用状态和生命周期功能。核心 Hooks 包括：

  • ✅ useState：管理组件状态
  • ✅ useEffect：处理副作用（如数据获取、订阅等）
  • ✅ useContext：访问 React Context
  • ✅ useReducer：替代 Redux 的状态管理方案
  • ✅ useRef：创建可变引用对象

🧩 示例代码：计数器组件

import React, { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const [isRunning, setIsRunning] = useState(false);
  
  useEffect(() => {
    if (isRunning) {
      const interval = setInterval(() => {
        setCount(prev => prev + 1);
      }, 1000);
      return () => clearInterval(interval);
    }
  }, [isRunning]);
  
  return (
    <div>
      <h2>当前计数：{count}</h2>
      <button onClick={() => setIsRunning(!isRunning)}>
        {isRunning ? '停止计数' : '开始计数'}
      </button>
    </div>
  );
}

📚 扩展阅读

想深入了解 Hooks 的高级用法？可以访问 React 官方文档 获取最新指南。对于性能优化技巧，推荐查看 useMemo 与 useCallback 实践 页面。

📷 相关图片

react_hooks