react setState学习记录

1.总体看来

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

2.setState的执行是异步的

一般可能setState都是直接this.setState({})使用的

import React, { Component } from 'react'export default class Demo extends Component {state = {count:0}add = ()=>{//对象式的setState//1.获取原来的count值const {count} = this.state//2.更新状态//setState其实是同步的，但是交给了react去执行，不是马上去执行执行是异步的this.setState({count:count+1},()=>{console.log(this.state.count);})console.log('12行的输出',this.state.count); }render() {return (<div><h1>当前求和为：{this.state.count}</h1><button onClick={this.add}>点我+1</button></div>)}
}

可以看到控制台的打印出来的值是不一样的，回调里可以拿到更新后的准确值，有点类似于vue的$nextTick

3.函数式setState

函数式的setState可以直接到state和props参数

    this.setState((state, props) => {console.log(state, props);return { count: state.count + 1 };},() => {console.log(this.state.count);});