React:useState()方法详解

以use开头的方法都是React中的钩子（Hook函数），用来勾住不同的React特性。Hook只在渲染时生效。

useState ()的唯一参数是 state 变量的初始值，在组件第一次渲染时的值。

每次你的组件渲染时，useState 都会给你一个包含两个值的数组：

1. state 变量 (index) 会保存上次渲染的值。
2. state setter 函数 (setIndex) 可以更新 state 变量并触发 React 重新渲染组件。

下面写法等式左边是数组解构（“模式匹配”）。

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

function handleNextClick() {
    setIndex(index + 1);
}

渲染过程：

1. 组件初始化进行第一次渲染。 将初始值（上图为0） 作为 index 的初始值传递给 useState，它将返回 [0, setIndex]。 React 记住 0 是最新的 state 值。
2. 你更新了 state。当用户点击按钮时，它会调用 setIndex(index + 1)。 index 是 0，所以它是 setIndex(1)。这告诉 React 现在记住 index 是 1 并触发下一次渲染。
3. 组件进行第二次渲染。React 仍然看到 useState(0)，但是因为 React 记住 了你将 index 设置为了 1，它将返回 [1, setIndex]。
4. 你更新了 state。当用户点击按钮时，它会调用 setIndex(index + 1)。 index 是 1，所以它是 setIndex(2)。这告诉 React 现在记住 index 是 2 并触发下一次渲染。
5. 不断循环。