reactjs - 如何区分useEffect是否由路由变化触发

Question

据我所知useEffect可以被以下条件触发

1. 依赖性改变
2. 路线变更
3. 初始渲染

我有以下组件，data 是一个复杂的对象。当它由路由更改触发时，data 属性具有缓存值。状态、引用等其他所有内容都会重置。

const App = memo(({ data }}) => {
  useEffect(() => {
     // if triggered by route change, do thing
     
  }, [data]);

  return (<div />)
});

区分路由更改是否调用 useEffect 的最佳方法是什么？

Answer 1

尝试将 location 作为依赖:

useEffect(() => {
    // ...
}, [location]);

编辑如果你想排除这种依赖，你可以这样做:

const [flag, setFlag] = useState(true);

useEffect(() => {
    setFlag(false);
}, [location]);

useEffect(async () => {
    await setTimeout(() => undefined, 500); //sleep to wait for other useEffect() to set a flag or not
    
    if (flag) { /* do sth that is not invoked by a location change */ }
    else {
        setFlag(true);
    }
}, [data]);

edit2

我在官方文档里查过了https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state

这样你就可以构建一个componentDidUpdate(prevProps) 钩子(Hook)，所以你的代码看起来像这样:

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

useEffect(() => {
    const prevLocation = usePrevious(location);

    if (location === prevLocation)
        //the body of your function
}, [data]);