Javascript 如何强制执行调用React.js钩子的命令

是否可以强制执行使用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>
}

constmycomponent=（）=>{
const[myState1，setMyState1]=React.useState（）；
const[myState2，setMyState2]=React.useState（）；
React.useffect（（）=>{
runSomeEffect（）
}, [])
const[myState3，setMyState3]=React.useState（）；
返回。。。
}

---

我想要一些警告，第三个

useState

挂钩应该移到顶部。我研究了Eslint和Prettier，但我认为它们中没有任何一个有规则来强制执行React钩子的顺序。

你不能有钩子调用顺序这样的规则

通过遵循此规则，可以确保每次呈现组件时都以相同的顺序调用挂钩。这就是允许React在多个useState和useEffect调用之间正确保留挂钩状态的原因

您对原因有了深入的解释

React依赖于调用挂钩的顺序

---

因此，这样的规则可能会导致意外行为，开发者会强制执行命令，而规则会破坏命令。

您不能使用useState，但可以使用其他挂钩来替换useState功能。例如，UseContext，UseReducer（Redux）。但是如果我总是以相同的顺序使用React钩子，那么这又有什么关系呢？我知道当有条件地呈现钩子时，顺序可能会改变，这可能会导致bug。但是如果我创建了一个规则，其中

useState

应该总是在

useffect

之前声明，那么钩子的顺序永远不会改变，并且应该仍然能够正确运行。在一般情况下，这并不重要，但是对于边缘情况，通常当几个useState和useffect之间存在依赖关系时，顺序可能会导致错误。你不能把一条规则应用于一个假设“应该仍能正常工作”，好吧，这是有道理的。谢谢