React Hooks实战踩坑指南从useState到自定义Hook的深度解析

诸葛文仙发布于 2026-03-11 09:44:55 框架阅读 1,848

原创

本文链接：https://www.jztheme.com/blog/framework/33437.html

诸葛文仙

赞 24 收藏反馈

Hooks方案对比：我为什么更偏爱自定义Hook

最近重构一个老项目，遇到各种状态管理需求，顺便梳理了一下React Hooks的几种使用方案。说实话，用多了之后发现每种方案都有自己的适用场景，踩过不少坑才明白什么时候该用什么。

主要对比三种：官方内置Hooks + 自定义Hook组合、第三方状态管理库（Zustand）、以及纯函数式组件+useState。这三种方案我都在线上项目用过，各有优劣。

方案一：内置Hooks + 自定义Hook

这是我目前最喜欢的方案。React的内置Hooks其实已经够用了，配合自定义Hook能解决大部分场景。

// 自定义数据获取Hook
function useFetchData(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchData();
  }, [url]);

  const fetchData = async () => {
    try {
      setLoading(true);
      const response = await fetch(https://jztheme.com/api/${url});
      const result = await response.json();
      setData(result);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return { data, loading, error, refetch: fetchData };
}

// 使用
function UserList() {
  const { data: users, loading, error } = useFetchData('users');
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  
  return (
    <ul>
      {users?.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

这种方案的优点很明显：轻量、灵活，完全基于React生态，学习成本低。而且可以根据具体业务逻辑封装成独立的Hook，复用性很好。我比较喜欢用这种方式，因为调试起来比较直观，出了问题也很容易定位。

踩坑提醒：这里的闭包陷阱我踩过好几次坑。useEffect依赖项没处理好，会导致无限循环或者数据更新不及时。还有就是异步操作的清理工作，不加cleanup函数容易导致内存泄漏。

方案二：Zustand状态管理

对于复杂的状态管理，我会选择Zustand。相比Redux，它真的简单太多了，而且体积小，性能也不错。

// store定义
import { create } from 'zustand';

const useUserStore = create((set, get) => ({
  users: [],
  currentUser: null,
  loading: false,
  
  fetchUsers: async () => {
    set({ loading: true });
    try {
      const response = await fetch('https://jztheme.com/api/users');
      const users = await response.json();
      set({ users, loading: false });
    } catch (error) {
      set({ loading: false });
    }
  },
  
  setCurrentUser: (user) => set({ currentUser: user }),
  
  updateUser: (userId, updates) => 
    set(state => ({
      users: state.users.map(u => 
        u.id === userId ? { ...u, ...updates } : u
      )
    }))
}));

// 组件中使用
function UserProfile() {
  const { currentUser, setCurrentUser } = useUserStore();
  
  return (
    <div>
      {currentUser?.name || '未登录'}
    </div>
  );
}

Zustand的优势在于全局状态管理确实方便，特别是跨组件共享状态的时候。不像Context需要层层传递，也不像props drilling那样繁琐。而且它的API设计真的很友好，基本就是useState的增强版。

但是缺点也有：对于简单的组件逻辑来说有点重了，而且调试工具不如Redux完善。另外全局状态多了之后，也容易出现状态混乱的问题。

方案三：纯函数式组件+useState

这个方案我一般只在很简单的场景用，比如一些临时的数据展示组件。

function SimpleCounter() {
  const [count, setCount] = useState(0);
  const [history, setHistory] = useState([]);
  
  const increment = () => {
    const newCount = count + 1;
    setCount(newCount);
    setHistory([...history, newCount]);
  };
  
  return (
    <div>
      <button onClick={increment}>Count: {count}</button>
      <ul>
        {history.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

这种方式适合一次性的小功能，不用考虑太多复用性。但如果组件逻辑变复杂，维护起来就很麻烦了。而且状态分散在各个组件里，难以统一管理。