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状态值

函数式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>
        )
    }
}

使用原则

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