基于Context实现全局Lightbox组件的方案优化咨询

你的Context思路方向是对的，但当前方案存在两个核心问题：一是useRef存储的图片列表会在页面切换时累积，二是当图片已存在时init函数没有返回点击事件，导致重复图片点击无响应。以下是几个更可靠的优化方案：

方案一：将Provider与页面生命周期绑定（最简单的解决方式） #

把LightboxProvider包裹在页面级组件内部，而不是全局最外层。这样每次页面切换（卸载/挂载）时，Provider的内部状态（包括useRef的items）都会自动重置，不会出现全站图片累积的问题。

示例（以React Router为例）：

// 页面组件
function HomePage() {
  return (
    <LightboxProvider>
      {/* 页面内的所有图片组件 */}
      <Image src="/img1.jpg" alt="图1" caption="第一张图" />
      <Image src="/img2.jpg" alt="图2" caption="第二张图" />
    </LightboxProvider>
  )
}

// 路由配置
<Routes>
  <Route path="/" element={<HomePage />} />
  <Route path="/about" element={<AboutPage />} /> {/* AboutPage内部同样包裹LightboxProvider */}
</Routes>

方案二：监听路由变化自动重置Provider状态 #

如果必须把Provider放在全局（比如App根组件），可以通过监听路由变化来主动清空图片列表。利用react-router的useLocation钩子实现：

import { useLocation } from 'react-router-dom'

function LightboxProvider({ children }) {
    const [active, setActive] = useState(-1)
    const { current: items } = useRef([])
    const location = useLocation()

    // 路由变化时重置状态
    useEffect(() => {
      items.current = []
      setActive(-1)
    }, [location.pathname])

    const init = useCallback(function (src, alt, caption) {
        // 修复重复图片无点击事件的问题
        const existingItemIndex = items.current.findIndex(item => item.src === src)
        if (existingItemIndex !== -1) {
          return {
            onClick() {
              setActive(existingItemIndex)
            }
          }
        }
        const item = { src, alt, caption }
        const ind = items.current.push(item) - 1
        return {
            onClick() {
                setActive(ind)
            },
        }
    }, [])

    return (
        <LightboxContext.Provider value={init}>
            {children}
            {active >= 0 && <Lightbox items={items.current} active={active} onClose={() => setActive(-1)} />}
        </LightboxContext.Provider>
    )
}

方案三：用State替代useRef管理图片列表（更符合React状态管理逻辑） #

useRef的内容不会触发组件重渲染，虽然性能好，但状态更新不透明。改用useState管理图片列表，能更清晰地控制状态，同时配合useCallback避免不必要的渲染：

import { useLocation } from 'react-router-dom'

function LightboxProvider({ children }) {
    const [active, setActive] = useState(-1)
    const [items, setItems] = useState([])
    const location = useLocation()

    // 路由变化重置列表
    useEffect(() => {
      setItems([])
      setActive(-1)
    }, [location.pathname])

    const init = useCallback(function (src, alt, caption) {
        const existingItemIndex = items.findIndex(item => item.src === src)
        if (existingItemIndex !== -1) {
          return {
            onClick() {
              setActive(existingItemIndex)
            }
          }
        }
        const newItem = { src, alt, caption }
        setItems(prev => [...prev, newItem])
        // 点击时实时查找索引，避免异步更新导致的索引偏差
        return {
            onClick() {
                setActive(items.findIndex(item => item.src === src))
            },
        }
    }, [items])

    return (
        <LightboxContext.Provider value={init}>
            {children}
            {active >= 0 && <Lightbox items={items} active={active} onClose={() => setActive(-1)} />}
        </LightboxContext.Provider>
    )
}

额外优化点 #

• 给Lightbox组件添加关闭逻辑（点击遮罩、关闭按钮或ESC键），调用setActive(-1)关闭弹窗。
• 处理图片加载错误，在Lightbox中添加错误占位图。
• 支持键盘导航（左右箭头切换图片），提升用户体验。

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