热重载无法与 React-Redux 和 Hooks 一起正常工作答案

【问题标题】：Hot Reload not working properly with React-Redux and Hooks热重载无法与 React-Redux 和 Hooks 一起正常工作
【发布时间】：2019-10-14 21:36:54
【问题描述】：

我正在尝试使用 react 16.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] 更改为只是 []，那么它会按照我想要的方式工作，并且 useEffect() 中的回调不会不得到调用热重载。但如果我这样做，推荐的 React Eslint 会抱怨我没有包含 dispatch 依赖项。

如何让 linter 快乐，同时让热重载与 useDispatch() 正常工作？

其他症状：

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

【问题讨论】：

标签： reactjs redux react-redux react-hooks hot-reload

【解决方案1】：

原来我对热重装挂钩的想法是错误的。

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

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

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

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

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

【讨论】：