V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Liyiw
V2EX  ›  问与答

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

  •  
  •   Liyiw · 2021-05-13 15:02:58 +08:00 · 914 次点击
    这是一个创建于 1050 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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,实在找不到这个问题的资料:((

    6 条回复    2021-05-14 13:26:27 +08:00
    huijiewei
        1
    huijiewei  
       2021-05-13 16:41:52 +08:00
    运行没有问题啊
    sgiyy
        2
    sgiyy  
       2021-05-13 16:47:12 +08:00
    跟 UI 无关吧,每个组件的状态自己维护一套,包括 hooks
    catcn
        3
    catcn  
       2021-05-14 00:48:48 +08:00
    两个 Component 传进去的 prop 都是独立的的,什么链不链的
    catcn
        4
    catcn  
       2021-05-14 00:53:22 +08:00
    Function Component 创建的时候,你就当是一个函数调用,props 就是一堆参数就好啦。
    另外,Component 不需要 state 修改的时候,直接用 props 就好了,就像这样子:
    <code>
    const Component = (props) => {
    console.log(props.prop)
    return <h1>{props.prop}</h1>
    }
    </code>
    Liyiw
        5
    Liyiw  
    OP
       2021-05-14 13:10:54 +08:00
    @catcn #4,谢谢,我知道,我只是想试验一下 react 是否允许 使用了 useState 的 ui 组件调用顺序不同,所以才用了 useState
    Zenyk
        6
    Zenyk  
       2021-05-14 13:26:27 +08:00
    每个组件内维护的所有 hooks 都是属于 virtual 树上该组件对应的节点的一个属性 也就是你提到的链表(而且是一个环形链表) 你这个例子父组件内的 state 属于父组件节点 两个 component 子组件是下一层的两个子节点 两者并无直接相关只是通过 props 传递了 state 下去 你说的 hooks 要按照顺序是指不能在条件判断语句内使用 setState
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1000 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 19:53 · PVG 03:53 · LAX 12:53 · JFK 15:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.