深入
useState()
建议您在学习完 组件渲染 之后再阅读此章节。
批量处理状态更新 (Batching)
请务必看看这个由 Dan Abramov 撰写关于 批量处理状态更新的文章 ！这个小节中大部分的内容都只是在用另外一种方法表现出该文章所传达的内容。
您是否曾经想过「声明两个状态」和「声明一个具有两个属性的状态」之间有什么区别？例如：
import { useState } from 'react'
// 两个状态
const [loading, setLoading] = useState(true)
const [data, setData] = useState(null)
// 具有两个属性的状态
const [state, setState] = useState({
loading: true,
data: null,
})
在大部分情况下其实没什么差别 。我们会这么说是因为 React 默认会批量处理状态更新。
在 React 中，「批量处理 (batching)」指的是 将多个状态更新合并的过程 。在 React 17 之前，只有在 React 事件处理程序 (React event handlers) 中的状态更新会被批量处理。从 React 18 开始，所有的状态更新默认都会被批量处理。
什么是 React 事件处理程序？
React 事件处理程序指的是您在 VSCode 中将鼠标停留在处理程序属性 (handler prop) 上面会看到的
React.[什么]EventHandler
：
您也可以在声明档案 (declaration file) 中看见所有的型别：
绝大部分的原生事件都属于 React 事件处理程序，像是
onClick()
、
onChange()
、
onBlur()
、
onDrag()
、
onSubmit()
等等。生命周期钩子 (life-cycle hooks) 如
componentDidMount()
和
useEffect()
也都属于 React 事件处理程序。
要了解批量状态更新的运作方式，请看以下范例：
import { useState } from 'react'
const [name, setName] = useState('')
const [count, setCount] = useState(0)
const updateData = () => {
setName('A')
setCount(1)
}
在这个范例中，我们可能会认为运行
updateData()
会导致组件重新渲染两次，因为有两个不同的
setState()
被调用了；但是在这个范例中，组件只会重新渲染一次。