極簡 useState:手寫 20 行,支持多次 setState 合并

不依賴 React,用 閉包 + 批處理隊列 實現可合并更新的 useState


一、20 行完整代碼

function createUseState(initialValue) {let state = initialValue;let pending = null;              // 合并隊列let listeners = [];const flush = () => {if (pending !== null) {state = pending(state);pending = null;listeners.forEach(fn => fn(state));}};const useState = (value) => {if (arguments.length) state = value; // 初始化return [state,(updater) => {// 合并更新:函數或值pending = typeof updater === 'function'? (prev) => updater(prev): () => updater;Promise.resolve().then(flush); // 微任務批處理}];};useState.subscribe = (fn) => listeners.push(fn);return useState;
}

二、使用示例

const [count, setCount] = createUseState(0);setCount(c => c + 1);
setCount(c => c + 2); // 合并執行,state 變為 3
console.log(count);   // 3

三、一句話總結

20 行閉包 + 微任務批處理,讓多次 setState 合并為一次更新。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/94683.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/94683.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/94683.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

LabVIEW Vision視覺引導撐簧圈智能插裝

為解決人工插裝連接器撐簧圈時勞動強度大、效率低、一致性差的問題,例以 LabVIEW為開發平臺,結合 IMAQ Vision 機器視覺庫,搭配精密硬件搭建智能插裝系統。系統可適配 9 芯、13 芯、25 芯、66 芯、128 芯 5 種規格工件,經 100 只產…

【Lua】題目小練11

-- 題目1:-- 給定表 t {"apple", "banana", "apple", "orange", "banana", "apple"}-- 寫一個函數 countFreq(tbl) 返回一個新表,統計每個元素出現次數-- 例如:返回 {apple3, …

ElementUI之菜單(Menu)使用

文章目錄項目創建創建項目運行項目整理目錄刪除src/assets中的所有logo.png刪除src/components中的所有文件修改src/route/index.js刪除src/views中所有文件修改src/app.vue整理完目錄如下引入ElementUI安裝ElementUI引入ElementUI測試是否安裝成功編寫src/app.vue運行結果編寫…

Python訓練營打卡Day44-通道注意力(SE注意力)

知識點回顧: 不同CNN層的特征圖:不同通道的特征圖什么是注意力:注意力家族,類似于動物園,都是不同的模塊,好不好試了才知道。通道注意力:模型的定義和插入的位置通道注意力后的特征圖和熱力圖 內…

shiro進行解密

目錄Shiro 解密的核心注意事項1. 密碼處理:堅決避免 “可逆解密”2.例子【自己模擬數據庫,未連數據庫】:Shiro 解密的核心注意事項 1. 密碼處理:堅決避免 “可逆解密” 禁用明文存儲:永遠不要將明文密碼存入數據庫,必須使用 Has…

更改 Microsoft Edge 瀏覽器的緩存與用戶數據目錄位置

Microsoft Edge瀏覽器默認會將緩存文件和用戶數據存儲在系統盤(通常是C盤),隨著使用時間的增長,這些文件可能會占用大量空間。本文將詳細介紹多種更改Edge瀏覽器緩存位置和用戶數據目錄位置的方法,幫助您更好地管理磁盤…

【傳奇開心果系列】Flet框架實現的圖形化界面的PDF轉word轉換器辦公小工具自定義模板

let框架實現的圖形化界面的PDF轉word轉換器辦公小工具自定義模板一、效果展示截圖二、PDF轉Word轉換器概括介紹三、功能特性四、安裝依賴五、運行程序六、使用說明七、注意事項八、技術棧九、系統要求十、源碼下載地址 一、效果展示截圖二、PDF轉Word轉換器概括介紹 一個基于Fl…

STM32 定時器(PWM輸入捕獲)

以下是基于STM32標準庫(以STM32F103為例)實現PWM輸入模式(自動雙沿捕獲)的完整代碼,通過配置定時器的PWM輸入模式,可自動捕獲外部PWM信號的周期(頻率)?和占空比,無需手動…

Web安全開發指導規范文檔V1.0

一、背景 團隊最近頻繁遭受網絡攻擊,引起了部門技術負責人的重視,筆者在團隊中相對來說更懂安全,因此花了點時間編輯了一份安全開發自檢清單,覺得應該也有不少讀者有需要,所以將其分享出來。 二、編碼安全 2.1 輸入驗證 說明 檢查項 概述 任何來自客戶端的數據,如URL和…

在Godot中為您的游戲添加并控制游戲角色的完整技術指南

這是一個在Godot中為您的游戲添加并控制玩家角色的完整技術指南。這個過程分為三大步:?準備資源、構建場景、編寫控制腳本。道可道,非常道,名可名,非常名!第一步:準備資源(建模與動畫&#xff…

Flink 狀態 RocksDBListState(寫入時的Merge優化)

RocksDBListState<K, N, V> RocksDBListState 繼承自 AbstractRocksDBState<K, N, List<V>>&#xff0c;并實現了 InternalListState<K, N, V> 接口。繼承 AbstractRocksDBState: 這意味著它天然獲得了與 RocksDB 交互的底層能力&#xff0c;包括&…

zookeeper-保姆級配置說明

一. 基本配置&#xff1a;clientPort&#xff1a; 客戶端連接的服務器所監聽的tcp端口&#xff0c;默認2181dataDir&#xff1a;內存數據庫保存的數據路徑。myid也存放在這個目錄下&#xff0c;數據以異步方式寫入。dataLogDir&#xff1a;事務日志存放路徑。服務在確認一個事務…

半小時打造七夕傳統文化網站:Qoder AI編程實戰記錄

背景 最近七夕到了&#xff0c;恰逢Qoder上線&#xff0c;萌生了一個想法&#xff0c;寫一個以中國傳統七夕為主題的網站。 七夕中國傳統情人節 Qoder 介紹 Qoder 是阿里巴巴推出的一款旨在提升開發效率的 AI 編程平臺。它通過上下文工程技術和智能體輔助&#xff0c;幫助開…

常見的 Loader 和 Plugin?

Loader: babel-loader&#xff1a;將ES6的代碼轉換成ES5的代碼。css-loader&#xff1a;解析CSS文件&#xff0c;并處理CSS中的依賴關系。style-loader&#xff1a;將CSS代碼注入到HTML文檔中。file-loader&#xff1a;解析文件路徑&#xff0c;將文件賦值到輸出目錄&#xff0…

設計模式學習筆記-----抽象策略模式

抽象策略模式由五個核心組件組成策略接口定義所有策略的統一規范&#xff0c;是策略模式的 "契約"mark()&#xff1a;策略的唯一標識&#xff08;類似字典的 key&#xff09;&#xff0c;默認返回 null&#xff0c;需具體策略實現類重寫&#xff08;如InterviewSubje…

RabbitMQ面試精講 Day 30:RabbitMQ面試真題解析與答題技巧

【RabbitMQ面試精講 Day 30】RabbitMQ面試真題解析與答題技巧 開篇&#xff1a;系列收官之作&#xff0c;直擊面試核心 今天是“RabbitMQ面試精講”系列的第30天&#xff0c;也是本系列的收官之作。經過前29天對RabbitMQ核心概念、高級特性、集群架構、性能調優與開發運維的系…

Coze Studio開源版:AI Agent開發平臺的深度技術解析- 入門篇

Coze Studio開源版&#xff1a;AI Agent開發平臺的深度技術解析 引言 在人工智能快速發展的今天&#xff0c;AI Agent&#xff08;智能體&#xff09;已成為連接大語言模型與實際應用場景的重要橋梁。然而&#xff0c;構建一個功能完整、性能穩定的AI Agent開發平臺并非易事&am…

一文了解 DeepSeek 系列模型的演進與創新

近年來&#xff0c;DeepSeek 團隊在大語言模型&#xff08;LLM&#xff09;領域持續發力&#xff0c;圍繞模型架構、專家路由、推理效率、訓練方法等方面不斷優化&#xff0c;推出了一系列性能強勁的開源模型。本文對 DeepSeek 系列的關鍵論文進行了梳理&#xff0c;幫助大家快…

開源大模型本地部署

一、大模型 T5\BERT\GPT → Transformer的兒子→自注意力機制神經網絡 大模型&#xff0c; Large Model&#xff0c;是指參數規模龐大、訓練數據量巨大、具有強泛化能力的人工智能模型&#xff0c;典型代表如GPT、BERT、PaLM等。它們通常基于深度神經網絡&#xff0c;特別是T…

DAY 57 經典時序預測模型1

知識點回顧 序列數據的處理&#xff1a; 處理非平穩性&#xff1a;n階差分處理季節性&#xff1a;季節性差分自回歸性無需處理 模型的選擇 AR(p) 自回歸模型&#xff1a;當前值受到過去p個值的影響MA(q) 移動平均模型&#xff1a;當前值收到短期沖擊的影響&#xff0c;且沖擊影…