React优化：Firestore避免重复获取数据

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《React优化：Firestore数据获取不重复调用getDoc》，聊聊，希望可以帮助到正在努力赚钱的你。

本文旨在解决React组件中Firestore `getDoc` 函数重复执行的问题。通过深入探讨React组件生命周期和副作用管理，我们将重点介绍如何利用`useEffect` Hook来封装数据获取逻辑。这种方法能够确保Firestore数据只在必要时被调用，有效避免不必要的重复请求，从而优化应用性能并提升用户体验。

理解React组件的渲染与副作用

在React函数组件中，当组件的状态（state）或属性（props）发生变化时，组件会重新渲染。如果在组件的渲染逻辑（即 return 语句之前或JSX内部）直接调用一个会产生副作用的函数（例如，网络请求 getDoc），那么每次组件渲染时，这个函数都会被执行。这会导致不必要的API调用，增加服务器负载，浪费用户流量，并可能引入竞态条件等问题。

原始代码中，handleProfile() 函数被直接放置在JSX的条件渲染表达式中：

{user && !loading && (handleProfile(), (...))}

这种写法意味着每当 user 或 loading 状态变化导致组件重新渲染，并且 user 存在且 loading 为 false 时，handleProfile() 就会被执行一次。由于 handleProfile 内部调用了 setProfile 来更新状态，这又会触发组件的重新渲染，从而形成一个潜在的无限循环，导致 getDoc 被反复调用。

解决方案：利用useEffect管理数据获取

React提供了 useEffect Hook来处理函数组件中的副作用。useEffect 允许你在组件渲染后执行一些操作，并且你可以通过其依赖项数组来控制这些操作何时重新运行。将数据获取逻辑封装在 useEffect 中是解决此类问题的标准做法。

核心原理

1. 副作用隔离: useEffect 将副作用逻辑与组件的渲染逻辑分离。
2. 依赖控制: 通过依赖项数组，你可以指定哪些值变化时才重新运行副作用。如果依赖项数组为空 ([])，副作用只会在组件首次挂载时运行一次。如果包含特定变量（如 [user]），则在这些变量发生变化时才重新运行。
3. 清理机制: useEffect 还可以返回一个清理函数，用于在组件卸载或副作用重新运行前执行清理操作。

示例代码重构

以下是如何使用 useEffect 重构 Profile 组件中的数据获取逻辑：

import React, { useContext, useState, useEffect } from 'react';
import { doc, getDoc } from 'firebase/firestore'; // 确保 FIREBASE_FIRESTORE 已正确导入
import { useRouter } from 'next/router';
import Image from 'next/image';
import { FiChevronUp, FiChevronDown } from 'react-icons/fi';

// 假设 authContext 和 FIREBASE_FIRESTORE 在应用的其他地方已定义并导出
// import { authContext } from '../contexts/AuthContext';
// import { FIREBASE_FIRESTORE } from '../firebaseConfig';

export default function Profile() {
  const { user, loading } = useContext(authContext);
  const [profile, setProfile] = useState({});
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const router = useRouter();

  useEffect(() => {
    // 异步函数用于封装 Firestore 数据获取逻辑
    const fetchUserProfile = async () => {
      // 确保用户对象存在且UID可用，避免在用户未登录或UID为空时尝试获取数据
      if (user && user.uid) {
        const userProfileRef = doc(FIREBASE_FIRESTORE, "user", user.uid);
        try {
          const userProfileSnap = await getDoc(userProfileRef);
          if (userProfileSnap.exists()) {
            setProfile(userProfileSnap.data());
            console.log("用户数据已成功设置");
          } else {
            console.warn("用户文档不存在或已删除。UID:", user.uid);
            setProfile({}); // 清空或设置为默认值，以防之前有旧数据
          }
        } catch (error) {
          console.error("获取用户数据失败:", error);
          // 可以在此处设置错误状态，向用户显示错误信息
        }
      } else if (!loading && !user) {
        // 如果用户未登录且加载状态已结束，则重定向到登录页
        // 注意：在 useEffect 中进行路由跳转通常是安全的，但需确保 router 稳定
        router.push("/");
      }
    };

    fetchUserProfile(); // 调用数据获取函数

    // 依赖数组包含 'user'。这意味着只有当 'user' 对象发生变化时，
    // useEffect 内部的 'fetchUserProfile' 才会重新执行。
    // 'loading' 和 'router' 也应包含在内，因为它们在副作用中使用。
  }, [user, loading, router]); // 依赖项：user、loading、router

  // 在组件渲染逻辑中，不再直接调用 handleProfile()
  // 而是根据状态来渲染UI

  if (loading) {
    return <div>加载用户数据中...</div>; // 显示加载指示
  }

  // 如果用户未登录且加载完成，则不再渲染组件内容，等待useEffect中的重定向
  if (!user) {
    return null;
  }

  return (
    <div className="flex flex-col relative">
      <button
        onClick={() => setDropdownOpen((prev) => !prev)}
        className="flex items-center gap-2.5 focus:ring-0"
      >
        <Image
          placeholder="blue"
          alt="user profile"
          src={profile.image_URL || '/default-avatar.png'} // 提供默认图片以防 profile.image_URL 为空
          height={48}
          width={48}
          className="rounded-full bg-gray-400"
        />
        <div className="flex flex-col text-left">
          <p className="font-semibold">{profile.name || '未知用户'}</p>
          <p className="text-gray-400 text-sm">{profile.email || '无邮箱'}</p>
        </div>
        {dropdownOpen ? (
          <FiChevronUp size={"20px"} color={"gray"} />
        ) : (
          <FiChevronDown size={"20px"} color={"gray"} />
        )}
      </button>
      <div>{dropdownOpen && <UserDropdown />}</div>
    </div>
  );
}

关键改进点

1. useEffect 封装: handleProfile（现更名为 fetchUserProfile）被移入 useEffect Hook。
2. 依赖数组 [user, loading, router]:
   • user: 当 user 对象从 null 变为实际的用户对象时（例如，认证成功后），useEffect 会运行，触发数据获取。如果 user 对象在后续渲染中没有变化，useEffect 就不会重复执行 fetchUserProfile。
   • loading: 用于处理用户认证状态的加载过程，确保在加载完成前不进行不必要的重定向或数据获取尝试。
   • router: 如果在 useEffect 中使用了 router.push，将其添加到依赖数组可以避免潜在的 stale closure 问题，尽管在大多数情况下 router 对象是稳定的。
3. 条件性数据获取 if (user && user.uid): 确保只有在 user 对象及其 uid 属性都存在时才尝试从 Firestore 获取数据，避免在用户未登录或 uid 不可用时进行无效的查询。
4. 移除JSX中的直接调用: handleProfile() 不再直接出现在 JSX 中，消除了重复调用的根源。
5. userProfileSnap.exists() 检查: 在处理 Firestore 文档快照时，检查 userProfileSnap.exists() 是一个好习惯，以确保文档确实存在，避免对不存在的文档调用 .data() 导致错误。

注意事项与最佳实践

• 加载状态管理: 在数据获取过程中，通常需要设置一个加载状态（例如 isLoading state），并在数据未加载完成时显示加载指示器，提升用户体验。
• 错误处理: 在 try-catch 块中捕获并处理数据获取过程中可能发生的错误，例如网络问题或权限不足。
• 取消请求: 对于长时间运行或可能被用户中断的请求，考虑实现请求取消机制，以避免在组件卸载后尝试更新状态。
• Next.js 数据获取: 如果项目是基于 Next.js 构建的，尤其是在使用 App Router (Next.js 13+) 时，强烈建议探索 Next.js 官方推荐的数据获取策略（如 getServerSideProps、getStaticProps、use Hook或 fetch API），这些方法通常能提供更好的性能和开发体验。对于Pages Router，也可以考虑 getServerSideProps 或 getStaticProps。
• 全局状态管理: 对于需要在多个组件间共享的用户配置文件等数据，可以考虑使用更高级的状态管理方案（如 Redux、Zustand 或 React Context API 结合 useReducer）来集中管理和缓存数据，避免每个组件都独立获取。

总结

通过将Firestore数据获取逻辑封装在 useEffect Hook中，并合理配置其依赖项数组，我们可以有效避免在React组件中 getDoc 函数的重复执行问题。这不仅优化了应用程序的性能和资源利用率，也使得代码结构更加清晰，符合React的声明式编程范式。遵循这些最佳实践，可以构建出更健壮、高效的React应用。

今天关于《React优化：Firestore避免重复获取数据》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！