欢迎吐槽讨论

　　前言

　　　　笔者在React经常使用setState，在学习过程中作笔记以作总结，欢迎讨论。

　　关于setState的核心观点　　　　

　　　　1 . 执行setState不都是异步的。

　　　　2 . setState能够缓存多次结果，对最晚的setState进行更新 ( batchedUpdate 批次式更新 )

　　代码部分

  1. // typescript
  2. let stateList = [];
  3. let LOCK = false;
  4. const ele = document.getElementById('test');
  5. const view = document.getElementById('v');
  6. const setState = (arg)=>{
  7.     if(!LOCK){
  8.         render(arg)
  9.     }else{
  10.         stateList.push(arg);
  11.     }
  12. }
  13. const render = (arg)=>{
  14.     alert('我只执行了一次render');
  15.     view.innerHTML = arg
  16. }
  17. // 启动
  18. ele.onclick = function() {
  19.     const myT = new Transaction();
  20.     myT.perform(()=>{
  21.         console.log('i am cb');
  22.         setState('ONE');
  23.         setState('TWO');
  24.         setState('THREE');
  25.         setState('FOUR');
  26.     });
  27. }
  28.  
  29. class Transaction {
  30.     constructor() {
  31.  
  32.     }
  33.     _init() {
  34.         // 上锁
  35.         LOCK = true;
  36.         console.log('i am init');
  37.     }
  38.     _close() {
  39.         LOCK = false;
  40.         console.log('i am close');
  41.         // batch update
  42.         setState(stateList.pop());
  43.         // 解锁、清空stateList
  44.         stateList = [];
  45.  
  46.     }
  47.     async perform(cb){
  48.         await this._init();
  49.         cb();
  50.         await this._close();
  51.     }
  52. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <h2>每次执行setState不应该都进行render，而是应该render最后一次setState，观察console更佳</h2>
  11.     <h3 id="test">点我</h3>
  12.     <h3 id="v"></h3>
  13.     <pre>
  14.         ele.onclick = function() {
  15.             const myT = new Transaction();
  16.             myT.perform(()=>{
  17.                 console.log('i am cb');
  18.                 setState('ONE');
  19.                 setState('TWO');
  20.                 setState('THREE');
  21.                 setState('FOUR');
  22.             });
  23.         }
  24.     </pre>
  25. <script src="batchUpdate.js"></script>
  26. </body>
  27. </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. java语言中除数为零问题

    在以下几个例子中,输出结果如何? float aa=0; System.out.println(aa/0); System.out.println(1/aa); System.out.println( ...

  2. String类型的属性和方法

    × 目录 [1]属性 [2]对象通用方法 [3]访问字符方法[4]字符串拼接[5]创建子串方法[6]大小写转换[7]查找子串位置[8]正则匹配方法[9]去除首尾空格[10]字符串比较 前面的话 前面已 ...

  3. iOS 多线程GCD简介

    一.简介 1.1 GCD (Grand Central Dispatch )是Apple开发的一个多核编程的解决方法. Grand 含义是“伟大的.宏大的”,Central含义“中央的”,Dispat ...

  4. iOS NSArray数组过滤

    需求:在一个数组里面,将在这个数组中的并且在另一个数组里面的元素过滤掉. 即:在一个数组dataArray里面,将在dataArray数组中的并且在filteredArray数组里面的元素过滤掉. / ...

  5. iOS PresentViewControlle后,直接返回根视图

    在开发中:用[self presentViewController:VC animated:YES completion:nil];实现跳转,多次跳转后,直接返回第一个. 例如: A presentV ...

  6. 设置Hyper-V下Linux机器的网卡(转载)

    今天需要再安装一台CentOS虚拟机,一时心血来潮,选择了一个basic server而不是之前选择的Desktop.安装之后依旧没有网卡,意料之中,呵呵.没有network,没有ifcfg-eth0 ...

  7. Snort 安装 配置 - Archlinux

    About Snort Snort是一套开放源代码(OpenSource and free)的网络入侵预防软件(NIPS)与网络入侵检测软件(NIDS).Snort使用了以侦测签名(signature ...

  8. JavaScript单元测试框架JsUnit基本介绍和使用

    JavaScript单元测试框架JsUnit基本介绍和使用 XUnit framework XUnit是一套标准化的独立于语言的概念和结构集合,用于编写和运行单元测试(Unit tests). 每一个 ...

  9. 用CAShapeLayer实现一个简单的饼状图（PieView）

    自己写了一个简单的PieView,demo在这里:https://github.com/Phelthas/LXMPieView 效果如图: 参考了https://github.com/kevinzho ...

  10. Android横屏下Fragment界面重叠问题

    前言: 项目是基于平板开发的,设计的界面是要求横屏展示界面.所以我将所有的Activity都强制设置为横屏 android:screenOrientation="landscape" ...