V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Leviathann
V2EX  ›  React

不同组件都调用同一个 useState, react 内部是怎么把产生的 state 和组件关联起来的

  •  
  •   Leviathann · 2021-07-06 02:05:15 +08:00 via iPhone · 1961 次点击
    这是一个创建于 1221 天前的主题,其中的信息可能已经有所发展或是发生改变。
    一个组件里多个 use state,这个是保存在一个列表里,很多讲 hooks 原理的文章也是这么模拟实现的简单 hooks 。那不同组件的 state 是怎么分开的
    3 条回复    2021-07-06 08:08:39 +08:00
    ruanyu1
        1
    ruanyu1  
       2021-07-06 06:04:24 +08:00   ❤️ 1
    每次 React functional component 被调用之前,react 会“切换”上下文,这里的切换指的是替换全局变量( hooks 的状态)为将要调用的 functional component 的 hooks 的上一次执行的状态,如果是首次调用,则新建执行状态。

    这样不同组件之间 hooks 的执行状态就区分开来了。
    noe132
        2
    noe132  
       2021-07-06 07:58:15 +08:00
    let 当前 state = null;
    let useState = () => 从当前 state 读数据();

    当前 state = 获取 state(组件 1) || 新建 state();
    render(组件 1)
    当前 state = null

    当前 state = 获取 state(组件 2) || 新建 state();
    render(组件 2)
    当前 state = null
    CrownLeo
        3
    CrownLeo  
       2021-07-06 08:08:39 +08:00 via iPhone   ❤️ 1
    hooks 在源码里是以链表的形式存在当前函数 fiber 上面的,然后每个 hook 执行完,就切到下个 hook 节点,也就是切换 hook 执行的环境,这也是为什么函数组件里面为什么必须保持顺序的原因
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5541 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 03:37 · PVG 11:37 · LAX 19:37 · JFK 22:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.