本文针对useState以下3个方面进行记录：
1.useState使用；
2.setState作用：重新渲染组件（同步和异步中使用效果不同）；
3.多次设置setState如何渲染？在事件处理函数或useEffect中批量渲染（包含异步时分多次渲染）；
一、useState基本使用
- useState基本作用：在组件中添加状态变量，如下代码：
const App: React.FC = () => {
const [number, setNumber] = useState(0); // number状态变量，首次加载初值为0；setNumber更改number值，触发重新渲染
const onClick = () => {
setNumber(number+1);
}
return (
<>
<span style={{marginRight: '20px'}}>number: {number}</span>
<Button type='primary' onClick={onClick}>修改number</Button>
</>
);
}
- 代码和实现效果
二、setState作用：重新渲染组件
-
setNumber()重新渲染组件，在同步和异步函数中表现不一样
-
同步和异步中调用setState区别：
1）useEffect中同步调用setState()
useEffect(()=>setNumber(5),[])，初次渲染（number显示初始值）后重新触发渲染（number=5）。最终效果：用户只看到number: 5，由于两次渲染间隔短
0s和5s效果图（首次和重新加载）：
2）useEffect中异步调用setState()
useEffect(()=>{setTimeout(()=>setNumber(5), 5000)}, [])，初次渲染（number显示初始值）后重新触发渲染（number=5）。最终效果：用户可以看到number: 0和number: 5，由于两次渲染间隔5s。
0s效果图（首次加载）：
5s效果图（重新加载）
三、多次设置setState如何渲染
-
多次调用setState()，会进行批量处理，但在同步和异步函数中表现不一样
-
同步和异步中多次调用setState区别：
1）onClick同步调用setNumber()
onClick多次调用setNumber，批量处理setNumber，只触发一次渲染
0s和5s效果图：
2）useEffect中异步调用setNumber()
onClick多次调用setNumber，由于异步，触发两次渲染， 0s效果图（首次加载）：
5s效果图（重新渲染）
