尚硅谷react教程_扩展_setState更新状态的2种写法

1.setState
setState更新状态的2种写法（1）.setState(stateChange,[callback])----对象式的setState1.stateChange为状态改变对象（该对象可以体现出状态的更改）2.callback是可选的回调函数，它在状态更新完毕、界面也更新后（render调用后）才被调用（2）.setState(updater,[callback])----函数式的setState
        1.updater为返回stateChange对象的函数2.updater可以接收到state和props3.callback是可选的回调函数，它在状态更新，界面也更新后（render调用后）才被调用。总结：1.对象式的setState是函数式的setState的简写方式（语法糖）2.使用原则：(a).如果新状态不依赖于原状态 ==> 使用对象方式(b).如果新状态依赖于原状态 ==> 使用函数方式(c).如果需要在setState()执行后获取最新的状态数据，要在第二个callback函数中读取3.举个例子：// （a）不依赖于原状态// 函数式的setStatethis.setState(()=>({count:99}))// 对象式的setState this.setState({count:99})

import React, {Component} from 'react';export default class Demo extends Component {state = {count:0}add = () => {/*// 对象式的 setState// 1.获取原来的值const {count} = this.state//2.更新状态this.setState({count:count+1},()=>{console.log('before == count:',count)console.log('after == this.state.count:',this.state.count)})*/// 函数式的setState 传入两个参数// this.setState((state,props)=>{//     console.log('state,props:',state, props)//     return {count:state.count+1}// })// 函数式的setState 传入一个参数// this.setState(state=> ({count:state.count+1}))// 对象式的setStatethis.setState({count:this.state.count+1})}render() {return (<div><h1>当前求和为:{this.state.count}</h1><button onClick={this.add}>功德+1</button></div>);}
};