javascript - 下一个js : useEffect only once (if I use Link component)

Question

我使用 Link 组件打开页面而无需重新加载:

<Link href="/home"><a>Home</a></Link>
<Link href="/page"><a>Page</a></Link>

这个在我家:

const loadedRef = useRef(false)
useEffect(() => {
    if(!loadedRef.current){
        console.log("run")
        loadedRef.current = true;
    }
}, []);

首次加载时效果很好。

如果我点击page并点击home，useEffect会再次运行!

我只想加载一次 useEffect 甚至单击其他页面并返回主页

Answer 1

useRef 为 home 组件的这个特定实例创建一个值。如果实例卸载，那么该值就会消失。如果您想创建一个即使在组件卸载后仍然保留的全局变量，请执行以下操作:

import React, { useEffect } from 'react';

// Deliberately making this *outside* the component
let loaded = false;

const Home = () => {
  useEffect(() => {
    loaded = true;
  }, []);

  // ...
}

export default Home;