Next.js中切换浏览器标签后Context重复加载的解决办法咨询

问题描述 #

使用Next.js开发应用，通过Context在组件间共享数据库数据及功能时，发现切换浏览器标签后返回应用，DataContext中的空依赖useEffect会重复触发，导致loadInit重复执行，造成数据库不必要的重复加载。当前通过状态判断首次加载，寻求更优解决方案。

相关代码 #

_app.js

import Layout from 'components/Layout'
import { ThemeProvider } from "next-themes";
import { DataProvider } from 'contexts/DataContext'

function MyApp({ Component, pageProps }) {
  const router = useRouter()

  return (
    <Layout>
      <ThemeProvider>
         <DataProvider>
           <Component {...pageProps} />
          </DataProvider>
      </ThemeProvider>
    </Layout>
  )
}
export default MyApp

DataContext.js

import { createContext, useEffect, useState, useRef } from "react"

const DataContext = createContext()

export function DataProvider({ children}) {
  const [list, setList] = useState([])
  const [somedata, setSomeData] = useState(null)  

  const loadInit = () => {
   // 数据库初始化逻辑
  }

  const getData = (params) => {
   // 获取数据逻辑
  }

  useEffect(() => {
      loadInit() // 标签切换返回时重复触发
  }, [])

  return (
    <DataContext.Provider value={{
       list,
       somedata,
       getData,
    }}>
    {children}
    </DataContext.Provider> 
  )
}

export default DataContext

index.js（使用Context）

import DataContext from 'contexts/DataContext'
import Header from 'components/Header'

const Home = () => {
  const { list, getData } = useContext(DataContext)

  return (
    // 使用list的UI逻辑
  )
}

export default Home

解决方案 #

1. 使用useRef标记初始化状态（推荐） #

利用useRef追踪是否已完成初始化，其值变化不会触发组件重渲染，比useState更高效：

export function DataProvider({ children}) {
  const [list, setList] = useState([])
  const [somedata, setSomeData] = useState(null)  
  // 初始化标记，默认未初始化
  const isInitialized = useRef(false)

  const loadInit = () => {
    // 原初始化逻辑
  }

  useEffect(() => {
    // 仅首次挂载时执行初始化
    if (!isInitialized.current) {
      loadInit()
      isInitialized.current = true
    }
  }, [])

  // ... 其他代码
}

2. 结合页面可见性事件控制（针对复杂场景） #

如果需要处理页面可见性变化的特殊场景，可监听visibilitychange事件，确保仅在首次可见时执行初始化：

export function DataProvider({ children}) {
  const [list, setList] = useState([])
  const [somedata, setSomeData] = useState(null)  
  const isInitialized = useRef(false)

  const loadInit = () => {
    // 原初始化逻辑
  }

  useEffect(() => {
    const handleVisibilityChange = () => {
      if (document.visibilityState === 'visible' && !isInitialized.current) {
        loadInit()
        isInitialized.current = true
      }
    }

    // 添加事件监听
    document.addEventListener('visibilitychange', handleVisibilityChange)
    // 首次加载时若页面可见，直接执行
    if (document.visibilityState === 'visible') {
      handleVisibilityChange()
    }

    // 组件卸载时移除监听
    return () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange)
    }
  }, [])

  // ... 其他代码
}

3. 排查组件意外卸载重挂载 #

确认DataProvider的父组件（如Layout、ThemeProvider）是否会因状态变化导致DataProvider被卸载重挂载，若存在此类情况，需优化父组件的渲染逻辑，避免不必要的卸载。

内容的提问来源于stack exchange，提问作者RmR