React：this.setState的两种写法及两个注意点

一、两种写法：

1、setState(stateChange, [callback])——对象式的setState：

(1) stateChange为状态改变对象(该对象可以体现出状态的更改)

(2) callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用
                    
2、setState(updater, [callback])——函数式的setState：

(1) updater为返回stateChange对象的函数。

(2) updater可以接收到state和props。

(3) callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。

总结:

1、对象式的setState是函数式的setState的简写方式(语法糖)

2、使用原则：

(1) 如果新状态不依赖于原状态 ===> 使用对象方式

(2) 如果新状态依赖于原状态 ===> 使用函数方式

(3) 如果需要在setState()执行后获取最新的状态数据, 要在第二个callback函数中读取

二、两个注意点：

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