欢迎吐槽讨论

　　前言

　　　　笔者在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. ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  2. SQL Server创建索引(转)

    什么是索引 拿汉语字典的目录页(索引)打比方:正如汉语字典中的汉字按页存放一样,SQL Server中的数据记录也是按页存放的,每页容量一般为4K .为了加快查找的速度,汉语字(词)典一般都有按拼音. ...

  3. JAVAScript柯里化、部分应用参数终极理解

    一.柯里化 在定义柯里化.部分应用参数的概念前,首先必须对闭包有深入的了解和定义,闭包一句话说清楚:函数返回值为函数. 柯里化的定义:将多参函数分解为按步骤接受单个参数的函数,如下代码: var mo ...

  4. [deviceone开发]-日程日历示例

    一.简介 用户Wang利用Gridview和其它组件绘制的日历和任务,基本实现一个完整的在线日程管理功能.另外还封装了很多js对象,非常值得参考学习.二.效果图 三.相关下载 https://gith ...

  5. html的meta总结，html标签中meta属性使用介绍

    引用:http://www.haorooms.com/post/html_meta_ds 前言 meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta ...

  6. include的用法例子，以及include+merge的用法例子

    [include+LinearLayout]的使用例子 AndroidIncludeLayout.java package com.AndroidIncludeLayout; import andro ...

  7. 【转】iOS夯实：ARC时代的内存管理

    iOS夯实:ARC时代的内存管理 什么是ARC Automatic Reference Counting (ARC) is a compiler feature that provides autom ...

  8. iOS 字典与JSON相互转换

    iOS 字典与JSON相互转换 首先简单说一下为什么会写这种幼稚的文章. 现在的网络请求几乎都是AFN完成的,AFN也为我们写了了JSON转换字典的方法,但是不要忘记后台是一个很爱用JSON的人群,H ...

  9. SLF4j：Log facade abstract

    内 容: 应用中使用slf4j的工作流程 简单示例 ILoggerFactory实例化过程 由ILoggerFactory创建Logger实例 slf4j 适配器实现 自定义适配器 slf4j 如何选 ...

  10. W3School-CSS 内边距 (padding) 实例

    CSS 内边距 (padding) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CS ...