深入浅出setState
众所周知，react.js是将数据储存在state中，通过this.state来访问state，通过this.setState()方法来更新state中的数据，调用this.setState()方法时，react会重新调用render方法来渲染页面UI数据。
关于setState的调用问题
- 函数调用
this.setState((state, props) => { return {counter: state.counter + props.step}; },callback);**说明: **传入两个参数， 一位state本身， 二为props参数(没用时可不传)，需要return出返回的值
- 对象调用
this.setState({quantity: 2},callback) // callback在状态更新且界面更新之后回调说明：传入一个对象，对象问state本身， 里面为state中要更新的值
- 如何选择(总结)
对象方式是函数方式的简写方式
如果新状态不依赖于原状态 ===> 使用对象方式 ------------上代码就完事了！！！！！！
test2 = () => { this.setState({ count: 3 // 给一个指定的只 不基于count原有的值进行改变 //count: this.state.count + 1 可解决下面问题 我本人不喜欢用函数方式更新数据，其用发主要区分于下面setState异步多次执行的去区别上 }) }如果新状态依赖于原状态 ===> 使用函数方式 -----------上代码！！！！！！
test1 = () => { this.setState(state => ({count: state.count + 1})) // count 在自己原有值的基础上+1操作 即是依赖， 这里说明一下前两天写小程序也遇到同样的问题， 要去看看小程序的setDate有没有同样的解决方法！！！！！！！！！！！！！！！ }如果需要在setState()后获取最新的状态数据, 在第二个callback函数中读取----------同理上代码
test3 = () => { this.setState(state => ({count: state.count + 1}), () => { // 在状态更新且界面更新之后回调 console.log('test3 setState callback()', this.state.count) }) }说明： 这里为什么这么写呢， 这里有一个setState更新数据的问题，下面马上讲到
setState()异步OR同步更新
- setState更新状态时同步的还是异步的？
- 了解setState的执行位置
在react控制的回调函数中：生命周期函数 / react的事件监听回调
在非react控制的异步回调函数中: 定时器回调 / 原生事件监听 / Promise回调 / .....
- 异步OR同步
react相关回调中: 异步执行
其它异步回调中: 同步执行
- 关于异步的setState是怎么调用怎样执行的？
- 多次执行如何处理？
setState({}): 合并更新一次状态, 只调用一次render()更新界面 ---状态更新和界面更新都合并了
话不多说上代码啦！！！！！！！！！！！！！！！！！！！！！！！！！
class StateTest extends React.Component { state = { count: 0, } componentDidMount () { this.setState({count: this.state.count + 1}) // 0 + 1 console.log(this.state.count) // ==> 0 this.setState({count: this.state.count + 1}) // 0 + 1 发生合并 console.log(this.state.count) // ==> 1 } render() { const count = this.state.count console.log('render', count) return ( <div> <p>{count}</p> // 1 </div> ) } }
setState(fn): 更新多次状态, 但只调用一次render()更新界面 ---状态更新没有合并, 但界面更新合并了
> 话不多说上代码啦！！！！！！！！！！！！！！！！！！！！！！！！！class StateTest extends React.Component { state = { count: 0, } componentDidMount () { this.setState({count: this.state.count + 1}) // 0 + 1 console.log(this.state.count) // ==> 1 this.setState({count: this.state.count + 1}) // 1 + 1 没有发生合并 console.log(this.state.count) // ==> 2 } render() { const count = this.state.count console.log('render', count) return ( <div> <p>{count}</p> // 2 </div> ) } }总结：
> 1. 相同点：> 异步setState中， 在同一个事件函数中多次调用setState时， render函数只会执行一次。 > 2. 不同点 > 函数模式的调用，在同一个事件函数中多次调用setState时，合并多次数据更新，即多次更新同一个值时每次等会生效，后面的基于前面的数值进行改变。 > 对象模式的调用，在同一个事件函数中多次调用setState时，合并一次数据更新，即多次更新同一个值时只有最后一个生效， 之前的会被覆盖。 >
- 如何得到异步更新后的数据？
在setState()的callback回调函数中------------------上代码了！！！！！！！！！！！
test3 = () => { this.setState(state => ({count: state.count + 1}), () => { // 在状态更新且界面更新之后回调 console.log('test3 setState callback()', this.state.count) }) }注意：此处问题在上面调用问题中已经有说明。
关于多种setState调用的执行顺序问题
class StateTest extends React.Component { state = { count: 0, } componentDidMount() { this.setState({count: this.state.count + 1}) this.setState({count: this.state.count + 1}) console.log(this.state.count) // 2 ==> 0 this.setState(state => ({count: state.count + 1})) this.setState(state => ({count: state.count + 1})) console.log(this.state.count) // 3 ==> 0 setTimeout(() => { this.setState({count: this.state.count + 1}) console.log('timeout', this.state.count) // 10 ==> 6 this.setState({count: this.state.count + 1}) console.log('timeout', this.state.count) // 12 ==> 7 }, 0) Promise.resolve().then(value => { this.setState({count: this.state.count + 1}) console.log('promise', this.state.count) // 6 ==>4 this.setState({count: this.state.count + 1}) console.log('promise', this.state.count) // 8 ==> 5 }) } render() { const count = this.state.count console.log('render', count) // 1 ==> 0 4 ==>3 5 ==>4 7 ==>5 9 ==>6 11 ==>7 return ( <div> <p>{count}</p> </div> ) } } ReactDOM.render(<StateTest/>, document.getElementById('example'))说明： 执行顺序 ==> 打印输出的count的值
所有的setState都在componentDidMount生命周期函数中写着， 所以首先执行render打印console.log('render', count) ==> 0 ， 进入钩子函数执行setState({}), 此处两次发生合并数据和视图合并，打印console.log(this.state.count) 2 ==> 0， 再执行setState(fn)， 此处只发生了视图合并，打印console.log(this.state.count) // 3 ==> 0， 异步操作结束，进入render函数，打印console.log('render', count) 4 ==>3，接下来开始同步setState进入Promise 执行第一个setState，之后即可进入render函数打印console.log('render', count)5 ==>4 ， 再返回Promise 执行第一个console.log('promise', this.state.count) // 6 ==>4， 执行第二个setState 同理进入render 打印console.log('render', count)7 ==>5，回到Promise 执行第二个 console.log('promise', this.state.count) // 8 ==> 5， 最后进入定时器 操作与Promise 一样。
注意： 此处代码不管怎么调整， 执行顺序都是异步操作 > Promise > 定时器
