reactjs - React useEffect 强制我添加触发无限循环的依赖项

Question

为什么 React 强制我使用他们的 linter 插件添加我不想要的依赖项？

例如，我希望我的效果仅在特定值更改时触发，但 linter 告诉我向依赖项添加 even 函数，但我不希望这样。

为什么它强制我这样做？我能从中得到什么？

  /**
   * Gets all items, pages, until 250th.
   */
  useEffect(() => {
    let mounted = true;
    if (loadUntil250th && !paginationProps.complete) {
      mounted && setLoading(true);
      let limit = 250 - paginationProps.page * BATCH_LIMIT;
      fetchListItems(paginationProps, limit, paginationProps.page * BATCH_LIMIT)
        .then((results) => {
          if (mounted) {
            setPaginationProps({
              ...paginationProps,
              page: 250 / BATCH_LIMIT,
              autoLoad: false,
              complete: paginationProps.totalItems <= 250,
            });
            setListItems(results.listItems);
            setLoading(false);
          }
        })
        .catch((err) => {
          logger.log('LOADMORE FAILED:', err);
          mounted && setPaginationProps({ ...paginationProps, complete: true });
          mounted && setLoading(false);
        });
    }
    return () => {
      mounted = false;
    };
  }, [loadUntil250th]);

它需要这个依赖数组，这会导致无限循环

[loadUntil250th, logger, paginationProps, setListItems]);

如果我不想要它们，我想了解为什么需要它。

Answer 1

'exhaustive-deps' lint 规则旨在防止 stale closures , 其中useEffect引用回调中使用但不存在于依赖项数组中的 Prop 或状态。自 logger , paginationProps , 和 setListItems理论上可以在渲染之间更改，在 useEffect 中引用它们是不安全的无需将它们也包含在依赖项数组中，以确保您始终接收最新数据并根据最新数据采取行动。您可以将 useEffect 视为本质上是在创建时生成所有状态和 Prop 的快照，并且仅在其依赖项之一发生变化时更新它。

例如，不包括paginationProps在依赖项列表中，如果 fetchListItems曾经修改过 paginationProps 的值然后useEffect在 loadUntil250th 之前无法访问该更新值变化。

如 this answer 中所引用，部分问题是您对 useEffect() 的使用单一。如果您所做的只是订阅对 loadUntil250th 的更改, 你最好把这个函数移到别处，然后用你修改 loadUntil250th 的代码调用它.

如果您想将代码保留在 useEffect 中钩子(Hook)，你有几个选择:

1. 假设paginationProps和 setPaginationProps源自 useState hook，可以消除对paginationProps的依赖通过 passing a function至 setPaginationProps而不是一个对象。所以你的代码会变成:

setPaginationProps(paginationProps => {
    ...paginationProps,
    page: 250 / BATCH_LIMIT,
    autoLoad: false,
    complete: paginationProps.totalItems <= 250,
});

1. 移动setListItems inside the useEffect hook如果可能的话。这确保您可以控制该功能所依赖的任何 Prop /状态。如果那不可能，您有几个选择。您可以将函数完全移出组件，以保证它不依赖于 props 或状态。或者，您可以使用 useCallback hook以及控制其依赖项的函数，然后列出 setListItems作为另一个依赖项。
2. logger 不太可能函数在渲染之间发生变化，因此您可能会安全地将其保存在依赖项数组中(尽管 linter 会期望这样很奇怪)。

如果您仍然好奇，this article有助于详细说明如何 useEffect依赖数组确实有效。