react中setState的两种方式

react开发中改变state状态的两种方式介绍

对象式setState

/**
 * stateChange为状态改变的对象
 * callback 是一个可选函数,它在状态更新完毕,界面也更新后,(render调用之后)触发
 * 
*/
setState(stateChange,callback);

例如

import React, { Component } from 'react'
export default class Home extends Component {
    state = {num:1};
    change = ()=>{
        let {num} = this.state;
        //对象式setState
        this.setState({num:num+1},()=>{
            //可以在回调里获取state中修改之后的值
            console.log('状态改变了');
            console.log('最新状态为',this.state.num);
        });
    }
    render() {
        let {num} = this.state;
        console.log('render');
        return (
            <div>
                home,{num}
                <div className="btns">
                    <button onClick={this.change}>点击</button>
                </div>
            </div>
        )
    }
}

如图,点击按钮,查看控制台输出,可以看到callback拿到的是最新的state状态值 QQ截图20210405182122.png

函数式setState

/**
 * updater 为返回更新对象的函数
 * updater 可以接收 state 和 props
 * callback 与对象式setState一样,是一个可选函数,它在状态更新完毕,界面也更新后,(render调用之后)触发
*/
setState(updater,callback)

例如

import React, { Component } from 'react'
export default class Home extends Component {
    state = {num:1};
    change = ()=>{
        /**
         * 函数式setState
         * 可获取组件的state与props
         */
        this.setState((state,props)=>{
            console.log(state,props);
            return {num:state.num+1};
        },()=>{//callback函数
             //可以在回调里获取state中修改之后的值
             console.log('状态改变了');
             console.log('最新状态为',this.state.num);
        })
    }
    render() {
        let {num} = this.state;
        console.log('render');
        return (
            <div>
                home,{num}
                <div className="btns">
                    <button onClick={this.change}>点击</button>
                </div>
            </div>
        )
    }
}

QQ截图20210405183015.png

使用原则
  1. 如果新状态依赖与原状态,建议使用函数式setState(可接收state与props值)
  2. 如果新状态不依赖原状态,建议使用对象式setState
  3. 如果需要在更新状态后获取最新的状态值,可使用callback函数