typescript实现react中的批次式更新

最新推荐文章于 2025-08-19 08:41:01 发布

diankan7855

最新推荐文章于 2025-08-19 08:41:01 发布

阅读量135

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/BestMePeng/p/react_batchUpload.html

欢迎吐槽讨论

　　前言

　　　　笔者在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>