3

我试图让热重载与 react16.9.0和 react-redux一起工作7.1.1。

这是我的代码，我希望useEffect()只调用一次加载数据（回调）：

function Sidebar() {
  const dispatch = useCallback(useDispatch(), []);
  useEffect(() => {
    console.info('useEffect');
    dispatch(loadFields());
  }, [dispatch]);

  ...
}

尽管useCallback()用于记忆函数，但当我将更改保存到另一个 JS 文件时，useEffect()再次调用中的回调，重新加载字段。

但是，如果我将useEffect()函数的依赖关系从更改[dispatch]为 just []，那么它会按我想要的方式工作，并且不会在热重载时调用 inuseEffect()的回调。但是如果我这样做，推荐的 React Eslint 会抱怨我没有包含dispatch依赖项。

如何让 linter 开心，同时让热重载正常工作useDispatch()？

其他症状：

  • 使用静态['anything']也会导致热重载不起作用；这很奇怪，因为它应该等同于[].
4

1 回答 1

3

事实证明，我对热重载钩子有错误的想法。

https://github.com/gaearon/react-hot-loader/tree/v4.12.15#hook-support

正是任何依赖导致成功的useEffect()热重载，因为它实际上是重新运行使热重载成功的钩子，而不是不运行它们。

这是为了允许您在内部进行更改，useEffect()并通过重新运行您的钩子来应用这些更改，而无需刷新整个页面。只要您不使用[]作为您的钩子依赖项。当然，副作用是，如果您不对其进行更改，useEffect()它仍然会重新运行它，这有点不方便。

所以基本上如果我想让一个钩子不重新运行项目中的任何代码更改，我需要制作钩子依赖项[]。

但是作为一种权衡，即使我在其中更改了代码，钩子也不会重新运行；当然，另一个权衡是它使react-hooks/exhaustive-depseslint 规则不愉快。

于 2019-10-14T13:36:54.700 回答