React总结1:异步更新的setState
2017-06-18 12:26
351 查看
先上个代码:
我们在setState下面加了一个console,通过控制台可以发现,每次打印的值并不是当前输入的值,而是上一次输入的值,这是怎么回事呢?
在setState中,这是一个异步处理的函数,并不是同步的,console在setState后立刻执行了,所以这时候状态还没有真正变更完,所以这里取到的状态仍旧是更新前的
如果需要在更新状态后,再执行操作怎么办呢,setState还有第二个参数,接受一个callback,我们尝试将keyUp中代码改成这样
这时候log打印出来的只就是我们期望的内容,当每次状态更新成功后,都会调用传进去的callback函数。
因此总结如下:
react中的setState特点:
**1.是异步操作函数;
2.组件在还没有渲染之前, this.setState 还没有被调用;
3.批量执行 State 转变时让 DOM 渲染更快(相对比一个一个的setState的来的快)。**
var Text = React.createClass({ getInitialState: function() { return {name: "react"}; }, keyUp: function(e){ this.setState({name: e.target.value}); console.log(this.state.name); }, render: function() { return ( <div className="a"> 大家好,我是用{this.state.name}渲染出来的! <input onKeyUp={this.keyUp} /> </div> ); } }); ReactDOM.render( <Text></Text>, document.getElementById('well') );
我们在setState下面加了一个console,通过控制台可以发现,每次打印的值并不是当前输入的值,而是上一次输入的值,这是怎么回事呢?
在setState中,这是一个异步处理的函数,并不是同步的,console在setState后立刻执行了,所以这时候状态还没有真正变更完,所以这里取到的状态仍旧是更新前的
如果需要在更新状态后,再执行操作怎么办呢,setState还有第二个参数,接受一个callback,我们尝试将keyUp中代码改成这样
this.setState({name: e.target.value}, function(){ console.log(this.state.name); })
这时候log打印出来的只就是我们期望的内容,当每次状态更新成功后,都会调用传进去的callback函数。
因此总结如下:
react中的setState特点:
**1.是异步操作函数;
2.组件在还没有渲染之前, this.setState 还没有被调用;
3.批量执行 State 转变时让 DOM 渲染更快(相对比一个一个的setState的来的快)。**
相关文章推荐
- React的异步更新的setState
- React Native应用部署/热更新-CodePush最新集成总结(新)
- Android异步更新UI教程总结与demo
- Handler后台异步更新UI的总结
- React异步请求数据出现setState(...): Can only update a mounted or mounting component...
- React(7)异步的数据更改(setState 是异步行为)
- React Native应用部署/热更新-CodePush最新集成总结(新)
- 震惊! React中三个方法获取setState更新之后的state !其中一个竟用到Promise!
- React中setState同步更新策略
- 【React自制全家桶】六、React性能优化(持续更新总结)
- 前端项目积累和总结——AJAX异步更新网页技术
- React Native应用部署/热更新-CodePush最新集成总结(新)
- Echarts使用心得总结——异步数据加载与更新(二)
- React 博客系列 (3) Promise异步更新React状态
- React总结8:setState()的参数
- 短时间内多个请求状态更新,导致react 不能及时响应问题总结
- React Native之坑总结(持续更新)
- React Native应用部署/热更新-CodePush最新集成总结(新)
- React学习过程中的小总结--持续更新