关于useState

函数组件

function App() {

const [num, updateNum] = useState(0);

window.updateNum = updateNum;

return num;

}

调用window.updateNum(1)可以将视图中的0更新为1

对于如下函数组件

function App() {

const [num, updateNum] = useState(0);

function increment() {

setTimeout(() => {

updateNum(num + 1);

}, 1000);

}

return {num};

}

点击5次结果仍为1

hook如何保存数据

FunctionComponent的render本身只是函数调用。

那么在render内部调用的hook是如何获取到对应数据呢？

比如：

useState获取state

useRef获取ref

useMemo获取缓存的数据

答案是：

每个组件有个对应的fiber节点（可以理解为虚拟DOM），用于保存组件相关信息。

每次FunctionComponent render时，全局变量currentlyRenderingFiber都会被赋值为该FunctionComponent对应的fiber节点。

所以，hook内部其实是从currentlyRenderingFiber中获取状态信息的。

多个hook如何获取数据

我们知道，一个FunctionComponent中可能存在多个hook，比如：

function App() {

// hookA

const [a, updateA] = useState(0);

// hookB

const [b, updateB] = useState(0);

// hookC

const ref = useRef(0);

return ;

}

那么多个hook如何获取自己的数据呢？

答案是：

currentlyRenderingFiber.memoizedState中保存一条hook对应数据的单向链表。

对于如上例子，可以理解为：

const hookA = {

// hook保存的数据

memoizedState: null,

// 指向下一个hook

next: hookB

// ...省略其他字段

};

hookB.next = hookC;

currentlyRenderingFiber.memoizedState = hookA;

当FunctionComponent render时，每执行到一个hook，都会将指向currentlyRenderingFiber.memoizedState链表的指针向后移动一次，指向当前hook对应数据。

这也是为什么React要求hook的调用顺序不能改变（不能在条件语句中使用hook） —— 每次render时都是从一条固定顺序的链表中获取hook对应数据的。

useState执行流程

我们知道，useState返回值数组第二个参数为改变state的方法。

在源码中，他被称为dispatchAction。

每当调用dispatchAction，都会创建一个代表一次更新的对象update：

const update = {

// 更新的数据

action: action,

// 指向下一个更新

next: null

};

对于如下例子

function App() {

const [num, updateNum] = useState(0);

function increment() {

updateNum(num + 1);

}

return {num};

}

调用updateNum(num + 1)，会创建：

const update = {

// 更新的数据

action: 1,

// 指向下一个更新

next: null

// ...省略其他字段

};