React的Transaction浅析
1.两个示例
- 示例1
let SonClass = React.createClass({render: function(){console.log("render", this.props.num);return null;},componentDidMount: function(){console.log('componentDidMount', this.props.num);}
});let FatherClass = React.createClass({render:function(){return (<div><SonClass num="one" /><SonClass num="two" /> </div>)}
});ReactDOM.render( <FatherClass /> ,document.getElementById("test")
);
输出为
render 2
componentDidMount 2
- 示例2
let React = require('react');
let ReactDOM = require('react-dom');let Hello = React.createClass({getInitialState: function() {return {clicked: 0};},handleClick: function() {this.setState({clicked:this.state.clicked + 1});this.setState({clicked: this.state.clicked + 1});},render: function() {return <button onClick = {this.handleClick} > {this.state.clicked} </button>;}
});ReactDOM.render( <Hello /> ,document.getElementById("test")
);
点击后this.state.clicked递增1,而不是递增2。
2.解释
首先介绍React的Transaction。
其源码在React/lib/Transaction.js。
Transaction就是给需要执行的方法fn用wrapper封装了 initialize 和 close 方法。且支持多次封装。再通过 Transaction 提供的 perform 方法执行。 perform执行前,调用所有initialize 方法。perform 方法执行后,调用所有close方法。
Transaction的use case是
- Preserving the input selection ranges before/after reconciliation.
Restoring selection even in the event of an unexpected error. - Deactivating events while rearranging the DOM, preventing blurs/focuses,
while guaranteeing that afterwards, the event system is reactivated. - Flushing a queue of collected DOM mutations to the main UI thread after a
reconciliation takes place in a worker thread. - Invoking any collected
componentDidUpdate
callbacks after rendering new
content. - (Future use case): Wrapping particular flushes of the
ReactWorker
queue
to preserve thescrollTop
(an automatic scroll aware DOM). - (Future use case): Layout calculations before and after DOM updates.
示例一,对应的是第4点use case。整个生命周期就是一个Transaction,在Transaction执行期间,componentDidUpdate方法被推入一个队列中。DOM reconciliation后,再调用队列中的所有componentDidUpdate。
示例二,对应的是第3点use case。react的事件回调也是一个Transaction。handleClick里面的this.setState不会马上生效,而是先通过 ReactUpdates.batchedUpdate 方法存入临时队列。所以每次setState时,拿到的this.state.clicked都是初始值。直到transaction 完成,通过ReactUpdates.flushBatchedUpdates方法进行UI更新。
更详细的流程参考此图
3.参考文章(强烈推荐去看)
http://undefinedblog.com/what-happened-after-set-state/
http://zhuanlan.zhihu.com/purerender/20328570
React的Transaction浅析相关推荐
- Transaction 浅析
一.先从jdbc来说最简单的事物处理 public void test1() throws Exception{String url="";Class.forName(" ...
- react源代码重点难点分析
网上已经有不少react源码分析文档,但都是分析主流程和主要功能函数,没有一个是从reactDOM.render()入口开始分析源码把流程逻辑走通尤其是把重点难点走通直到把组件template编译插入 ...
- React 源码剖析系列 - 解密 setState
this.setState() 方法应该是每一位使用 React 的同学最先熟悉的 API.然而,你真的了解 setState 么?先看看下面这个小问题,你能否正确回答. 引子 class Examp ...
- react相关代码库以及框架的源码解析
持续更新中react相关库源码浅析, react ts3 项目 ???对react相关代码库以及框架的源码进行了一定的分析 ?react16.6 View contents 源码实例分析:可见runl ...
- React Native初探
React Native初探 转自:博客园 叶小钗 前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP ...
- react 错误边界_如何在React 16中使用错误边界
react 错误边界 Have you seen these in your console? 您是否在控制台中看到了这些? Cannot read property 'getHostNode'of ...
- React-Native学习指南
React-Native学习指南 本指南汇集React-Native各类学习资源,给大家提供便利.指南正在不断的更新,大家有好的资源欢迎提供给我们 目录 教程 React Native React.j ...
- 阿里云前端周刊 - 第 37 期
推荐 1. Node.js 的可扩展应用模式:CQRS, ES, Onion https://medium.com/@domagojk/patterns-for-designing-flexible- ...
- 前端每周清单第 43 期:2017 JavaScript 回顾、Rust 与 WebAssembly 开发游戏
前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点:分为新闻热点.开发教程.工程实践.深度阅读.开源项目.巅峰人生等栏目.欢迎关注[前端之巅]微信公众号(ID : fro ...
最新文章
- 2021年你不能错过的DevOps趋势
- sql server 对特殊字符的提取表达式
- 第4章 类型基础 -- 4.1 所有类型都从System.Object派生
- XML和实体类之间相互转换(序列化和反序列化)
- String是一个奇怪的引用类型
- ZooKeeper的原理(转)
- c语言动态规划公共字符串,最长公共子串 C语言 动态规划
- 如何学习机器学习、看待算法竞赛?粉丝精选留言
- 微信小程序蓝牙模块BLE开发说明基础知识
- 网易邮箱接收ibm的邮件_在IBM Integration Bus中发送和接收带有大型附件的SOAP消息
- 群发邮件避免被识别为垃圾邮件
- 了解交换机、路由器、网关的概念以及它们各自属于什么层次?
- 中国报纸今年十大流行语发布:虐俘和审计风暴
- 同一网段和不同网段中的两台主机通信的过程
- HADOOP与HDFS数据压缩格式
- 常见博客Blog托管提供商评测
- docker内应用连接宿主机mysql
- 【笨木头Lua专栏】基础补充07:协同程序初探
- html网页全选效果,为什么我用js写的全选/反选/全不选页面,没有效果?
- 【10.03】富士康(世界500强第22位) 嵌入式软件相关多岗位招聘 10-45k月薪 内推...
热门文章
- el-table 行背景颜色_用手机拍花卉怎样使背景变黑?
- python函数编程实战_别找了,这是 Pandas 最详细教程了
- html所有页面根的对象,在django中显示来自所有用户的对象,无需登录到html页面...
- python 论坛模板_python模板 - PH的个人空间 - OSCHINA - 中文开源技术交流社区
- java entity公共属性_java – 如何从Entity Manager获取jpa数据源属性
- Java程序员的工资为什么一直那么高?
- 权重随机算法的java实现
- IIS下配置php运行环境
- 动态规划---实现输出最大公共子序列的长度以及输出最大子字符串(java语言描述)
- 使用ganglia监控hadoop及hbase集群