欢迎吐槽讨论

  前言

    笔者在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中的批次式更新的更多相关文章

  1. React中的响应式设计思想和事件绑定

    这两个点是react入门非常重要的两个点,以前我们是直接操作dom的形式去做,react的设计思想和以前直接操作dom是完全不同的,react是一个响应式的框架,他在做编程的时候,强调的是我们不要直接 ...

  2. TypeScript在React项目中的使用总结

    序言 本文会侧重于TypeScript(以下简称TS)在项目中与React的结合使用情况,而非TS的基本概念.关于TS的类型查看可以使用在线TS工具TypeScript游乐场 React元素相关 Re ...

  3. 分布式系统中一些主要的副本更新策略——Dynamo/Cassandra/Riak同时采取了主从式更新的同步+异步类型,以及任意节点更新的策略。

    分布式系统中一些主要的副本更新策略. 1.同时更新 类型A:没有任何协议,可能出现多个节点执行顺序交叉导致数据不一致情况. 类型B:通过一致性协议唯一确定不同更新操作的执行顺序,从而保证数据一致性 2 ...

  4. 在 React 中使用 Typescript

    前言 用 Typescript 写 React 可比写 Vue 舒服太多了,React 对 ts 的支持可谓天生搭档,如果要用 ts 重构项目,不像 Vue 对项目破坏性极大,React 可以相对轻松 ...

  5. react知识点总结(持续更新。。。)

    一.webpack 1. 什么是以及为什么要使用webpack 现在的网页功能越来越丰富,所需要的JavaScript和模块也会很多,为开发更加简洁,出现了以下方法,如模块化,scss,typescr ...

  6. 开始使用 TypeScript 和 React

    原文地址:Getting started with TypeScript and React 原文作者:Jack_Franklin 译者:luxj 校对者:veizz Tom Dale 和其他人有一些 ...

  7. Immutable 详解及 React 中实践

    本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...

  8. [Web 前端] mobx教程(三)-在React中使用Mobx

    copy from : https://blog.csdn.net/smk108/article/details/85053903 Mobx提供了一个mobx-react包帮助开发者方便地在React ...

  9. [Web 前端] 如何在React中做Ajax 请求?

    cp from : https://segmentfault.com/a/1190000007564792 如何在React中做Ajax 请求? 首先:React本身没有独有的获取数据的方式.实际上, ...

随机推荐

  1. 【夯实Mysql基础】记一次mysql语句的优化过程

    1. [事件起因] 今天在做项目的时候,发现提供给客户端的接口时间很慢,达到了2秒多,我第一时间,抓了接口,看了运行的sql,发现就是 2个sql慢,分别占了1秒多. 一个sql是 链接了5个表同时使 ...

  2. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(22)-为用户设置角色

    ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2):数据库访问层的设计Demo    (3):面向接口编程   (4 ):业务逻辑层的封装    ...

  3. 自定义JS控件-简单示例

    1.  业务需求: 制作 一个按钮对象,然后 像 winfrom  那样调用 就可以了: 首先 我们新建一个 MyControls的 JS文件:(插入如下代码) //这里运用的面向对象的思想 ,新建了 ...

  4. Alvin

    Alvin Zhao 東京都 港区虎ノ門2-10-4 ホテルオークラ東京 M 663 電話番号: 0335820111

  5. Linux0.11内核--内存管理之1.初始化

    [版权所有,转载请注明出处.出处:http://www.cnblogs.com/joey-hua/p/5597705.html ] Linux内核因为使用了内存分页机制,所以相对来说好理解些.因为内存 ...

  6. AlertDialog的六种创建方式

    AlertDialog的六种创建方式 创建AlertDialog的步骤: 1.创建AlertDialog.Builder对象 2.调用Builder对象的setTitle方法设置标题,setIcon方 ...

  7. 了解HTML CSS选择器操作和特性

    子选择器 在CSS样式表中, 有时候我们需要为一个选择器进行再次的选择, 比如要为某段落标签下的<span>标签进行样式设定(<span>标签必须为段落标签下的第一代子元素, ...

  8. iOS---A valid provisioning profile for this executable was not found

    把Target中的Code Signing Identity也设置成iPhone Develop就ok了,这样一切都说的通了,唯一不合理的就是在Project切换Code Signing Identi ...

  9. 多人开发Xcode工程冲突,打不开解决办法

    在公司多人协作开发,相信好多程序员都遇到非常忧伤的问题,就是工程打不开,这样就无从下手,好多程序怨只能再从代码服务器上下载一份新的代码,今天军哥教你几个小技巧,让你的bigger瞬间提升一个档次 在公 ...

  10. 添加 All Exceptions 断点后, 每次运行都会在 main.m 中断的一种解决方法

    在本人项目添加导入和使用新的字体过程中,遇到一个很奇怪的问题: 项目开启了全局断点,但是每次启动都会运行在mian.m中断,点击下一步程序继续正常运行. 不知道是什么原因,于是google百度寻找答案 ...