如何强制调用 React.js 钩子的命令答案

【问题标题】：How to force a order for calling React.js hooks如何强制调用 React.js 钩子的命令
【发布时间】：2021-04-22 19:54:33
【问题描述】：

是否可以强制使用 React 钩子的特定顺序？例如，一些 linting/prettier 设置将始终确保首先使用“useState”钩子，然后才使用“useEffect”钩子。假设我有以下代码：

const MyComponent = () => {
    const [myState1, setMyState1] = React.useState();
    const [myState2, setMyState2] = React.useState();

    React.useEffect(() => {
        runSomeEffect()
    }, [])

    const [myState3, setMyState3] = React.useState();

    return <div>...</div>
}

我想要一些警告，第三个useState 钩子应该移到顶部。我研究了 Eslint 和 Prettier，但我不认为其中任何一个都有强制执行 React 钩子顺序的规则。

【问题讨论】：

您不能使用 useState 但可以使用其他挂钩来替换 useState 功能。 EG、UseContext、UseReducer (Redux)。

标签： javascript reactjs eslint

【解决方案1】：

由于Rules of Hooks，你不能有钩子的调用顺序这样的规则。

通过遵循此规则，您可以确保每次渲染组件时都以相同的顺序调用 Hook。这就是让 React 在多个 useState 和 useEffect 调用之间正确保留 Hooks 状态的原因。

你对原因有深入的解释，here。

React 依赖于 Hook 的调用顺序

因此，这样的规则可能会导致开发人员强制执行命令并且规则会破坏它的意外行为。

【讨论】：

但是，如果我的 React 钩子总是以相同的顺序排列，那这有什么关系呢？我知道当有条件地渲染钩子时，顺序可能会改变，这可能会导致错误。但是，如果我创建一个规则，即始终应在 useEffect 之前声明 useState，则挂钩的顺序将永远不会改变，并且仍应正常运行。
在普通情况下，这并不重要，但对于边缘情况，通常当一些 useStates 和 useEffect 之间存在依赖关系时，顺序可能会导致错误。您不能在“仍应正常运行”的假设上应用规则
好吧，这是有道理的。谢谢！