typescript实现react中的批次式更新
欢迎吐槽讨论
前言
笔者在React经常使用setState，在学习过程中作笔记以作总结，欢迎讨论。
关于setState的核心观点
1 . 执行setState不都是异步的。
2 . setState能够缓存多次结果，对最晚的setState进行更新 ( batchedUpdate 批次式更新 )
代码部分
// typescript
let stateList = [];
let LOCK = false;
const ele = document.getElementById('test');
const view = document.getElementById('v');
const setState = (arg)=>{
if(!LOCK){
render(arg)
}else{
stateList.push(arg);
}
}
const render = (arg)=>{
alert('我只执行了一次render');
view.innerHTML = arg
}
// 启动
ele.onclick = function() {
const myT = new Transaction();
myT.perform(()=>{
console.log('i am cb');
setState('ONE');
setState('TWO');
setState('THREE');
setState('FOUR');
});
} class Transaction {
constructor() { }
_init() {
// 上锁
LOCK = true;
console.log('i am init');
}
_close() {
LOCK = false;
console.log('i am close');
// batch update
setState(stateList.pop());
// 解锁、清空stateList
stateList = []; }
async perform(cb){
await this._init();
cb();
await this._close();
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>每次执行setState不应该都进行render，而是应该render最后一次setState，观察console更佳</h2>
<h3 id="test">点我</h3>
<h3 id="v"></h3>
<pre>
ele.onclick = function() {
const myT = new Transaction();
myT.perform(()=>{
console.log('i am cb');
setState('ONE');
setState('TWO');
setState('THREE');
setState('FOUR');
});
}
</pre>
<script src="batchUpdate.js"></script>
</body>
</html>
typescript实现react中的批次式更新的更多相关文章
- React中的响应式设计思想和事件绑定
这两个点是react入门非常重要的两个点,以前我们是直接操作dom的形式去做,react的设计思想和以前直接操作dom是完全不同的,react是一个响应式的框架,他在做编程的时候,强调的是我们不要直接 ...
- TypeScript在React项目中的使用总结
序言 本文会侧重于TypeScript(以下简称TS)在项目中与React的结合使用情况,而非TS的基本概念.关于TS的类型查看可以使用在线TS工具TypeScript游乐场 React元素相关 Re ...
- 分布式系统中一些主要的副本更新策略——Dynamo/Cassandra/Riak同时采取了主从式更新的同步+异步类型，以及任意节点更新的策略。
分布式系统中一些主要的副本更新策略. 1.同时更新 类型A:没有任何协议,可能出现多个节点执行顺序交叉导致数据不一致情况. 类型B:通过一致性协议唯一确定不同更新操作的执行顺序,从而保证数据一致性 2 ...
- 在 React 中使用 Typescript
前言 用 Typescript 写 React 可比写 Vue 舒服太多了,React 对 ts 的支持可谓天生搭档,如果要用 ts 重构项目,不像 Vue 对项目破坏性极大,React 可以相对轻松 ...
- react知识点总结（持续更新。。。）
一.webpack 1. 什么是以及为什么要使用webpack 现在的网页功能越来越丰富,所需要的JavaScript和模块也会很多,为开发更加简洁,出现了以下方法,如模块化,scss,typescr ...
- 开始使用 TypeScript 和 React
原文地址:Getting started with TypeScript and React 原文作者:Jack_Franklin 译者:luxj 校对者:veizz Tom Dale 和其他人有一些 ...
- Immutable 详解及 React 中实践
本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...
- [Web 前端] mobx教程(三)-在React中使用Mobx
copy from : https://blog.csdn.net/smk108/article/details/85053903 Mobx提供了一个mobx-react包帮助开发者方便地在React ...
- [Web 前端] 如何在React中做Ajax 请求？
cp from : https://segmentfault.com/a/1190000007564792 如何在React中做Ajax 请求? 首先:React本身没有独有的获取数据的方式.实际上, ...
随机推荐
- 深入理解http/https协议
深入理解HTTP协议(转) http协议学习系列 1. 基础概念篇 1.1 介绍 HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写.它的发展是万维网协会(Wo ...
- php动态更改post_max_size, upload_max_filesize等值
在配置文件里 有些PHP 配置选项可以用int_set() 函数 直接在 项目里修改.但是有些值确不行.例如和上传文件有关的post_max_size和upload_max_filesize int_ ...
- jquery背景自动切换特效
查看效果网址:http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: <!DOCTYPE html PUBLIC ...
- 软件开发流程 Software development process
软件开发流程(Software development process)即软件设计思路和方法的一般过程,包括设计软件的功能和实现的算法和方法.软件的总体结构设计和模块设计.编程和调试.程序联调和测试以 ...
- js => ES6一个新的函数写法
今天在网上参观到一个写法,返回字符串个个字母的个数 var arr='aaabbccaa'; var info = arr.split('').reduce((p, k) => (p[k]++ ...
- js数组中数字从小到大排列
function findMin(start,arr){ var iMin = 99999; var iMinIndex = -1; for(var i = start;i<arr.length ...
- sizeof与strlen的区别
1 sizeof是操作符,而strlen是库函数: 2 sizeof的参数可以为任意变量或类型,而strlen必须以char*做参数,且字符串必须以‘/0’结尾: 3 数组名用作sizeof参数时不会 ...
- 完全卸载oracle11g步骤
完全卸载oracle11g步骤:1. 开始->设置->控制面板->管理工具->服务 停止所有Oracle服务.2. 开始->程序->Oracle - OraHome ...
- 从零自学Hadoop(06)：集群搭建
阅读目录 序 集群搭建 监控 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 序 上一 ...
- linux c++应用程序内存高或者占用CPU高的解决方案_20161213
对于绝大多数实时程序来说,实时处理相关程序中的循环问题所带来的对机器的损耗和自身的处理速度的平衡,以及与其他程序的交互以及对其他功能的影响难免会成为程序设计中最大的障碍同时也是最大的突破点. 在所有这 ...