在挂载时停止运行的 useEffect

Question

我只想在我的依赖列表发生变化时使用运行 useEffect，每次挂载组件时它也是运行ning，有什么办法可以不在挂载时触发？

You can tell React to skip applying an effect if certain values haven’t changed between re-renders.

我最初认为这意味着它不应该在后续安装时重新渲染，但

我是在master"page"(react-router)中显示记录列表，用户可以选择单条记录进入详情页，然后return到master页面 - 所以主列表组件在那种情况下完全是 unmounted/mounted。每次加载 "master page" 时，我都会看到正在获取的数据，我只希望在其中一个依赖项发生变化时发生这种情况；这些依赖项和数据本身存储在 Redux 中，因此它们是全局的。

能否使 useEffect 或其他挂钩仅在依赖项发生变化时触发？

const {page, pageSize, search, sorts} = useSelector(getFilters);
const data = useSelector(getData);

useEffect(() => {

  console.log("fetching");
  dispatch(fetchData(page, pageSize, search, sorts));

}, [page, pageSize, search, sorts]);

Answer 1

您无法立即配置它。

但是，一个常见的模式是像这样使用一些 isMounted 标志：

// Is Mounted
const useFetchNotOnMount = () => {
  ...
  const isMounted = useRef(false);

  useEffect(() => {
    if (isMounted.current) {
      console.log('fetching');
      dispatch(fetchData(filters));
    } else {
      isMounted.current = true;
    }
  }, [dispatch, filters]);
};

// Same (Is First Render)
const useFetchNotOnMount = () => {
  ...
  const isFirstRender = useRef(true);

  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
    } else {
      console.log("fetching");
      dispatch(fetchData(filters));
    }
  }, [dispatch, filters]);
};

深入阅读uses of useEffect

Answer 2

如果您一开始有多个 useEffect 需要阻止运行，您可以执行以下操作：


export default function App() {
  const mountedRef = useMountedRef();
  const [isLoggedIn, setLoggedIn] = React.useState(false);
  const [anotherOne, setAnotherOne] = React.useState(false);

  React.useEffect(() => {
    if (mountedRef.current) {
      console.log("triggered", isLoggedIn);
    }
  }, [isLoggedIn]);

  React.useEffect(() => {
    if (mountedRef.current) {
      console.log("triggered", anotherOne);
    }
  }, [anotherOne]);

  React.useEffect(() => {
    if (mountedRef.current) {
      console.log("triggered", isLoggedIn, anotherOne);
    }
  }, [anotherOne, isLoggedIn]);

  return (
    <div>
      <button onClick={() => setLoggedIn(true)}>Login</button>
    </div>
  );
}

const useMountedRef = () => {
  const mountedRef = React.useRef(false);

  React.useEffect(() => {
    setTimeout(() => {
      mountedRef.current = true;
    });
  }, []);

  return mountedRef;
};

演示：https://stackblitz.com/edit/react-eelqp2

重要的一点是，您必须使用 setTimeout 进行合理的延迟，以确保在所有初始 useEffects 之后将 ref 值设置为 true。

在挂载时停止运行的 useEffect

Stop useEffect from running on mount

reactjs

react-redux

react-hooks

use-effect

在挂载时停止 运行 的 useEffect

Stop useEffect from running on mount

reactjs

react-redux

react-hooks

use-effect

在挂载时停止运行的 useEffect