setState可以说是React中使用频率最高的一个函数了,我们都知道,React是通过管理状态来实现对组件的管理的,当this.setState()被调用的时候,React会重新调用render方法来重新渲染UI

但实际使用的时候,我们会发现,有时候我们setState之后,并没有立刻生效,例如我们看一下以下的示例代码

class Test extends Component {

constructor(props) {

super(props);

this.state = {

count: 0

};

}

componentDidMount() {

this.setState({count: this.state.count + 1});

console.log(this.state.count); // 输出0

this.setState({count: this.state.count + 1});

console.log(this.state.count); // 输出0

setTimeout(() => {

this.setState({count: this.state.count + 1});

console.log(this.state.count); // 输出2

this.setState({count: this.state.count + 1});

console.log(this.state.count); // 输出3

}, 0);

}

render() {

return <div> test </div>;

}

}

开发过程中我们会发现,在componentDidMount方法中,我们调用setState之后state的值并没有立即改变,但如果我们在setTimeOut里面调用,我们却能立刻就能获得更新,原因就在于react中的使用了基于事务(传送门,关于事务原理的解析)的异步更新机制,但对于这个异步的理解,又跟ajax的异步有所不同,因为毕竟react是一个js框架,所有的操作都是单线程的,所有的操作,都得按顺序来,那么它具体是怎么实现的呢?

我们都知道,对于dom的操作对性能的损耗是非常严重的,所以react为了提高整体的渲染性能,会将一次渲染周期中的state进行合并,在这个渲染周期中你对所有setState的所有调用都会被合并起来之后,再一次性的渲染,这样可以避免频繁的调用setState导致频繁的操作dom,提高渲染性能。具体的实现方面,可以简单的理解为react中存在一个状态变量isBatchingUpdates,当处于渲染周期开始时,这个变量会被设置成true,渲染周期结束时,会被设置成false,react会根据这个状态变量,当出在渲染周期中时,仅仅只是将当前的改变缓存起来,等到渲染周期结束时,再一次性的全部render,,具体的流程可以参照下面的流程图

现在,我们回到最开始的问题,为什么一开始在componentDidMount中直接执行setState会无法立刻得到更新呢,原因就在于,我们在componentDidMount中其实处于首次渲染的事务当中,这次事务的渲染尚未完成,而首次渲染的时候会将isBatchingUpdates设置为true,这是我们在componentDidMount中调用setState,react会发现当前事务尚未完成,只会直接将修改后的state放入到dirtyComponents中,等待最终渲染周期完成时,将所有的state进行合并,一次性render。而当我们放在setTimeOut里面的时候,setTimeOut会将操作放到执行队列的最后方,也就是说会等待渲染周期结束之后再进行setState,这个时候状态变量已经被重置回来了,所以此时我们的每一次setState都会立刻生效

接下来,我们从源码的角度来看看setState是怎么操作的

function enqueueUpdate(component) {

ensureInjected();

//不在渲染周期中

if (!batchingStrategy.isBatchingUpdates) {

batchingStrategy.batchedUpdates(enqueueUpdate, component);

return;

}

//渲染周期中,直接缓存state等待下一步更新

dirtyComponents.push(component);

}

这个逻辑跟上图的逻辑是一样的,当我们调用setState函数的时候,实际上最终会调用到enqueueUpdate函数,整体逻辑上面已经分析过了,就不再赘述,接下来看看setState是如何通过事务来进行渲染的,也就是batchingStrategy.batchedUpdates到底做了些什么,往下走之前,如果对事务不了解建议先看看这篇文章(传送门,关于事务原理的解析)

var ReactUpdates = require('ReactUpdates');

var Transaction = require('Transaction');

var emptyFunction = require('emptyFunction');

//第二个wrapper

var RESET_BATCHED_UPDATES = {

initialize: emptyFunction,

close: function() {

ReactDefaultBatchingStrategy.isBatchingUpdates = false;

},

};

//第一个wrapper

var FLUSH_BATCHED_UPDATES = {

initialize: emptyFunction,

close: ReactUpdates.flushBatchedUpdates.bind(ReactUpdates),

};

//wrapper列表

var TRANSACTION_WRAPPERS = [FLUSH_BATCHED_UPDATES, RESET_BATCHED_UPDATES];

//事务构造函数

function ReactDefaultBatchingStrategyTransaction() {

//原型中定义的初始化方法

this.reinitializeTransaction();

}

//继承原型

Object.assign(

ReactDefaultBatchingStrategyTransaction.prototype,

Transaction.Mixin,

{

getTransactionWrappers: function() {

return TRANSACTION_WRAPPERS;

},

}

);

//新建一个事务

var transaction = new ReactDefaultBatchingStrategyTransaction();

var ReactDefaultBatchingStrategy = {

isBatchingUpdates: false,

batchedUpdates: function(callback, a, b, c, d, e) {

var alreadyBatchingUpdates = ReactDefaultBatchingStrategy.isBatchingUpdates;

ReactDefaultBatchingStrategy.isBatchingUpdates = true;

// The code is written this way to avoid extra allocations

if (alreadyBatchingUpdates) {

callback(a, b, c, d, e);

} else {

//在这个地方调用事务,callback是从外部传入的方法

transaction.perform(callback, null, a, b, c, d, e);

}

},

};

上面这个就是react渲染所使用的事务,react就是用这个事务来处理setState引起的渲染,根据我们刚刚的解释,我们可以看到,事务开始时就把isBatchingUpdates设置成了true,防止在一次渲染周期中重复渲染,我们还可以看到这个事务定义了两个wrapper,其出口方法close分别用于执行渲染和设置状态变量,而执行渲染的FLUSH_BATCHED_UPDATES 要先于执行设置状态变量的RESET_BATCHED_UPDATES ,也就是说,执行渲染之后,才会通过RESET_BATCHED_UPDATES的close方法执行这句代码

ReactDefaultBatchingStrategy.isBatchingUpdates = false;

之后整个渲染周期结束。这时候当我们执行setState的时候,重新进入一个新的渲染周期

那么,问题来了,当我们在渲染周期中执行了setState之后,我们要如何获取到最新的state的值呢,setTimeOut是一个方案,但是不太优雅,有没有其他方法呢,我们注意到,setState提供了一个回调函数,我们只需要在回调里面获取更新后的state即可,像这样

componentDidMount() {

this.setState({count: this.state.count + 1},()=>{

console.log(this.state.count);//该是啥就是是啥

}));

}

React中setState的怪异行为 ——setState没有即时生效的更多相关文章

  1. (文章也有问题,请自行跳过)react中的状态机每次setState都是重新创建新的对象,如需取值,应该在render中处理。

    demo如下 class Demo4StateLearn extends React.Component { constructor(props) { super(props); this.state ...

  2. React 中的this.setState

    在react中如何修改state中的数据     第一种写法:this.setState()         参数1:对象 需要修改的数据         参数2:回调 this.setState是一 ...

  3. React中this.setState是同步还是异步?为什么要设计成异步?

    在使用react的时候,this.setState为什么是异步呢? 一直以来没有深思这个问题.昨天就此问题搜索了一下. react创始人之一 Dan Abramovgaearon在GitHub上回答了 ...

  4. react中的setState的使用和深入理解

    前端框架从MVC过渡到MVVM.从DOM操作到数据驱动,一直在不断的进步着,提升着, angular中用的是watcher对象,vue是观察者模式,react就是state了,他们各有各的特点,没有好 ...

  5. React中setState学习总结

    react中setState方法到底是异步还是同步,其实这个是分在什么条件下是异步或者同步. 1.先来回顾一下react组件中改变state的几种方式: import React, { Compone ...

  6. React中的setState到底发生了什么?

    https://yq.aliyun.com/ziliao/301671 https://segmentfault.com/a/1190000014498196 https://blog.csdn.ne ...

  7. React中setState如何修改深层对象?

    在React中经常会使用到setState,因为在react生态中,state就是一切.在开发过程中,时长会在state中遇到一些比较复杂的数据结构,类似下面这样的: 这时需要我们修改list中obj ...

  8. 3.React中的setstate的几个现象

    转载segfault 上面的一篇文章,https://segmentfault.com/a/1190000014498196 1.在同一个方法中多次setState是会被合并的,并且对相同属性的设置只 ...

  9. react中setState用法

    setState()更新状态的2种写法 setState(updater, [callback]), updater为返回stateChange对象的函数: (state, props) => ...

随机推荐

  1. 机器学习_第一节_numpy

    今天学了机器学习第一节, 希望能够坚持下去,其实不在乎课程是什么?关键要坚持下去 今天主要学了对矩阵的一些操作, 用的库是numpy 开始从头到尾捋一遍, 作者说的很有道理,学计算机,动手能力要强,所 ...

  2. GNU makefile 学习 - ongoing

    资料: <跟我一起写makefile>---中文,baiduNetdisk http://www.gnu.org/software/make/manual/make.html

  3. [转帖]持久化journalctl日志清空命令查看配置参数详解

    持久化journalctl日志清空命令查看配置参数详解 最近 linux上面部署服务 习惯使用systemd 进行处理 这样最大的好处能够 使用journalctl 进行查看日志信息. 今天清理了下 ...

  4. C++经典类库

    现实中,C++的库门类繁多,解决的问题也是极其广泛,库从轻量级到重量级的都有.本文为你介绍了十一种类库,有我们常见的,也有不常见的,一起来看. C++类库介绍 再次体现了C++保持核心语言的效率同时大 ...

  5. ARTS第七周打卡

    Algorithm : 做一个 leetcode 的算法题 ////////////////////////////////////////////////////////////////////// ...

  6. 剑指Offer(4)——替换空格

    题目: 请实现一个函数,把字符串中的每个空格替换成"%20".例如输入“We are happy.”,则输出“We%20are%20happy.”. 思路: 如果按照顺序从前往后依 ...

  7. ajax post上传数据时,前端出现的跨域权限问题:ccess to XMLHttpRequest at ‘’rom origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok st

    本人前端使用多个框架时,jq  ajax传参出现如下报错: 最后发现,可能是xhr的相关默认参数被修改了.顾使用jq 传参时,一直报错,jq  ajax额外添加的关键参数: crossDomain: ...

  8. MySQL的explain语句分析

    +----+-------------+-------+------------+------+---------------+-----+---------+------+------+------ ...

  9. (九)SpringBoot之错误处理

    一.错误处理方法 1.Spring Boot 将所有的错误默认映射到/error, 实现ErrorController 2.添加自定义的错误页面   二.Spring Boot 将所有的错误默认映射到 ...

  10. Spring Boot 项目集成 Alibaba Druid

    Druid 是一个非常好用的数据库连接池,但是他的好并不止体现在作为一个连接池加快数据访问性能上和连接管理上,他带有一个强大的监控工具:Druid Monitor.不仅可以监控数据源和慢查询,还可以监 ...