【React】setState

//index.js
import React from "react";
import ReactDOM from "react-dom";

import Counter from "./counter.js";

ReactDOM.render(
    <Counter caption="计数器"/>,
    document.querySelector('#root')
)

//counter.js
import React from "react";

const style = {
    marginRight:"5px"
}
class Counter extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            count:0
        }
        this.handleIncrement = () => {
            this.setState(
                (state,props) => {
                    console.log(props);
                    return {
                        count:state.count+1
                    }
                },
                ()=>{
                    console.log("当前计数：",this.state.count);
                }
            )
        }
        this.handleDecrement = () => {
            this.setState(
                {
                    count:this.state.count-1
                }, 
                () => {
                    console.log("当前计数：",this.state.count)
                }
            )
        }
    }
    render(){
        return (
            <>
            <h3>{this.props.caption}</h3>
            <button style={style} onClick={this.handleIncrement}>+</button>
            <button style={style} onClick={this.handleDecrement}>-</button>
            <span>{this.state.count}</span>
            </>
        );
    }
}

export default Counter;

setState 完成了两项工作：

1. 更新state对象
2. 驱动组件渲染，引发componentDidUpdate、render等函数调用

setState有两种使用方式：

1. setState(updater,callback)
   第一个参数，updater，是函数，用来返回新的state对象；
   第二个参数，callback，是回调函数，state改变且渲染完成后callback会被调用。
   updater有两个参数：state和props。
   state 是 最新state（可能不太准确）； props 是 从父组件传递过来的props。
2. setState(stateChange,callback)
   第一个参数，stateChange，是一个新的state对象；
   第二个参数，callback，是回调函数，state改变且渲染完成后callback会被调用。

setState并不总会立即更新this.state，可能同步，也可能异步。

import React from "react";

const style = {
    marginRight:"5px"
}
class Counter extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            count:0
        }
        this.handleIncrement = () => {
            this.setState((state,props) => ({count:state.count+1}));
            this.setState((state,props) => ({count:state.count+1}));
            this.setState((state,props) => ({count:state.count+1}));
            // this.setState((state,props) => {
            //     console.log("this.state.count:",this.state.count," ","state.count:",state.count);
            //     return { count:state.count+1 }
            // })
            // this.setState((state,props) => {
            //     console.log("this.state.count:",this.state.count," ","state.count:",state.count);
            //     return { count:state.count+1 }
            // })
            // this.setState((state,props) => {
            //     console.log("this.state.count:",this.state.count," ","state.count:",state.count);
            //     return { count:state.count+1 }
            // })
        }
        this.handleDecrement = () => {
            this.setState({count:this.state.count-1});
            this.setState({count:this.state.count-1});
            this.setState({count:this.state.count-1});
            // this.setState({count:this.state.count-1}); console.log("this.state.count:",this.state.count);
            // this.setState({count:this.state.count-1}); console.log("this.state.countt:",this.state.count);
            // this.setState({count:this.state.count-1}); console.log("this.state.count:",this.state.count);
        }
    }
    static getDerivedStateFromProps(nextProps,nextState){
        console.log("enter getDerivedStateFromProps","nextState:",nextState);
        return null;
    }
    shouldComponentUpdate(nextProps,nextState){
        console.log("enter shouldComponentUpdate");
        return true;
    }
    render(){
        console.log("enter render");
        return (
            <>
            <h3>{this.props.caption}</h3>
            <button style={style} onClick={this.handleIncrement}>+</button>
            <button style={style} onClick={this.handleDecrement}>-</button>
            <span>{this.state.count}</span>
            </>
        );
    }
}

export default Counter;

本例，调用setState时，this.state 没有立即更新，到了 调用render时 才会更新，属异步更新。
多次调用setState，setState(updater,callback)、setState(stateChange,callback)都会有个合并的过程，但合并方式不同，因而最终的this.state.count不一样。不过，不论以何种方式 setState，组件都只会渲染一次。

import React from "react";

const style = {
    marginRight:"5px"
}
class Counter extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            count:0
        }
        this.handleIncrement = () => {
            this.setState(state => ({count:state.count+1}));
            console.log("setState in onClick","this.state.count:",this.state.count);
        }
        this.handleDecrement = () => {
            setTimeout(() => {
                this.setState(state => ({count:state.count-1}));
                console.log("setState in setTimeout","this.state.count:",this.state.count);
            })
        }
        this.handleClickA = () => {
            this.setState(state => ({count:state.count+1}));
            console.log("setState in EventListener","this.state.count:",this.state.count);
        }
        this.handleClickB = () => {
            new Promise(resolve => {
                this.setState(state => ({count:state.count-1}));
                resolve(this.state.count);
            }).then(count => {
                console.log("setState in Promise","this.state.count",count);
            })
        }
    }

    componentDidMount(){
        document.querySelector('#testA').addEventListener("click",this.handleClickA);
        document.querySelector('#testB').addEventListener("click",this.handleClickB);
    }
    componentWillUnmount(){
        document.querySelector('#testA').removeEventListener("click",this.handleClickA);   
        document.querySelector('#testB').removeEventListener("click",this.handleClickB);     
    }
    render(){
        console.log("enter render","this.state.count:",this.state.count);
        return (
            <>
            <h3>{this.props.caption}</h3>
            <button style={style} onClick={this.handleIncrement}>+</button>
            <button style={style} onClick={this.handleDecrement}>-</button>
            <button style={style} id='testA'>+(test)</button>
            <button style={style} id='testB'>-(test)</button>
            <span>{this.state.count}</span>
            </>
        );
    }
}

export default Counter;

addEventListener里调用setState，同步更新了this.state；
setTimeout里调用setState，同步更新了this.state；
Promise里调用setState，同步更新了this.state；
React事件处理程序的setState，异步更新了this.state，这是因为React事件处理程序中的更新 默认会被批量处理。

参考文章
setState：这个API设计到底怎么样
何时以及为什么 setState() 会批量执行？
React 是否保持 state 更新的顺序？