reactjs - 如何使用详尽的 deps lint 规则来安装/卸载效果

Question

我无法理解如何使用 react-hooks/exhaustive-deps lint 规则执行与 componentDidMount 和 componentWillUnmount 等效的操作是在我的应用程序中。例如，在加载组件时，我想加载一些数据并在完成后清理它。所以我可能会按照这些思路写一些东西。

React.useEffect(() => {
  loadDataById(id, other, properties);
  return () => {
    resetDataById(id);
  };
}, []);

现在的问题是我们已经包含了react-hooks lint 规则。这表明我需要在此示例的依赖项列表中包含 id、other 和 properties。但如果我这样做，当 other 和 properties 更改时，将调用 loadDataById 和 resetDataById 方法，但是我只想要在组件加载/卸载时使用这些。我只能在这些特定行上禁用 lint 规则，但这似乎是我们应用程序中相当常见的东西的反模式。

Answer 1

如果您认为您的钩子(Hook)应该只运行一次且仅运行一次，即使依赖项发生变化。您始终可以使用注释指令忽略该 eslint 规则，如下所示:

React.useEffect(() => {
  loadDataById(id, other, properties);
  return () => {
    resetDataById(id);
  };
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);