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

› React

This topic created in 1778 days ago, the information mentioned may be changed or developed.

一个组件里多个 use state，这个是保存在一个列表里，很多讲 hooks 原理的文章也是这么模拟实现的简单 hooks 。那不同组件的 state 是怎么分开的

组件

State

hooks

React

3 replies • 2021-07-06 08:08:39 +08:00

ruanyu1

Jul 6, 2021

每次 React functional component 被调用之前，react 会“切换”上下文，这里的切换指的是替换全局变量（ hooks 的状态）为将要调用的 functional component 的 hooks 的上一次执行的状态，如果是首次调用，则新建执行状态。

这样不同组件之间 hooks 的执行状态就区分开来了。

noe132

Jul 6, 2021

let 当前 state = null;
let useState = () => 从当前 state 读数据();

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

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

CrownLeo

Jul 6, 2021 via iPhone

hooks 在源码里是以链表的形式存在当前函数 fiber 上面的，然后每个 hook 执行完，就切到下个 hook 节点，也就是切换 hook 执行的环境，这也是为什么函数组件里面为什么必须保持顺序的原因