寰堝鍒濆鑰呯粡甯镐細闂€滄垜闇€瑕佸涔犲摢涓鏋讹紵鈥濆拰鈥滃涔犳鏋跺墠闇€瑕佹帉鎻″灏慗S鎴朤S锛熲€濇棤鏁板甫鏈変富瑙傝壊褰╃殑鏂囩珷閮藉湪瀹ｆ壃浣滆€呮洿鍠滄妗嗘灦鎴栧簱鐨勪紭鍔匡紝鑰屼笉鏄悜璇昏€呭睍绀哄叾鑳屽悗鐨勬蹇碉紝浠ュ仛鍑烘洿鏄庢櫤鐨勫喅瀹氥€傞偅涔堟垜浠厛鏉ヨВ鍐崇浜屼釜闂銆傚湪瀛︿範妗嗘灦涔嬪墠锛屼綘闇€瑕佹帉鎻″灏慗S鎴朤S锛熷敖鍙兘澶氬湴瀛︿範锛屼互渚挎偍鍙互鏇村ソ鍦扮悊瑙ｅ畠浠墍鍩轰簬鐨勬蹇点€傛偍闇€瑕佷簡瑙ｅ熀鏈暟鎹被鍨嬨€佸嚱鏁般€佸熀鏈繍绠楃鍜屾枃妗ｅ璞℃ā鍨?DOM)锛屽畠鏄疕TML鍜孋SS鐨凧S琛ㄧず銆傚叾浠栦竴鍒囬兘鍙互锛屼絾骞朵笉涓ユ牸瑕佹眰绮鹃€氭鏋舵垨搴撱€傚鏋滀綘鏄竴涓柊鎵嬶紝鐚殑JS搴旇鏄竴涓緢濂界殑璧风偣銆傜户缁涔犵洿鍒颁綘鎰熷埌鑷俊锛岀劧鍚庣户缁涔犵洿鍒颁綘鍐嶆鎰熷埌鑷俊銆傚綋浣犲JS/TS鏈変簡瓒冲鐨勪簡瑙ｅ悗锛屼綘灏卞彲浠ュ紑濮嬪涔犳鏋朵簡銆傛偍鍙互骞惰瀛︿範鐨勫叾浠栫煡璇嗐€傛湁鍝簺閲嶈姒傚康State锛堢姸鎬侊級Effects锛堝壇浣滅敤锛塎emoization锛堣蹇嗭級Templatingandrendering锛堟ā鏉垮拰娓叉煋锛夋墍鏈夌幇浠ｆ鏋堕兘浠庤繖浜涙蹇典腑娲剧敓鍑哄畠浠殑鍔熻兘stateState鍙槸涓轰綘鐨勫簲鐢ㄧ▼搴忔彁渚涘姩鍔涚殑鏁版嵁銆傚畠鍙兘澶勪簬鍏ㄥ眬绾у埆锛岄€傜敤浜庡簲鐢ㄧ▼搴忕殑澶у鏁扮粍浠讹紝鎴栭€傜敤浜庡崟涓粍浠躲€備笅闈㈡垜浠啓涓€涓畝鍗曠殑璁℃暟鍣ㄤ緥瀛愭潵璇存槑銆傚畠淇濈暀鐨勮鏁版槸state銆傛垜浠彲浠ヤ粠鐘舵€佽鍙栨垨鍐欏叆鐘舵€佷互澧炲姞璁℃暟鏈€绠€鍗曠殑琛ㄧず閫氬父鏄竴涓彉閲忥紝鍏朵腑鍖呭惈鎴戜滑鐨勭姸鎬佹墍鍖呭惈鐨勬暟鎹細璁╄鏁?0锛沜onstincrement=()=>{count++;};constbutton=document.createElement('button');button.textContent=count;button.addEventListener('鐐瑰嚮',閫掑);鏂囨。.body.appendChild锛堟寜閽級锛涗絾鏄繖娈典唬鐮佹湁涓€涓棶棰橈細鍍忚皟鐢╥ncrement鏂规硶閭ｆ牱淇敼count鐨勫€间笉浼氳嚜鍔ㄤ慨鏀规寜閽殑鏂囧瓧銆傛垜浠渶瑕佹墜鍔ㄦ洿鏂版墍鏈夌殑鍐呭锛屼絾鏄繖绉嶆柟寮忓浜庝唬鐮佸湪澶嶆潅鍦烘櫙涓嬬殑鍙淮鎶ゆ€у拰鍙墿灞曟€т笉鏄緢濂姐€傝鏁拌嚜鍔ㄦ洿鏂颁緷璧栨秷璐硅€呯殑鑳藉姏绉颁负鍙嶅簲鎬с€傝繖鏄€氳繃璁㈤槄骞堕噸鏂拌繍琛屽簲鐢ㄧ▼搴忕殑璁㈤槄閮ㄥ垎鏉ユ洿鏂扮殑銆傚嚑涔庢墍鏈夌幇浠ｅ墠绔鏋跺拰搴撻兘鍏锋湁浣跨姸鎬佸搷搴旂殑鑳藉姏銆傚熀鏈笂鍙互鍒嗕负3绉嶈В鍐虫柟妗堬紝鑷冲皯浣跨敤鍏朵腑鐨勪竴绉嶆垨澶氱鏉ュ疄鐜拌繖绉嶈兘鍔涳細Observables/Signals锛堝彲瑙傚療/淇″彿锛夈€丷econciliationofimmutableupdates锛堝崗璋冧笉鍙彉鏇存柊锛夈€乀ranspilation锛堢炕璇戯級杩欎簺姣旇緝鍚堥€傜洿鎺ョ敤鑻辨枃琛ㄨ揪姒傚康馃Observables/Signals锛堝彲瑙傚療/淇″彿锛塐bservables鍩烘湰涓婃槸鍦ㄨ鍙栫姸鎬佺殑鏃跺€欓€氳繃璁㈤槄鐨勬柟寮忔敹闆嗕緷璧栵紝鐒跺悗鍦ㄦ洿鏂扮殑鏃跺€欒Е鍙戜緷璧栫殑鏇存柊conststate=(initialValue)=>({_value:initialValue,get:function(){/*subscribe*/;returnthis._value;},set:function(value){this._value=value;/*triggerupdate*/;}});knockout鏄渶鏃╀娇鐢ㄧ殑妗嗘灦涔嬩竴杩欎釜姒傚康锛屽畠浣跨敤鐩稿悓鐨勫嚱鏁帮紝甯?涓嶅甫鍙傛暟杩涜鍐?璇昏闂繖绉嶆ā寮忔渶杩戝紑濮嬬敱Solid.js鍜宲reactsignals绛夋鏋跺疄鐜帮紱Vue鍜孲velte涓篃浣跨敤浜嗙浉鍚岀殑妯″紡銆俁xJS涓篈ngular鐨勫弽搴斿眰鎻愪緵浜嗗簳灞傚姛鑳斤紝杩欐槸涓€绉嶈秴瓒婄畝鍗曠姸鎬佺殑妯″紡鐨勬墿灞曘€係olid.js浣跨敤Stores锛堢敱setter鏂规硶鎿嶄綔鐨勫璞★級鏉ヨ繘涓€姝ユ娊璞′俊鍙稲econciliationofimmutablestates锛堝崗璋冧笉鍙彉鏇存柊锛夈€備笉鍙樻€ф槸鎸囧鏋滃璞＄殑鏌愪釜灞炴€у彂鐢熷彉鍖栵紝閭ｄ箞鏁翠釜瀵硅薄鐨勫紩鐢ㄥ氨浼氬彂鐢熷彉鍖栥€傛墍浠ュ崗璋冨櫒鍋氱殑灏辨槸閫氳繃绠€鍗曠殑寮曠敤姣旇緝鏉ュ垽鏂璞℃槸鍚﹀彂鐢熶簡鍙樺寲conststate1={todos:[{text:'understandimmutability',complete:false}],currentText:''};//鏇存柊currentText灞炴€onststate2={todos:state1.todos,currentText:'understandreconciliation'};//娣诲姞涓€涓猼odoconststate3={todos:[state1.todos[0],{text:'understandreconciliation',complete:true}],currentText:''};//鐢变簬涓嶅彲鍙樻€э紝杩欓噷浼氭姤閿檚tate3.currentText='Iamnotimmutable!';濡傛偍鎵€瑙侊紝閲嶆柊浣跨敤浜嗗鏈洿鏀归」鐨勫紩鐢ㄣ€傚鏋滃崗璋冨櫒妫€娴嬪埌涓嶅悓鐨勫璞″紩鐢紝瀹冨皢閲嶆柊杩愯鎵€鏈夌粍浠讹紝浠ヤ究鎵€鏈夌粍浠剁姸鎬侊紙閬撳叿銆佸蹇樺綍銆佹晥鏋溿€佷笂涓嬫枃锛変娇鐢ㄦ渶鏂扮殑瀵硅薄銆傜敱浜庤鍙栬闂槸琚姩鐨勶紝鍥犳闇€瑕佹墜鍔ㄦ寚瀹氬鍝嶅簲鍊肩殑渚濊禆鎬с€傛樉鐒讹紝鎮ㄤ笉浼氫互杩欑鏂瑰紡瀹氫箟鐘舵€併€傛偍瑕佷箞浠庣幇鏈夊睘鎬ф瀯寤虹姸鎬侊紝瑕佷箞浣跨敤缂╁噺鍣ㄦ瀯寤虹姸鎬併€俽educer鍑芥暟鎺ュ彈涓€涓姸鎬佸璞″苟杩斿洖涓€涓柊鐨勭姸鎬佸璞°€俽eact鍜宲react浣跨敤杩欑妯″紡銆傚畠閫傚悎涓巚DOM涓€璧蜂娇鐢紝鎴戜滑灏嗗湪绋嶅悗鎻忚堪妯℃澘鏃舵帰璁ㄥ畠銆傚苟闈炴墍鏈夋鏋堕兘鍦╲DOM鐨勫府鍔╀笅浣跨姸鎬佸畬鍏ㄥ搷搴斻€傛瘮濡侻ithril.JS鍦ㄧ姸鎬佷慨鏀瑰悗娌℃湁瑙﹀彂鐩稿簲鐨勭敓鍛藉懆鏈熶簨浠讹紝鎴栬€呮墜鍔ㄨ皟鐢╩.redraw()鏂规硶锛屽氨鍙互瑙﹀彂鏇存柊銆俆ranspilation锛堢炕璇戯級Transpilation姝ｅ浜庢瀯寤洪樁娈点€傞噸鍐欐垜浠殑浠ｇ爜锛岃浠ｇ爜鍙互鍦ㄦ棫鐗堟祻瑙堝櫒涓繍琛岋紝鎴栬€呰祴浜堜唬鐮佸叾浠栬兘鍔涳紱鍦ㄨ繖绉嶆儏鍐典笅锛岃浆璇戠敤浜庝慨鏀逛綔涓哄弽搴旂郴缁熶竴閮ㄥ垎鐨勭畝鍗曞彉閲忋€係velte鍩轰簬缈昏瘧鍣紝閫氳繃鐪嬩技绠€鍗曠殑鍙橀噺澹版槑鍜岃闂紝涔熶负浠栦滑鐨勫搷搴斿紡绯荤粺鎻愪緵浜嗚兘鍔涘彟澶栵紝Solid.js涔熶娇鐢ㄤ簡Transpilation锛屼絾鏄疶ranspilation鍙敤鍦ㄦā鏉夸笂锛屼笉浼氱敤鍦ㄧ姸鎬丒ffects涓婏紝澶у鏁版儏鍐典笅锛屾垜浠渶瑕佸仛鐨勬洿澶氭槸鎿嶄綔鍝嶅簲寮忕姸鎬侊紝鑰屽緢灏戦渶瑕佹搷浣滃熀浜庣姸鎬佺殑DOM娓叉煋銆傛垜浠渶瑕佺鐞嗗壇浣滅敤銆傝繖浜涘壇浣滅敤閮芥槸鐢变簬瑙嗗浘鏇存柊浠ュ鐨勭姸鎬佸彉鍖栬€屽彂鐢熺殑浜嬫儏锛堝敖绠℃湁浜涙鏋朵篃灏嗚鍥炬洿鏂拌涓哄壇浣滅敤锛屼緥濡係olid.js锛夈€傝璁颁綇锛屽湪鍓嶉潰鐨勭姸鎬佺ず渚嬩腑锛屾垜浠晠鎰忓皢璁㈤槄鎿嶄綔鐨勪唬鐮佺暀绌恒€傜幇鍦ㄨ鎴戜滑灏嗚繖浜涚暀绌轰互澶勭悊鍓綔鐢紝浠ヤ究绋嬪簭鍙互鍝嶅簲鏇存柊constcontext=[];conststate=(initialValue)=>({_subscribers:newSet(),_value:initialValue,get:function(){constcurrent=context.at(-1);if(current){this._subscribers.add(current);}returnthis._value;},set:function(value){if(this._value===value){return;}this._value=value;this._subscribers.forEach(sub=>sub())};}});consteffect=(fn)=>{constexecute=()=>{context.push(execute);灏濊瘯{fn();}鏈€鍚巤context.pop();}};鎵ц锛堬級;};涓婇潰鐨勪唬鐮佸熀鏈笂鏄痯reactsignals鎴栬€匰olid.jsreactivestate鐨勭畝鍖栫増锛屽畠涓嶅寘鍚敊璇鐞嗗拰澶嶆潅鐨勭姸鎬佸鐞嗭紙浣跨敤鍑芥暟鎺ユ敹鍓嶄竴涓姸鎬佸€硷紝杩斿洖涓嬩竴涓姸鎬佸€硷級锛屼絾鏄繖浜涘緢瀹规槗娣诲姞銆傝繖鍏佽鎴戜滑浣垮墠闈㈢殑绀轰緥鎴愪负鍙嶅簲寮忕殑锛歝onstcount=state(0);constincrement=()=>count.set(count.get()+1);constbutton=document.createElement('button');effect(()=>{button.textContent=count.get();});button.addEventListener('click',increment);document.body.appendChild(button);鈽濇偍鍙互灏濊瘯杩愯浠ヤ笅涓や釜浠ｇ爜浠ヤ笂鏁堟灉Blockexample锛屾簮鐮佸湴鍧€鍦ㄥぇ澶氭暟鎯呭喌涓嬶紝妗嗘灦鍏佽Effect鍦ㄤ笉鍚岀敓鍛藉懆鏈熸覆鏌揇OM涔嬪墠銆佹湡闂存垨涔嬪悗杩愯Memoization銆傝蹇嗗寲鏄寚缂撳瓨鐘舵€佸€肩殑璁＄畻缁撴灉锛屾敼鍙樼粨鏋滄洿鏂版椂闂寸殑渚濊禆鎬с€傚畠鍩烘湰涓婃槸涓€涓繑鍥炴淳鐢熺姸鎬佺殑Effect銆傚湪涓€浜涙鏋朵腑锛屾瘮濡俽eact銆乸react锛屽畠浼氶噸鏂拌繍琛屽畠鐨勭粍浠跺嚱鏁帮紝浠庤€岄伩鍏嶈繖閮ㄥ垎缁勪欢鍦ㄥ畠鎵€渚濊禆鐨勭姸鎬佹病鏈夋敼鍙樼殑鎯呭喌涓嬭閲嶆柊娓叉煋銆傚浜庡叾浠栨鏋讹紝鎯呭喌鎭版伆鐩稿弽锛氬畠鍏佽鎮ㄩ€夋嫨缁勪欢鐨勪竴閮ㄥ垎杩涜鍙嶅簲寮忔洿鏂帮紝鍚屾椂缂撳瓨浠ュ墠鐨勮绠椼€傚浜庢垜浠畝鍗曠殑鍝嶅簲寮忕郴缁燂紝memo澶ц嚧鏄繖鏍峰疄鐜扮殑constmemo=(fn)=>{letmemoized;effect(()=>{if(memoized){memoized.set(fn());}else{memoized=state(fn());}});returnmemoized.get;};妯℃澘鍜屾覆鏌撶幇鍦ㄦ湁鎴戜滑鎯宠鏄剧ず缁欑敤鎴风殑鍘熷銆佹淳鐢熷拰缂撳瓨鐘舵€併€傚湪鎴戜滑鐨勪緥瀛愪腑锛屾垜浠洿鎺ユ搷浣淒OM鏉ユ坊鍔犳寜閽苟鏇存柊鎸夐挳鐨勫唴瀹规枃鏈€備负浜嗘敼鍠勫紑鍙戜綋楠岋紝鍑犱箮鎵€鏈夌幇浠ｆ鏋堕兘鏀寔DSL鍦ㄤ唬鐮佷腑缂栧啓绫讳技浜庢墍闇€杈撳嚭鐨勫唴瀹广€傝櫧鐒舵湁涓嶅悓鐨勯鏍硷紝渚嬪.jsx銆?vue銆?svelte鏂囦欢锛屼絾褰掓牴缁撳簳閮芥槸鐢ㄧ被浼糎TML鐨勪唬鐮佽〃绀篋OM銆傛墍浠ュ熀鏈笂
