React - Anatomy of useState

前言

在 React 中， useState 以及任何其他以 “ use ” 开头的函数都称为 Hook。

钩子是特殊的函数，只有在 React 渲染时才可用。它们让你“钩入”不同的 React 功能。

useState

当你调用 useState 你希望当前的组件记住某些状态

const [index, setIndex] = useState(0);

这里你希望组件记住 index

利用 useState(0) 为这个状态赋予初始值，并且利用 setIndex 函数来改变他

关于 useState 这个钩子更多的使用在这里不做描述，网上有很多的文章介绍，我们今天的主题是来分享一下 react 官网上对于它是如何工作的的解释。

export default function Gallery() {
	const [index, setIndex] = useState(0);
	const [showMore, setShowMore] = useState(false);

	...

	return (<></>);
}

在这里你可能会奇怪，明明函数 Gallery 每次运行的时候都会重新运行 const [index, setIndex] = useState(0); 那么react 是如何知道要返回哪个时候的状态变量呢。

Anatomy of useState

在 React 内部，React 为每个组件保存了一个状态对数组。它还维护当前对索引。每次调用 useState 时，React 都会给你下一个状态对并递增索引。

关于更多的这种机制的信息，可以阅读 React Hooks: Not Magic, Just Arrays.

然后让我们通过一个没有使用 react 的例子来了解一下 useState 是如何工作的。

可以看到，例子中是通过 componentHooks 来保存状态，并且通过 currentHookIndex 标记每一个状态所在的坑位，在首次渲染完成以后，保存的状态数组为：

Pasted image 20230815172932.png

按照

const [index, setIndex] = useState(0);
const [showMore, setShowMore] = useState(false);

的前后顺序，将两个状态变量保存到了这个数组当中，那么在第二次重绘的时候，只需要将 currentHookIndex 重新设定为初始值，并且按照顺序去读取每一个状态变量，这样就能够跟第一次的坑位一一对应上，从而实现了状态的保存。

看一下第二次渲染的过程如何更新现有的变量，在 handleNextClick 和 handleMoreClick 这两个点击事件中分别去调用了 setIndex 和 setShowMore 两个方法都是通过 setState 这个方法去改变了当前状态的值，并且调用 updateDOM 重新渲染界面，在 setState 这个方法中的 pair 指的就是当前这个状态对应的在 componentHooks 中的坑位，改变第一个位置的值，对应的就是修改了这个坑位的状态。

Pasted image 20230815172932.png