useIsFirstRender: 一个简单而实用的 React Hook

在 React 开发中，我们经常需要处理组件的首次渲染逻辑。比如只在组件首次加载时显示欢迎弹窗、执行初始化操作，或者渲染特殊的首次加载动画。今天，我们将深入探讨一个简单而实用的自定义 Hook —— useIsFirstRender。

为什么需要 useIsFirstRender？

在 React 中，我们经常遇到这样的场景：

一次性弹窗或提示：欢迎消息、功能引导等
首次加载动画：特殊的首次渲染效果
初始化操作：只在组件首次挂载时执行的操作
条件渲染优化：首次渲染和后续渲染显示不同内容

虽然我们可以使用 useEffect 配合空依赖数组来实现类似功能，但 useIsFirstRender 提供了更直观和语义化的方式。

useIsFirstRender 的实现原理

让我们来看看这个 Hook 的核心实现：

import { useRef } from 'react'

export default function useIsFirstRender() {
  const isFirstRender = useRef(true)

  if (isFirstRender.current === true) {
    isFirstRender.current = false
    return true
  }

  return false
}

关键特性分析

使用 useRef：useRef 在组件的整个生命周期中保持不变，不会因为重渲染而重置
状态标记：通过 isFirstRender.current 标记是否为首次渲染
逻辑简单：实现简洁，易于理解和维护
性能优化：避免了不必要的状态更新和重渲染

使用场景详解

1. 一次性弹窗或提示

import { useEffect } from 'react'
import useIsFirstRender from './hooks/useIsFirstRender'

function WelcomeModal() {
  const isFirstRender = useIsFirstRender()

  useEffect(() => {
    if (isFirstRender) {
      // 只在首次渲染时显示欢迎弹窗
      showWelcomeModal('欢迎使用我们的应用！')
    }
  }, [isFirstRender])

  return <div>应用内容</div>
}

2. 首次加载动画

function LoadingAnimation() {
  const isFirstRender = useIsFirstRender()

  if (isFirstRender) {
    return (
      <div className="first-load-animation">
        <h2>欢迎回来！</h2>
        <div className="loading-spinner">首次加载中...</div>
      </div>
    )
  }

  return <div className="normal-loading">加载中...</div>
}

3. 初始化操作

function DataFetcher() {
  const isFirstRender = useIsFirstRender()

  useEffect(() => {
    if (isFirstRender) {
      // 只在首次渲染时获取初始数据
      fetchInitialData()
      initializeUserPreferences()
      setupEventListeners()
    }
  }, [isFirstRender])

  return <div>数据加载组件</div>
}

4. 条件渲染优化

function ConditionalComponent() {
  const isFirstRender = useIsFirstRender()

  // 首次渲染显示完整内容，后续渲染显示简化版本
  if (isFirstRender) {
    return (
      <div className="full-content">
        <h1>完整功能介绍</h1>
        <p>这是首次访问时显示的详细内容...</p>
        <button>开始使用</button>
      </div>
    )
  }

  return (
    <div className="simplified-content">
      <h2>快速操作</h2>
      <button>继续使用</button>
    </div>
  )
}

5. 表单初始化

function UserForm() {
  const isFirstRender = useIsFirstRender()
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    preferences: {},
  })

  useEffect(() => {
    if (isFirstRender) {
      // 只在首次渲染时从 localStorage 恢复用户偏好
      const savedPreferences = localStorage.getItem('userPreferences')
      if (savedPreferences) {
        setFormData((prev) => ({
          ...prev,
          preferences: JSON.parse(savedPreferences),
        }))
      }
    }
  }, [isFirstRender])

  return <form>...</form>
}

与其他方案的对比

方案 1: useEffect + 空依赖数组

useEffect(() => {
  // 这个逻辑只在组件挂载时执行一次
  showWelcomeModal()
}, []) // 空依赖数组

优点：React 原生支持，语义清晰缺点：如果组件重新挂载，逻辑会再次执行

方案 2: useIsFirstRender

const isFirstRender = useIsFirstRender()

useEffect(() => {
  if (isFirstRender) {
    showWelcomeModal()
  }
}, [isFirstRender])

优点：语义更明确，逻辑更清晰缺点：需要额外的 Hook

方案 3: 状态标记

const [hasShownWelcome, setHasShownWelcome] = useState(false)

useEffect(() => {
  if (!hasShownWelcome) {
    showWelcomeModal()
    setHasShownWelcome(true)
  }
}, [hasShownWelcome])

优点：状态持久化缺点：会触发重渲染，逻辑相对复杂

注意事项和最佳实践

1. 组件重新挂载的情况

function ParentComponent() {
  const [showChild, setShowChild] = useState(true)

  return (
    <div>
      {showChild && <ChildComponent />}
      <button onClick={() => setShowChild(!showChild)}>切换子组件</button>
    </div>
  )
}

function ChildComponent() {
  const isFirstRender = useIsFirstRender()

  useEffect(() => {
    if (isFirstRender) {
      console.log('子组件首次渲染')
    }
  }, [isFirstRender])

  return <div>子组件内容</div>
}

当父组件切换子组件的显示状态时，子组件会重新挂载，useIsFirstRender 会重新开始计数。

2. 在条件渲染中使用

function ConditionalRender() {
  const isFirstRender = useIsFirstRender()

  // 注意：不要在条件渲染中直接使用
  // 这可能导致 Hook 调用顺序不一致
  if (someCondition) {
    return <div>条件内容</div>
  }

  // 确保 Hook 在组件顶层调用
  return <div>{isFirstRender ? '首次渲染' : '后续渲染'}</div>
}

3. 性能考虑

function OptimizedComponent() {
  const isFirstRender = useIsFirstRender()

  // 使用 useMemo 避免不必要的计算
  const expensiveValue = useMemo(() => {
    if (isFirstRender) {
      return calculateExpensiveValue()
    }
    return getCachedValue()
  }, [isFirstRender])

  return <div>{expensiveValue}</div>
}

实际项目中的应用

电商应用中的使用

function ProductPage() {
  const isFirstRender = useIsFirstRender()

  useEffect(() => {
    if (isFirstRender) {
      // 首次访问时显示产品介绍弹窗
      showProductTour()
      // 记录用户访问行为
      trackUserVisit()
      // 预加载相关产品
      preloadRelatedProducts()
    }
  }, [isFirstRender])

  return <div>产品页面内容</div>
}

管理后台中的应用

function Dashboard() {
  const isFirstRender = useIsFirstRender()

  useEffect(() => {
    if (isFirstRender) {
      // 首次访问时显示功能引导
      showFeatureGuide()
      // 加载用户默认设置
      loadUserDefaults()
      // 初始化数据缓存
      initializeDataCache()
    }
  }, [isFirstRender])

  return <div>仪表板内容</div>
}

总结

useIsFirstRender 是一个简单而实用的自定义 Hook，它通过 useRef 的特性来追踪组件的首次渲染状态。虽然实现简单，但在以下场景中非常有用：

一次性操作：弹窗、提示、初始化等
首次渲染特殊处理：动画、引导、介绍等
性能优化：避免重复执行某些逻辑
用户体验提升：提供更好的首次访问体验

适用场景

✅ 欢迎弹窗和功能引导
✅ 首次加载动画和介绍
✅ 组件初始化操作
✅ 条件渲染优化
✅ 用户体验增强

不适用场景

❌ 需要持久化的状态管理
❌ 复杂的渲染逻辑控制
❌ 需要响应外部状态变化的情况

在实际开发中，useIsFirstRender 特别适合那些”只执行一次”的需求，它让代码更加清晰，逻辑更加直观。虽然功能简单，但在正确的场景下使用，能够显著提升代码的可读性和用户体验。

记住，React 开发中，简单而专注的 Hook 往往比复杂而通用的解决方案更实用。useIsFirstRender 正是这样一个专注于解决特定问题的优秀工具。

# useIsFirstRender: 一个简单而实用的 React Hook