如何使用詳盡的 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

如果您認為您的鈎子應該只運行一次且僅運行一次，即使依賴項發生變化。 您始終可以使用注釋指令忽略該 eslint 規則，如下所示：

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