React:this.setState的两个注意点

1、在setState时,只会把对应的state状态更新,而不会覆盖其它的state状态;

2、this.setState方法的执行是异步的,同setTimeout,即要等同一个作用域中它后面的所有代码执行完毕后它才执行,如果想调用完this.setState之后立即拿到最新的state值,需要使用this.setState({}, callback)。

import React from 'react'
import bootcss from 'bootstrap/dist/css/bootstrap.css'

class Person extends React.Component {
    constructor(){
        super()

        // 这个state就相当于vue中的data(){return {}}
        this.state={
            msg: '大家好,我是class创建的Person组件!',
            name: 'Jack',
            age: 24
        }
    }

    render(){
        return (<div>
            {/*在class组件内部,this表示当前组件的实例对象*/}
            <button className="btn btn-primary" onClick={() => this.show('a', 'b')}>按钮</button>
        </div>)
    }

    show = (arg1, arg2) => {
        this.setState({
            msg: 123 + arg1 + arg2
        }, function(){
            console.log(this.state.msg);
        })
    }
}

export default Person
posted @ 2020-03-01 22:07  Samve  阅读(555)  评论(0编辑  收藏  举报