React中的setState是宏任务还是微任务？
鏈€杩戞湁涓湅鍙嬮潰璇曪紝闈㈣瘯瀹橀棶浜嗕竴涓緢绮惧僵鐨勯棶棰橈紝灏辨槸鎴戝啓鍦ㄦ爣棰橀噷鐨勯棶棰樸€傝兘闂嚭杩欎釜闂锛屽緢鍙兘鏄潰璇曞畼瀵筊eact涓嶆槸寰堜簡瑙ｏ紝涔熷彲鑳芥槸鍥犱负闈㈣瘯瀹樼殑绠€鍘嗕笂鍐欎簡瀵筊eact寰堢啛鎮夈€傞潰璇曞畼鎯抽€氳繃杩欎釜闂鏉ュ垽鏂潰璇曞畼鏄惁鐪熺殑鐔熸倝React馃ぃ銆傞潰璇曞畼鐨勯棶棰樻槸鍚︽纭紵闈㈣瘯瀹樼殑闂鏄痵etState鏄畯浠诲姟杩樻槸寰换鍔★紝鎵€浠ュ湪浠栫殑璁ょ煡涓紝setState涓€瀹氭槸寮傛鎿嶄綔銆備负浜嗗垽鏂璼etState鏄惁涓哄紓姝ユ搷浣滐紝鍙互鍏堝仛涓疄楠岋紝閫氳繃CRA鏂板缓涓€涓猂eact宸ョ▼锛屽湪宸ョ▼涓紪杈戝涓嬩唬鐮侊細importReactfrom'react';importlogofrom'./logo.svg';import'./App.css';classAppextendsReact.Component{state={count:1000}render(){return(鎴戠殑绮変笣鏁帮細{this.state.count}
);}}瀵煎嚭榛樿搴旂敤锛涢〉闈㈢湅璧锋潵鏄繖鏍风殑锛氫笂闈㈢殑ReactLogo缁戝畾浜嗕竴涓偣鍑讳簨浠躲€傜幇鍦ㄦ垜浠渶瑕佸疄鐜拌繖涓偣鍑讳簨浠躲€傜偣鍑籐ogo鍚庯紝杩涜涓€娆etState鎿嶄綔锛岃缃畬鎴愬悗鎵撳嵃log锛屽苟鍦ㄨ缃搷浣滃墠娣诲姞瀹忎换鍔″拰寰换鍔°€?浠ｇ爜濡備笅锛歨andleClick=()=>{constfans=Math.floor(Math.random()*10)setTimeout(()=>{console.log('macrotasktrigger')})Promise.resolve().then(()=>{console.log('microtasktriggered')})this.setState({count:this.state.count+fans},()=>{console.log('鏂扮矇涓濇暟锛?,fans)})}鏄剧劧锛岀偣鍑籐ogo鍚庯紝鍏堝畬鎴恠etState鎿嶄綔锛岀劧鍚庢槸microtask鐨勮Е鍙戝拰macrotask鐨勮Е鍙戙€傛墍浠etState鐨勬墽琛屾椂鏈烘棭浜巑icrotasks鍜宮acrotasks銆傚嵆渚垮姝わ紝涔熷彧鑳借瀹冪殑鎵ц鏃舵満鏃╀簬Promise.then锛屽苟涓嶈兘璇佹槑瀹冩槸涓€涓悓姝ヤ换鍔°€俬andleClick=()=>{constfans=Math.floor(Math.random()*10)console.log('寮€濮嬭繍琛?)this.setState({count:this.state.count+fans},()=>{console.log('鏂板绮変笣鏁帮細',fans)})console.log('缁撴潫杩愯')}浠庤繖閲屾潵鐪嬶紝setState浼间箮鍙堟槸涓€涓紓姝ユ搷浣溿€備富瑕佹槸鍥犱负鍦≧eact鍜岀粦瀹氱殑浜嬩欢娴佺殑鐢熷懡鍛ㄦ湡涓紝鎵€鏈夌殑setState鎿嶄綔閮戒細鍏堢紦瀛樺埌涓€涓槦鍒椾腑锛岀瓑鏁翠釜浜嬩欢缁撴潫鎴栬€卪ount杩囩▼缁撴潫鍚庯紝鍐嶆妸涔嬪墠缂撳瓨鐨剆etState闃熷垪鍙栧嚭涓€娆¤绠楀苟瑙﹀彂鐘舵€佹洿鏂般€傚彧瑕佹垜浠烦鍑篟eact鐨勪簨浠舵祦鎴栫敓鍛藉懆鏈燂紝灏卞彲浠ユ墦鐮碦eact瀵箂etState鐨勬帶鍒躲€傛渶绠€鍗曠殑鏂规硶鏄皢setState鏀惧湪setTimeout鐨勫尶鍚嶅嚱鏁颁腑銆俬andleClick=()=>{setTimeout(()=>{constfans=Math.floor(Math.random()*10)console.log('寮€濮嬭繍琛?)this.setState({count:this.state.count+fans},()=>{console.log('鏂板绮変笣鏁帮細',fans)})console.log('缁撴潫杩愯')})}鍙互鐪嬪嚭setState鏈川涓婅繕鏄竴涓簨浠跺惊鐜?骞舵病鏈夊垏鎹㈠埌鍙︿竴涓畯浠诲姟鎴栧井浠诲姟銆傚畠鍦ㄦ搷浣滀笂鏄熀浜庡悓姝ヤ唬鐮佸疄鐜扮殑锛屼絾鍦ㄨ涓轰笂鐪嬭捣鏉ユ槸寮傛鐨勩€傛墍浠ワ紝鏍规湰涓嶅瓨鍦ㄩ潰璇曞畼鐨勯棶棰樸€俁eact鏄浣曟帶鍒秙etState鐨勶紵鍓嶉潰鐨勪緥瀛愪腑锛宻etState鍙槸鍙樻垚浜唖etTimeout涓殑涓€涓悓姝ユ柟娉曪紝杩欐槸鎬庝箞鍋氬埌鐨勫憿锛焗andleClick=()=>{//姝ｅ父鎿嶄綔this.setState({count:this.state.count+1})}handleClick=()=>{//鑴辩React鎺у埗鐨勬搷浣渟etTimeout(()=>{this.setState({count:this.state.count+fans})})}鎴戜滑鍏堝洖椤句竴涓嬪墠闈㈢殑浠ｇ爜銆傚湪杩欎袱涓搷浣滀腑锛屾垜浠湪Performance涓褰曚竴娆¤皟鐢ㄦ爤锛岀湅鐪嬩袱涓皟鐢ㄦ爤鐨勫尯鍒€傛湁浠€涔堜笉鍚屻€傚湪璋冪敤鏍堜腑锛屽彲浠ョ湅鍒癈omponent.setState鏂规硶鏈€缁堜細璋冪敤enqueueSetState鏂规硶锛宔nqueueSetState鏂规硶鍐呴儴浼氳皟鐢╯cheduleUpdateOnFiber鏂规硶銆備笉鍚岀殑鏄紝姝ｅ父璋冪敤鏃讹紝scheduleUpdateOnFiber鏂规硶鍙細璋冪敤ensureRootIsScheduled銆傚皢璋冪敤flushSyncCallbackQueue鏂规硶銆傜寮€React浜嬩欢娴佹椂锛宻cheduleUpdateOnFiber浼氬湪ensureRootIsScheduled璋冪敤瀹屾垚鍚庣洿鎺ヨ皟鐢╢lushSyncCallbackQueue鏂规硶銆傛鏂规硶鐢ㄤ簬鏇存柊鐘舵€佸拰閲嶆柊娓叉煋銆俧unctionscheduleUpdateOnFiber(fiber,lane,eventTime){if(lane===SyncLane){//鍚屾鎿嶄綔ensureRootIsScheduled(root,eventTime);//鍒ゆ柇鏄惁杩樺湪React浜嬩欢娴佷腑//濡傛灉涓嶅湪锛岀洿鎺ヨ皟鐢╢lushSyncCallbackQueue鏇存柊if(executionContext===NoContext){flushSyncCallbackQueue();}}else{//寮傛鎿嶄綔}}涓婇潰鐨勪唬鐮佸彲浠ョ畝鍗曟弿杩颁竴涓嬭繖涓繃绋嬶紝涓昏鏄€氳繃鍒ゆ柇executionContext鏄惁绛変簬NoContext鏉ュ垽鏂綋鍓嶆洿鏂拌繃绋嬫槸鍚﹀湪React浜嬩欢娴佷腑銆備紬鎵€鍛ㄧ煡锛孯eact鍦ㄧ粦瀹氫簨浠舵椂锛屼細鍚堟垚浜嬩欢骞剁粺涓€缁戝畾鍒版枃妗ｄ笂锛坮eact@17宸茬粡鍙樻垚缁戝畾浜嬩欢娓叉煋鏃舵寚瀹氱殑DOM鍏冪礌锛夛紝鏈€鍚庣敱React娲惧彂銆傚綋鎵€鏈夌殑浜嬩欢閮借瑙﹀彂鍚庯紝棣栧厛浼氳皟鐢╞atchedEventUpdates$1鏂规硶锛岃繖閲屼細淇敼executionContext鐨勫€硷紝鎵€浠eact姝ゆ椂灏辩煡閬搒etState鍦ㄨ嚜宸辩殑鎺у埗涔嬩笅浜嗐€?/executionContext鐨勯粯璁ょ姸鎬乿arexecutionContext=NoContext;functionbatchedEventUpdates$1(fn,a){varprevExecutionContext=executionContext;executionContext|=EventContext;//淇敼鐘舵€乼ry{returnfn(a);}鏈€鍚巤executionContext=prevExecutionContext;//璋冪敤缁撴潫鍚庤皟鐢╢lushSyncCallbackQueueif(executionContext===NoContext){flushSyncCallbackQueue();鎵€浠ヤ笉绠℃槸鐩存帴璋冪敤flushSyncCallbackQueue杩樻槸鎺ㄨ繜璋冪敤锛岃繖閲屾湰璐ㄤ笂鏄悓姝ョ殑锛屽彧鏄瓨鍦ㄩ『搴忛棶棰樸€備互鍚庝細鏈夊紓姝ョ殑setState銆備粩缁嗙湅涓婇潰鐨勪唬鐮侊紝浼氬彂鐜板湪scheduleUpdateOnFiber鏂规硶涓紝浼氬垽鏂璴ane鏄惁鍚屾銆傞偅涔堟槸鍚﹀瓨鍦ㄥ紓姝ユ儏鍐靛憿锛焒unctionscheduleUpdateOnFiber(fiber,lane,eventTime){if(lane===SyncLane){//鍚屾鎿嶄綔ensureRootIsScheduled(root,eventTime);//鍒ゆ柇鏄惁杩樺湪React浜嬩欢娴佷腑//濡傛灉涓嶅湪锛岀洿鎺ヨ皟鐢╢lushSyncCallbackQueue鏇存柊if(executionContext===NoContext){flushSyncCallbackQueue();}}else{//寮傛鎿嶄綔}}React鍦ㄤ袱骞村墠鍗囩骇Fiber鏋舵瀯鏃讹紝灏变负瀹冪殑寮傛鍋氫簡鍑嗗銆傚湪React18涓紝Concurrent妯″紡灏嗘寮忓彂甯冦€傚叧浜嶤oncurrent妯″紡锛屽畼鏂逛粙缁嶅涓嬨€備粈涔堟槸骞跺彂妯″紡锛熷苟鍙戞ā寮忔槸涓€缁勬柊鐨凴eact鍔熻兘锛屽彲甯姪搴旂敤绋嬪簭淇濇寔鍝嶅簲骞舵牴鎹敤鎴风殑璁惧鎬ц兘鍜屼簰鑱旂綉閫熷害杩涜閫傚綋璋冩暣銆傚湪骞跺彂妯″紡涓嬶紝娓叉煋涓嶄細闃诲銆傚畠鏄彲涓柇鐨勩€傝繖鏀瑰杽浜嗙敤鎴蜂綋楠屻€傚畠鍚屾椂瑙ｉ攣浜嗕互鍓嶄笉鍙兘鐨勬柊鍔熻兘銆傜幇鍦ㄥ鏋滀綘鎯充娇鐢–oncurrent妯″紡锛屼綘闇€瑕佷娇鐢≧eact鐨勫疄楠岀増鏈€傚鏋滀綘瀵硅繖閮ㄥ垎鍐呭鎰熷叴瓒ｏ紝鍙互闃呰鎴戜箣鍓嶇殑鏂囩珷锛氥€奟eact 鏋舵瀯鐨勬紨鍙?- 浠庡悓姝ュ埌寮傛銆嬨€?/p>
