1.State的异步更新

import React, { Component } from 'react'

export default class ClassComponent extends Component {
    constructor(props) {
        super(props)

        this.state = {
            counter: 0,
        }
    }

    changevalue = v => {
        this.setState({
            counter: this.state.counter + v
        }, () => {
            console.log('counter-2', this.state.counter) // 值变换后的回调函数
        })

        console.log('counter-1', this.state.counter)

    }

    setCounter = (e) => {
        this.changevalue(1)
    }


    componentDidMount() {
        this.changevalue(1)
    }

    componentWillUnmount() {
    }

    render() {
        const { counter } = this.state;
        return (
            <div>
                <h3>setStatePage</h3>
                <button onClick={this.setCounter}>counter:{counter}</button>
            </div>
        )
    }
}

在上述代码中，counter-1 为旧值，counter-2为新值

• 1.回调中获取的状态是新值

• 2.生命周期中调用setState,值是异步改变的。（componentDidMount中可知）
  

  捕获.PNG

• 3.组合事件中调用setState,值是异步改变的。(onClick={this.setCounter}中可知)
  

  捕获.PNG

---

2.state同步更新-定时器

import React, { Component } from 'react'

export default class ClassComponent extends Component {
    constructor(props) {
        super(props)

        this.state = {
            counter: 0,
        }
    }

    changevalue = v => {
        setTimeout(() => {
            this.setState({
                counter: this.state.counter + v
            })
            console.log('counter', this.state.counter)
        }, 0)
    }

    setCounter = (e) => {
        this.changevalue(1)
    }


    componentDidMount() {
        this.changevalue(1)
    }

    render() {
        const { counter } = this.state;
        return (
            <div>
                <h3>setStatePage</h3>
                <button onClick={this.setCounter}>counter:{counter}</button>
            </div>
        )
    }
}

• setState 在 setTimeout 中调用时，counter 值是立刻更新的

• 生命周期调用结果

  
  捕获.PNG

• 点击事件结果

  
  捕获.PNG

---

3.state同步更新-原生事件

import React, { Component } from 'react'

export default class ClassComponent extends Component {
    constructor(props) {
        super(props)

        this.state = {
            counter: 0,
        }
    }

    changevalue = v => {
        this.setState({
            counter: this.state.counter + v
        })
        console.log('counter', this.state.counter)
    }

    setCounter = (e) => {
        this.changevalue(1)
    }


    componentDidMount() {
        document.body.addEventListener('click', this.setCounter, false)
    }

    render() {
        const { counter } = this.state;
        return (
            <div>
                <h3>setStatePage</h3>
                <button>counter:{counter}</button>
            </div>
        )
    }
}

• document.body.addEventListener('click', this.setCounter, false),在原生事件中,调用setState。counter值也是立刻更新的

• 点击原生事件结果

  
  捕获.PNG

---

4.合并更新

import React, { Component } from 'react'

export default class ClassComponent extends Component {
    constructor(props) {
        super(props)

        this.state = {
            counter: 0,
        }
    }

    changevalue = v => {
        this.setState({
            counter: this.state.counter + v
        })
        console.log('counter', this.state.counter)
    }

    setCounter = (e) => {
        this.changevalue(1)
        this.changevalue(2)
    }

    render() {
        const { counter } = this.state;
        return (
            <div>
                <h3>setStatePage</h3>
                <button onClick={this.setCounter}>counter:{counter}</button>
            </div>
        )
    }
}

• 点击按钮得到结果为:2,理论上应该为3
  捕获.PNG
• 处于性能考虑，react可能会把多个setState()调用合并为一个调用

---

5.链式调用

import React, { Component } from 'react'

export default class ClassComponent extends Component {
    constructor(props) {
        super(props)

        this.state = {
            counter: 0,
        }
    }

    changevalue = v => {
        this.setState(state => ({
            counter: state.counter + v
        }), () => {
            console.log('counter', this.state.counter)
        })

    }

    setCounter = (e) => {
        this.changevalue(1)
        this.changevalue(2)
    }

    render() {
        const { counter } = this.state;
        return (
            <div>
                <h3>setStatePage</h3>
                <button onClick={this.setCounter}>counter:{counter}</button>
            </div>
        )
    }
}

• this.setState(state => ({ counter: state.counter + v }))可以链式调用，从而得到正确结果3
  捕获.PNG