Question

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

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

现在的麻烦是，我们已经包括了react-hooks皮棉规则。建议在此示例中，我需要在依赖项列表中包括id，other和properties。但是，如果执行此操作，则loadDataById和resetDataById更改时，将调用other和properties方法，但我 only 加载/卸载组件。我回过头来只是在那些特定的行上禁用了该皮棉规则，但是对于某些在我们的应用程序中相当普遍的事情来说，这似乎是一种反模式。

Answer 1

如果您相信钩子应该只运行一次并且只能运行一次，即使依赖项发生了变化。您始终可以使用注释指令忽略该eslint规则，如下所示：

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

如何使用详尽的下降棉绒规则进行装卸效果

1 个答案: