不同组件都调用同一个 useState， react 内部是怎么把产生的 state 和组件关联起来的
Leviathann · 2021-07-06 02:05:15 +08:00 via iPhone · 1818 次点击这是一个创建于 1018 天前的主题，其中的信息可能已经有所发展或是发生改变。
一个组件里多个 use state，这个是保存在一个列表里，很多讲 hooks 原理的文章也是这么模拟实现的简单 hooks 。那不同组件的 state 是怎么分开的
 |
1
ruanyu1 2021-07-06 06:04:24 +08:00  1
每次 React functional component 被调用之前，react 会“切换”上下文，这里的切换指的是替换全局变量（ hooks 的状态）为将要调用的 functional component 的 hooks 的上一次执行的状态，如果是首次调用，则新建执行状态。
这样不同组件之间 hooks 的执行状态就区分开来了。 |
 |
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 |
 |
3
CrownLeo 2021-07-06 08:08:39 +08:00 via iPhone 1
hooks 在源码里是以链表的形式存在当前函数 fiber 上面的，然后每个 hook 执行完，就切到下个 hook 节点，也就是切换 hook 执行的环境，这也是为什么函数组件里面为什么必须保持顺序的原因
|
Select Language