setState 并不是单纯同步/异步的，它的表现会因调用场景的不同而不同：在 React 钩子函数及合成事件中，它表现为异步；而在 setTimeout、setInterval 等函数中，包括在 DOM 原生事件中，它都表现为同步。这种差异，本质上是由 React 事务机制和批量更新机制的工作方式来决定的。

    importReact, { useState } from‘react’ /** * 01 在函数组件中可以多次使用同一个 HOOK 函数 * 02 简单类型 复杂 03 *set操作也是异步的，会合并相同操作， 不能直接修改 state 的原始值 */ functionApp() { const [ageState, setAgeState] = useState(10) const [nameState, setNameState] = useState(‘syy’) const [personState, setPersonState] = useState({ “name”:“zce”, “age”:40 }) const [listState, setListState] = useState([ { “name”:“zoe”, “age”:18 }, { “name”:“zce”, “age”:40 }, { “name”:“syy”, “age”:20 }, ]) // 定义修改第一个 age 值的方法 functionincrementAge() { // setAgeState(ageState + 10) // setAgeState(ageState + 10) // setAgeState(ageState + 10) setAgeState((pre) =>pre + 10) setAgeState((pre) =>pre + 10) setAgeState((pre) =>pre + 10) **//会执行多次** } // 定义修改第二个人物状态 name 的操作 functionchangeName() { // personState.name = ‘拉勾教育’ setPersonState({ …personState, name:‘拉勾教育’ }) } return ( <div> 数据： {ageState}—-{nameState} <buttononClick={() => { incrementAge() }}>+1</button> <buttononClick={() => { setAgeState(ageState - 1) }}>-1</button> <hr/> 数据： {personState.name}—-{personState.age} <buttononClick={() => { changeName() }}>+1</button> <hr/> { listState.map(item=> { return ( <p>{item.name}—-{item.age}</p> ) }) } </div> ) } exportdefaultApp