您现在的位置:首页 >> 前端 >> 内容

React总结1:异步更新的setState

时间:2017/8/28 9:34:00 点击:

  核心提示:React总结1:异步更新的setState,先上个代码:var Text = React.createClass({getInitialState: function() {return {name...

React总结1:异步更新的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 (
                    

大家好,我是用{this.state.name}渲染出来的!

); } }); ReactDOM.render( , 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的来的快)。**

Tags:RE EA AC CT 
作者:网络 来源:juzipchy的博