react的setState的行为,看不懂。。。

大伯格
  • 371
import React, { Component } from 'react';
import './App.css';

class App extends Component {
    state = {
        count: 0
    };
    add = this.add.bind(this);
    add() {
        this.setState({
            count: ++this.state.count
        })
        this.setState({
            count: ++this.state.count
        })
        this.setState({
            count: ++this.state.count
        })
        this.setState({
            count: ++this.state.count
        })
        this.setState({
            count: ++this.state.count
        })
    }
    render() {
        return (
            <div className="App">
                {this.state.count}
                <button onClick={this.add}>click</button>
            </div>
        );
    }
}

export default App;

根据官方文档,重复setState count: this.state.count + 1 是只会加一次的

但是用了count: ++this.state.count 就不存在这个问题了。

谁能告诉我是怎么回事

回复
阅读 1.1k
2 个回答
Jane_Shen
  • 629
✓ 已被采纳
React doesn't update this.state.count until the component is re-rendered

所以每次执行this.setState({count: this.state.count + 1})时,this.state.count都是0,最终 setState 的结果是1;
this.setState({count: ++this.state.count})每次执行时this.state.count都会自增+1,最终 setState 的结果就是this.state.count最终自增后的结果。

++this.state.count

这段代码相当于是

this.state.count = this.state.count + 1
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏