反应原生钩子会破坏热重载

Question

热重载对类组件工作正常，但是当涉及到带有钩子(如useState(的函数组件时，热重载会重置其值。

Answer 1

钩子依赖于调用顺序来理解。

https://reactjs.org/docs/hooks-faq.html

有一个与每个组件关联的"存储单元"的内部列表。它们只是JavaScript对象，我们可以在其中放置一些数据。当你调用像 useState(( 这样的 Hook 时，它会读取当前单元格(或在第一次渲染期间初始化它(，然后将指针移动到下一个单元格。这就是多个 useState(( 调用各自获得独立本地状态的方式。

<小时 />

从 https://github.com/gaearon/react-hot-loader

挂钩支撑

如果应该，钩子将在 HMR 上自动更新。它只有一个条件 - 非零依赖项列表。

❄️ useState(initialState); // will never updated (preserve state)
❄️ useEffect(effect); // no need to update, updated on every render
❄️ useEffect(effect, []); // "on mount" hook. "Not changing the past"
🔥 useEffect(effect, [anyDep]); // would be updated
🔥 useEffect(effect, ["hot"]); // the simplest way to make hook reloadable

要禁用钩子重新加载 - 设置配置选项：

import { setConfig } from 'react-hot-loader';
setConfig({
  reloadHooks: false,
});