React 学习:setState 源码浅析

作者:王少飞

先看下官网的一个demo。

定时更新当前元素,

拿这个例子分析下setState的实现原理:

首先是reactComponent的setState方法,

将新的状态放到队列中 ,

新的状态是立即更新还是后面render更新(这个例子是在batchedUpdate中更新的情况),

这里采用事务处理为了可以执行用户绑定的生命周期的方法,要更新的状态最终放到dirtyComponents中 ,

最终dirtyComponents中的数据经过diff后渲染到页面。

原文链接:http://ivweb.io/topic/5779552bf525c4613e8b4021

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端之路

vue2.0组件间通信

662
来自专栏技术总结

关于后台执行顺序

1234
来自专栏程序员互动联盟

【答疑解惑】define和const区别

在c/c++程序中我们经常使用到它们,由于使用比较频繁,我们就来做一下对比它们各自的作用。从以下几个方面来说明 1、编译器处理方式不同   define宏是在预...

34712
来自专栏IMWeb前端团队

setState 源码浅析

先看下官网的一个demo 定时更新当前元素, ? 拿这个例子分析下setState的实现原理: 首先是reactComponent的setState方法 ? ...

18510
来自专栏Java学习之路

03 Spring框架 bean的属性以及bean前处理和bean后处理

整理了一下之前学习spring框架时候的一点笔记。如有错误欢迎指正,不喜勿喷。 上一节我们给出了三个小demo,具体的流程是这样的: 1.首先在aplicat...

3066
来自专栏小程序的道路

小程序事件

当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数,跳转到demo页面。然后在对应的js中写出事件的具体实现方法

1416
来自专栏zaking's

用js来实现那些数据结构07(链表01-链表的实现)

  前面讲解了数组,栈和队列。其实大家回想一下。它们有很多相似的地方。甚至栈和队列这两种数据结构在js中的实现方式也都是基于数组。无论增删的方式、遵循的原则如何...

37210
来自专栏偏前端工程师的驿站

JS魔法堂:jQuery.Deferred(jQuery1.5-2.1)源码剖析

一、前言                              jQuery.Deferred作为1.5的新特性出现在jQuery上,而jQuery.aja...

2149
来自专栏有趣的django

3.python元类编程

1470
来自专栏阮一峰的网络日志

WebSocket 教程

WebSocket 是一种网络通信协议,很多高级功能都需要它。 本文介绍 WebSocket 协议的使用方法。 ? 一、为什么需要 WebSocket? 初次接...

5957

扫码关注云+社区