环境
"dependencies": {
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"customize-cra": "^1.0.0",
"rc-form": "^2.4.11",
"react": "^17.0.1",
"react-app-rewired": "^2.1.8",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.1",
"redux": "^4.0.5"
},
代码示例：
hooks
import {useState} from "react";
export default function Pre04SetStateSync() {
const [counter, setCounter] = useState(0)
const add = () => {
setCounter(counter + 1)
console.log({counter})
}
return <>
<h3>同步SetState</h3>
<p>请观察控制台</p>
<button onClick={add}>counter: {counter}</button>
</>
}
class
export default class Pre04SetStateSync extends React.Component{
state = {
counter:0
}
add = () => {
this.setState({counter:this.state.counter + 1})
console.log('~~this.state.counter',this.state.counter)
}
render() {
return <>
<h3>同步SetState</h3>
<p>请观察控制台</p>
<button onClick={this.add}>counter: {this.state.counter}</button>
</>
}
}
hooks结构中的setCounter(xxx)相当于class组件写法中setState({counter: xxx})
可以对比控制台看到，这样直接setCounter(setState)后立即输出的counter的是上一次的值，而按钮上显示正确，说明本次更新是异步的(react这样设计是为了批量更新而提高性能)，打印时counter还没来得及改变。如果需要set完后立即取到counter的最新值，可以按如下方法实现同步的效果。
异步写成同步的方法
1. 写在setTimeout中
注意，只适用于class组件
add = () => {
setTimeout(()=>{
this.setState({counter:this.state.counter + 1})
console.log('~~this.state.counter',this.state.counter)
},0)
}
2. 合成事件使用原生事件替代
注意，只适用于class组件
// 原生事件
export default class Pre04SetStateSync extends React.Component {
state = {
counter: 0
}
componentDidMount() {
document.querySelector('#btn').addEventListener('click', this.add)
}
add = () => {
this.setState({counter: this.state.counter + 1})
console.log('~~this.state.counter', this.state.counter)
}
render() {
return <>
<h3>同步SetState</h3>
<p>请观察控制台</p>
<button id='btn'>counter: {this.state.counter}</button>
</>
}
}
3. 写入setState的回调函数中
注意，只适用于class组件
export default class Pre04SetStateSync extends React.Component {
state = {
counter: 0
}
add = () => {
this.setState({counter: this.state.counter + 1}, ()=>{
console.log('~~this.state.counter', this.state.counter)
})
}
render() {
return <>
<h3>同步SetState</h3>
<p>请观察控制台</p>
<button onClick={this.add}>counter: {this.state.counter}</button>
</>
}
}
4. 连续setState的问题
注意，class组件和hooks都可以
如果将add改为先加1再加2，会发现代码只执行了最后一个加2，加1被忽略了，如：
const add = () => {
setCounter(counter + 1)
setCounter(counter + 2)
}
解决方法是将setState的参数写成函数形式
const add = () => {
setCounter(counter => counter + 1)
setCounter(counter => counter + 2)
}
5. 使用副作用useEffect
注意，只适用于hooks
export default function Pre04SetStateSync() {
const [counter, setCounter] = useState(0)
const add = () => {
setCounter(counter + 1)
}
useEffect(() => {
console.log({counter})
}, [counter])
return <>
<h3>同步SetState</h3>
<p>请观察控制台</p>
<button onClick={add}>counter: {counter}</button>
</>
}
