劳务派遣技术支持 东莞网站建设,知名的公关公司,宁波网站建设服务电话,wordpress导出html代码react setState学习记录1.总体看来2.setState的执行是异步的3.函数式setState1.总体看来 (1). setState(stateChange, [callback])------对象式的setState 1.stateChange为状态改变对象(该对象可以体现出状态的更改) 2.callback是可选的回调函数, 它在状态更新完毕、界面也更新…
react setState学习记录1.总体看来2.setState的执行是异步的3.函数式setState1.总体看来 (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 reactexport default class Demo extends Component {state {count:0}add (){//对象式的setState//1.获取原来的count值const {count} this.state//2.更新状态//setState其实是同步的但是交给了react去执行不是马上去执行执行是异步的this.setState({count:count1},(){console.log(this.state.count);})console.log(12行的输出,this.state.count); }render() {return (divh1当前求和为{this.state.count}/h1button 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);});
