react基本原理---setState() 是异步更新数据的

更新数据

1. setState() 是异步更新数据的
2. 注意：使用该语法时，后面的setState() 不要依赖于前面的setState()
3. 可以多次调用 setState() ，只会触发一次重新渲染 (为了提高性能)

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    state = {
        num: 1
    };
    handleNum = ()=> {
        // 此处更新setState 是异步的更新
        this.setState({
            num: this.state.num + 1
        });
        console.log("num的值:",this.state.num);//打印出来的还是旧的值：1  
        // 点击一次，其实num值还是变为2，因为setState是异步的，下面第二次setState的时候，其实this.state.num还是1
        this.setState({
            num: this.state.num + 1
        });
        console.log("num的值:",this.state.num); //打印出来的还是旧的值：1
    };
    render() {
        console.log("render方法执行") // 无论在事件触发时调用了几次setState(),render方法只触发一次
        return (<div>
         <h1>计数器:{this.state.num}</h1>
         <button onClick={this.handleNum}>按钮</button>
        </div>)
    };
}
  ReactDOM.render(<App />,document.getElementById('root'));

setState（）语法的正确使用(推荐使用的语法)

• 推荐：使用 setState((state, props) => {}) 语法 推荐使用(回调函数形式的语法)
• 参数state：表示最新的state
• 参数props：表示最新的props
• 新写法无论写了多少次，render也只执行一次

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    state = {
        num: 1
    };
    handleNum = ()=> {
        // 推荐语法，注意：这种语法也是异步更新 参数sate表示的是最新的状态
        this.setState(
            (state,props) => {
                return {
                   num: state.num + 1
                }
            }
        )
        this.setState(
            (state,props) => {
                return {
                   num: state.num + 1
                }
            }
        )
        console.log("count:",this.state.num) // 1
    };
    render() {
        console.log("render方法执行") //新写法写几次，render也只执行一次
        return (<div>
         <h1>计数器:{this.state.num}</h1>
         <button onClick={this.handleNum}>按钮</button>
        </div>)
    };
}
  
  ReactDOM.render(<App />,document.getElementById('root'));

setState（）语法的第二个参数 (第二个参数为回调函数)

1. 场景：在状态(state)更新（页面完成重新渲染）后立即执行某个操作。 与componentDidUpdate生命周期是一样的，两者在某种程度上可以相互替代
2. 语法： setState(updater[, callback])

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    state = {
        num: 1
    };
    handleNum = ()=> {
        // 推荐语法，注意：这种语法也是异步更新 参数sate表示的是最新的状态
        this.setState(
            (state,props) => {
                return {
                   num: state.num + 1
                }
            },
            () => {
                console.log("立即执行",this.state.num) //状态更新后 立即执行; 2
            }
        )
        console.log("count:",this.state.num) // 1
    };
    render() {
        console.log("render方法执行") //新写法写几次，render也只执行一次
        return (<div>
         <h1>计数器:{this.state.num}</h1>
         <button onClick={this.handleNum}>按钮</button>
        </div>)
    };
}
  ReactDOM.render(<App />,document.getElementById('root'));