第三篇：【React 开发宝典】Hooks 带你飞！入门到精通必备技能大揭秘

Hooks 让前端开发起飞？别再用 Class 组件浪费生命了！

前端小伙伴们，你们是否还在被老旧的 Class 组件折磨？或者刚刚接触 React 却被各种生命周期搞得头晕脑胀？也许你已经听说过 Hook 是未来趋势，但还不确定要不要花时间学习？

今天，我们就带你揭秘 React Hooks 的神奇力量，让你的开发工作从此轻松无比！

1. 告别繁琐的 Class 组件：函数式组件的崛起

jsx 复制代码

// 旧世界：又臭又长的Class组件
class UserProfile extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      loading: true,
      error: null,
    };
    this.handleNameChange = this.handleNameChange.bind(this);
  }

  componentDidMount() {
    fetch("/api/user")
      .then((res) => res.json())
      .then((data) => this.setState({ name: data.name, loading: false }))
      .catch((err) => this.setState({ error: err, loading: false }));
  }

  handleNameChange(e) {
    this.setState({ name: e.target.value });
  }

  render() {
    const { name, loading, error } = this.state;
    if (loading) return <div>加载中...</div>;
    if (error) return <div>出错了！</div>;

    return (
      <div>
        <h1>欢迎, {name}</h1>
        <input value={name} onChange={this.handleNameChange} />
      </div>
    );
  }
}

// 新世界：简洁优雅的函数组件 + Hooks
function UserProfile() {
  const [name, setName] = useState("");
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch("/api/user")
      .then((res) => res.json())
      .then((data) => {
        setName(data.name);
        setLoading(false);
      })
      .catch((err) => {
        setError(err);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>出错了！</div>;

  return (
    <div>
      <h1>欢迎, {name}</h1>
      <input value={name} onChange={(e) => setName(e.target.value)} />
    </div>
  );
}

你看到了什么？代码量减少了 40%，可读性提高了 10 倍！

2. 核心 Hook 详解：状态与副作用的完美结合

useState：简单却强大的状态管理

jsx 复制代码

function Counter() {
  // 声明一个状态变量和更新函数
  const [count, setCount] = useState(0);

  // 函数式更新，依赖之前的状态
  function increment() {
    setCount((prevCount) => prevCount + 1);
  }

  // 批量更新，React会合并
  function multipleIncrement() {
    setCount((c) => c + 1);
    setCount((c) => c + 1);
  }

  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={increment}>加一</button>
      <button onClick={multipleIncrement}>加二</button>
    </div>
  );
}

实战技巧：使用对象状态时避免部分更新陷阱

jsx 复制代码

// ❌ 错误示例：这会完全覆盖原有状态
const [user, setUser] = useState({ name: "Tom", age: 25 });
setUser({ name: "Jerry" }); // age字段丢失了！

// ✅ 正确做法：使用展开运算符合并状态
setUser((prevUser) => ({ ...prevUser, name: "Jerry" }));

useEffect：副作用管理的终极解决方案

jsx 复制代码

function SearchResults() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);

  // 依赖数组控制副作用触发时机
  useEffect(() => {
    if (!query) return;

    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(`/api/search?q=${query}`);
        const data = await response.json();
        setResults(data);
      } catch (error) {
        console.error("搜索失败", error);
      } finally {
        setLoading(false);
      }
    };

    // 防抖处理，避免频繁请求
    const timer = setTimeout(fetchData, 500);
    return () => clearTimeout(timer); // 清理函数
  }, [query]); // 只在query变化时执行

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="搜索..."
      />
      {loading ? (
        <p>加载中...</p>
      ) : (
        <ul>
          {results.map((item) => (
            <li key={item.id}>{item.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

进阶理解：依赖数组使用策略

[]：仅在组件挂载和卸载时执行（相当于 componentDidMount 和 componentWillUnmount）
[dep1, dep2]：在依赖项变化时执行（相当于 componentDidUpdate 的部分功能）
无依赖数组：每次渲染后执行（慎用！）

3. 数据获取革命：React Query 的魔力

如果你觉得手动管理数据获取状态太繁琐，React Query 将彻底改变你的开发体验：

jsx 复制代码

import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";

function ProductList() {
  // 数据获取Hook，自动处理加载、错误、缓存等状态
  const {
    data: products,
    isLoading,
    error,
  } = useQuery({
    queryKey: ["products"],
    queryFn: fetchProducts,
    staleTime: 60 * 1000, // 1分钟内不重新请求
  });

  const queryClient = useQueryClient();

  // 修改数据的Hook
  const { mutate } = useMutation({
    mutationFn: updateProduct,
    // 乐观更新UI
    onMutate: async (newProduct) => {
      // 取消相关查询
      await queryClient.cancelQueries({ queryKey: ["products"] });

      // 保存旧数据
      const previousProducts = queryClient.getQueryData(["products"]);

      // 更新本地缓存（乐观更新）
      queryClient.setQueryData(["products"], (old) =>
        old.map((p) => (p.id === newProduct.id ? newProduct : p))
      );

      return { previousProducts };
    },
    // 错误回滚
    onError: (err, newProduct, context) => {
      queryClient.setQueryData(["products"], context.previousProducts);
    },
    // 成功后刷新数据
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: ["products"] });
    },
  });

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>加载失败: {error.message}</div>;

  return (
    <div>
      <h1>产品列表</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            {product.name} - ¥{product.price}
            <button
              onClick={() =>
                mutate({
                  ...product,
                  featured: !product.featured,
                })
              }
            >
              {product.featured ? "取消推荐" : "推荐"}
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

React Query 的魔力：

自动重试和请求去重
背景刷新和数据同步
分页和无限滚动支持
预取和缓存管理
开发者工具让调试轻松无比

4. 自定义 Hook：代码复用的完美解决方案

告别高阶组件和渲染属性模式，自定义 Hook 是组件间逻辑共享的最佳方案：

jsx 复制代码

// 创建一个窗口尺寸监听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;
}

// 创建一个本地存储Hook
function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue];
}

// 在组件中使用自定义Hook
function ResponsiveSettings() {
  const { width } = useWindowSize();
  const [settings, setSettings] = useLocalStorage("app-settings", {
    theme: "light",
    fontSize: "medium",
  });

  const toggleTheme = () => {
    setSettings((prev) => ({
      ...prev,
      theme: prev.theme === "light" ? "dark" : "light",
    }));
  };

  return (
    <div>
      <p>当前窗口宽度: {width}px</p>
      <p>当前主题: {settings.theme}</p>
      <button onClick={toggleTheme}>
        切换到{settings.theme === "light" ? "深色" : "浅色"}主题
      </button>
    </div>
  );
}

学习路径：接下来去哪里？

掌握了 React Hooks 的基础知识后，你已经迈出了现代化 React 开发的第一步！但 React 生态系统远比这宽广，在下一篇《【React 开发进化论】现代状态管理方案全面详解》中，我们将继续探索：

Context API 与全局状态管理
Zustand、Jotai 等轻量级状态管理方案
Redux Toolkit 的现代写法
服务端状态与客户端状态分离策略

别错过！我们下期见！

关于作者

Hi，我是 hyy，一位热爱技术的全栈开发者：

🚀 专注 TypeScript 全栈开发，偏前端技术栈
💼 多元工作背景（跨国企业、技术外包、创业公司）
📝 掘金活跃技术作者
🎵 电子音乐爱好者
🎮 游戏玩家
💻 技术分享达人

加入我们

欢迎加入前端技术交流圈，与 10000+开发者一起：

探讨前端最新技术趋势
解决开发难题
分享职场经验
获取优质学习资源

添加方式：掘金摸鱼沸点 👈 扫码进群