react 中使用了 useState 的 ui 组件的调用顺序

[Liyiw]

react 对于 hooks 的调用顺序是有要求的，要求 hooks 的调用顺序要相同（不能在 if 语句中使用 useState ） ，才能保证 useState 获得正确的 state

但是文档里面只规定了 hooks 要按顺序（我理解的 hooks 是不返回 ui 的逻辑组件），却没有规定使用 useState 的 ui 组件的也要按顺序

那么，通过 if 语句进行条件渲染，渲染使用了 useState 的 ui 组件是否会导致 useState 得到的错误的 state ？

例如组件 Component，里面使用了 useState

const Component = (props) => {
    const [state] = useState(props.prop)
    console.log(state)
    return <h1>{state}</h1>
}

然后根据条件渲染两个这样的组件

function App() {
    const [state, setState] = useState(0)
    useEffect(
        () => {
            setTimeout(() => {
                setState(1)
            }, 1000)
        }
    )
    return (
        <div>
            {state === 0 ? <Component prop={[1, 2, 2, 3]}/> : null}
            <Component prop={'strange'}/>
        </div>
    );
}

这个代码的逻辑是：一开始渲染了两个 Component，1s 后 state 变为 1，第一个组件被移除，第二个组件 rerender

按照我的理解：useState 的数据在一个链表中，第一个 Component 没有被调用，链表的指针还是指向第一个 Component 的 state，那么第二个 Component 在 useState 的时候应该拿到的是第一个组件的 state

但结果是，第二个 Component 还是拿到了属于它的正确的 state，react 也没有报错，为什么呢？

我查了半天，Google 上全是说 hooks 的调用要按顺序，查不到使用了 useState 的 ui 组件要不要按顺序。如果确实可以不按顺序调用的话，react 是如何做到的？

学了一天多的 react，实在找不到这个问题的资料:((

[huijiewei]

运行没有问题啊

[sgiyy]

跟 UI 无关吧，每个组件的状态自己维护一套，包括 hooks

[catcn]

两个 Component 传进去的 prop 都是独立的的，什么链不链的

[catcn]

Function Component 创建的时候，你就当是一个函数调用，props 就是一堆参数就好啦。
另外，Component 不需要 state 修改的时候，直接用 props 就好了，就像这样子：
<code>
const Component = (props) => {
console.log(props.prop)
return <h1>{props.prop}</h1>
}
</code>

[Liyiw]

@catcn #4，谢谢，我知道，我只是想试验一下 react 是否允许 使用了 useState 的 ui 组件调用顺序不同，所以才用了 useState

[Zenyk]

每个组件内维护的所有 hooks 都是属于 virtual 树上该组件对应的节点的一个属性 也就是你提到的链表（而且是一个环形链表） 你这个例子父组件内的 state 属于父组件节点 两个 component 子组件是下一层的两个子节点 两者并无直接相关只是通过 props 传递了 state 下去 你说的 hooks 要按照顺序是指不能在条件判断语句内使用 setState