浠€涔堟槸鐘舵€佺鐞嗭紵鈥滅姸鎬佲€濇槸鎻忚堪搴旂敤绋嬪簭褰撳墠琛屼负鐨勪换浣曟暟鎹€傝繖鍙兘鍖呮嫭璇稿鈥滀粠鏈嶅姟鍣ㄨ幏鍙栫殑瀵硅薄鍒楄〃鈥濄€佲€滃綋鍓嶉€夋嫨鐨勯」鐩€濄€佲€滃綋鍓嶇櫥褰曠敤鎴风殑鍚嶇О鈥濆拰鈥滄妯″紡鏄惁鎵撳紑锛熲€濈瓑鍊笺€備紬鎵€鍛ㄧ煡锛屽湪寮€鍙戜竴涓鏉傚簲鐢ㄧ殑杩囩▼涓紝涓€涓ソ鐨勭姸鎬佺鐞嗘柟妗堟槸蹇呬笉鍙皯鐨勩€備笉浠呭彲浠ユ彁楂樼爺鍙戞晥鐜囷紝杩樺彲浠ラ檷浣庣爺鍙戝拰缁存姢鎴愭湰銆傞偅涔堢姸鎬佺鐞嗘柟妗堥偅涔堝锛屽畠浠箣闂存湁浠€涔堝尯鍒憿锛熸垜浠浣曢€夋嫨閫傚悎褰撳墠搴旂敤鐨勮В鍐虫柟妗堬紵鏈湡鎴戜滑灏嗕富瑕佸React甯歌鐨勭姸鎬佺鐞嗘柟妗堣繘琛屽姣斿垎鏋愶紝甯屾湜瀵瑰悇浣嶇湅瀹樻湁鎵€甯姪銆俁eact鐘舵€佺鐞嗘柟妗堜粙缁峢ookscontextreact-reduxmobxzustandjotairecoilvaltio鏂规瀵规瘮妗嗘灦鍘熺悊浼樼己鐐筯ookscontext鍩轰簬reacthook锛屽紑鍙戣€呭彲浠ュ疄鐜板唴閮?澶栭儴瀛樺偍1.绠€鍗曟槗鐢?br/>2.鏃犻渶鍙傝€冪涓夋柟搴擄紝浣撶Н鏈€灏?br/>3.鏀寔瀛樺偍鍏ㄥ眬鐘舵€侊紝浣嗕笉鎺ㄨ崘鍦ㄥ鏉傚簲鐢ㄤ腑浣跨敤
4.涓嶄緷璧栦簬react涓婁笅鏂囷紝鍙互鍦ㄧ粍浠跺璋冪敤锛堝湪澶栭儴瀛樺偍鐨勬儏鍐典笅锛?銆佸綋context鍊兼敼鍙樻椂锛屾墍鏈夊湪杩欎釜context涓娇鐢ㄧ殑Component閮戒細琚噸鏂版覆鏌撱€傚熀浜庡唴瀹圭淮鎶ょ殑妯″潡瓒婂锛屽奖鍝嶈寖鍥村氨瓒婂ぇ銆?br/>2.渚濊禆ContextProvider鍖呰浣犵殑搴旂敤锛屼慨鏀箂tore鏃犳硶瑙﹀彂搴旂敤椤跺眰娓叉煋锛圓pp.tsx灞傦級
3.鍙梪i妗嗘灦绾︽潫锛坮eact锛?br/>4.DependencyHooks璋冪敤react-reduxFlux鎬濇兂锛屽彂甯?璁㈤槄妯″紡锛岄伒寰嚱鏁板紡缂栫▼锛屽閮ㄥ瓨鍌?.涓嶄緷璧栦簬react涓婁笅鏂囷紝鍙互鍦ㄧ粍浠跺閮ㄨ皟鐢?br/>2.鏀寔鍏ㄥ眬鐘舵€佸瓨鍌?br/>3.Redux鏈韩鏄竴涓€氱敤鐘舵€佺殑瑙ｅ喅鏂规1.蹇冩櫤妯″瀷闇€瑕佷竴浜涙椂闂存潵鐞嗚В锛屽挨鍏舵槸褰撲綘涓嶇啛鎮夊嚱鏁板紡缂栫▼鐨勬椂鍊?br/>2.渚濋潬ContextProvider鏉ュ寘瑁呬綘鐨勫簲鐢紝淇敼store涓嶈兘鍦ㄥ簲鐢ㄧ▼搴忕殑椤堕儴锛圓pp.tsx灞傜骇锛夎Е鍙戞覆鏌?br/>3.鍙楅檺浜巙i妗嗘灦锛坮eact锛塵obx瑙傚療鑰呮ā寮?鏁版嵁鎴祦锛屽閮ㄥ瓨鍌?.浣跨敤鏂逛究锛屽叆闂ㄩ棬妲涗綆
2.涓嶄緷璧杛eact涓婁笅鏂囷紝鍙互鍦ㄧ粍浠跺璋冪敤
br/>3.鏀寔瀛樺偍鍏ㄥ眬鐘舵€?br/>4.閫氱敤鐘舵€佽В鍐虫柟妗?.鍙橀噺鐘舵€佹ā鍨嬶紝鍦ㄦ煇浜涙儏鍐典笅鍙兘浼氬奖鍝嶈皟璇?br/>2.闄や簡姣旇緝澶х殑灏哄澶栵紝鍙﹀锛屼綔鑰呬笉鎰熻鐩墠鏈変粈涔堟槑鏄剧殑涓嶈冻锛?.99MzustandFlux鎬濊矾锛岃瀵熻€呮ā寮忥紝澶栭儴瀛樺偍1.杞婚噺绾э紝鏄撶敤锛屽叆闂ㄩ棬妲涗綆
2.涓嶄緷璧杛eact涓婁笅鏂囷紝鍙互鍦ㄧ粍浠跺璋冪敤
3.鏀寔瀛樺偍鍏ㄥ眬鐘舵€?br/>4.閫氱敤鐘舵€佽В鍐虫柟妗?.妗嗘灦鏈韩涓嶆敮鎸乧omputed灞炴€э紝浣嗘槸computed鍙互鍩轰簬涓棿浠舵満鍒剁敤灏戦噺浠ｇ爜闂存帴瀹炵幇锛屾垨鑰呭熀浜庣涓夋柟搴搝ustand-computed瀹炵幇
jotai鍩轰簬reacthook锛屽唴閮ㄥ瓨鍌?.浣跨敤绠€鍗?br/>2.缁勪欢绮掑害瓒婄粏锛孞otai鎬ц兘瓒婂ソ
3.鏀寔瀛樺偍鍏ㄥ眬鐘舵€?.渚濊禆reactcontext锛屼笉鑳藉湪澶栭儴璋冪敤component锛岀浉瀵规潵璇磟ustand鍦╮eact鐜涔嬪鍜屽叏灞€鑳芥洿濂界殑宸ヤ綔
2.subjecttouiframeworkconstraint(react)recoiladvancedversionjotai锛屽熀浜巖eacthook+providercontext锛屽唴閮ㄥ瓨鍌ㄤ細姣攋otai閲嶄竴浜涳紝浣嗘槸鎬濊矾鍩烘湰涓€鏍凤紝鏈変竴浜沯otai涓嶆敮鎸佺殑鐗规€у拰API锛屾瘮濡?
1.鐩戝惉store鍙樺寲
2.鏇村鐨勫師瀛愭搷浣淎PI锛屾洿澶氱殑缂栫▼鍙兘鎬э紝鏇村鐨勪箰瓒ｃ€傚畠鍏锋湁jotai鐨勬墍鏈夌己鐐癸紝涓巎otai鐩告瘮锛?br/>1.浣跨敤recoil闇€瑕?RecoilRoot>鍖呰９搴旂敤绋嬪簭
2.鍐欎竴涓猻elector浼氬緢澶嶆潅銆俈altio鍩轰簬鏁版嵁鍔寔鍜屽閮ㄥ瓨鍌?.浣跨敤绠€鍗曪紝鍍弇obx锛堝儚vue锛変竴鏍风殑缂栫▼浣撻獙
2.鏀寔瀛樺偍鍏ㄥ眬鐘舵€?br/>3.涓嶄緷璧栦簬react涓婁笅鏂囷紝鍙互鍦ㄥ閮ㄨ皟鐢ㄧ粍浠?br/>4.閫氱敤鐘舵€佽В鍐虫柟妗?.鍙彉鐘舵€佹ā鍨嬶紝鍦ㄦ煇浜涙儏鍐典笅鍙兘浼氬奖鍝嶈皟璇?br/>2.鐩墠绗旇€呰繕娌℃湁鍙戠幇鍏朵粬鐗瑰埆澶х殑缂虹偣銆傛垜涓汉鐚滄祴锛屼箣鎵€浠tars灏戜簬zustand锛屾槸鍥犱负valtio鐨勬暟鎹弻鍚戠粦瀹氭€濊矾鍜宺eact鏈夊啿绐丼ourcehookscontext1.浣跨敤reacthooks+context鏂逛究蹇嵎鐨勭姸鎬佺鐞?.浣跨敤reacthooks+context鏋勫缓redux杩涜鐘舵€佺鐞唕eact-reduxmobximportReactfrom"react"importReactDOMfrom"react-dom"import{makeAutoObservable}from"mobx"import{observer}from"mobx-react"//鐘舵€佸拰鐩稿叧浜嬩欢classTimer{secondsPassed=0constructor(){makeAutoObservable(this)}increase(){this.secondsPassed+=1}reset(){this.secondsPassed=0}}constmyTimer=newTimer()//鏋勫缓涓€涓浉褰撳ぇ鐨勭粍浠禼onstTimerView=observer(({timer})=>(timer.reset()}>绉掕繃鍘讳簡锛歿timer.secondsPassed}))ReactDOM.render(,document.body)//瑙﹀彂鏇存柊浜嬩欢setInterval(()=>{myTimer.increase()},1000)zustandimport{create}from'zustand'//鐘舵€佸拰鐩稿叧浜嬩欢constuseBearStore=create((set)=>({bears:0,increasePopulation:()=>set((state)=>({bears:state.bears+1})),removeAllBears:()=>set({bears:0}),}))//娴佹煋鍥惧儚functionBearCounter(){constbears=useBearStore((state)=>state.bears)return

{bears}aroundhere...

}//瑙﹀彂鏇存柊鍑芥暟Controls(){constincreasePopulation=useBearStore((state)=>state.increasePopulation)returnoneup}jotaiimport{atom}from'jotai'constcountAtom=atom(0)functionCounter(){//鐘舵€佸強鐩稿叧浜嬩欢const[count,setCount]=useAtom(countAtom)return(

{count}setCount(c=>c+1)}>oneup

)}recoilconstfontSizeState=atom({key:'fontSizeState',default:14,});鍑芥暟FontButton(){const[fontSize,setFontSize]=useRecoilState(fontSizeState);return(setFontSize((size)=>size+1)}style={{fontSize}}>鐐瑰嚮鏀惧ぇ锛?}valtioimport{浜瞲y,useSnapshot}鏉ヨ嚜'valtio'conststate=proxy({count:0,text:'hello'})functionCounter(){constsnap=useSnapshot(state)return(

{snap.count}++state.count}>+1

)鐩稿叧寤鸿濡傛灉浣犻渶瑕乽seState+useContext鐨勬浛浠ｆ柟妗堬紝閭ｄ箞jotai灏卞緢閫傚悎锛屽嵆鍘熷瓙缁勪欢鐘舵€佺鐞嗘垨鑰呯粍浠堕棿灏戦噺State鍏变韩濡傛灉浣犱範鎯痳edux鎴栬€呭枩娆eact澶╃敓涓嶅彲鍙樼殑鏇存柊锛岄偅涔坺ustand浼氬緢閫傚悎銆傚鏋滄偍涔犳儻浜唙ue/slute/mobx锛屾垨鑰呮槸JS/React鐨勬柊鎵嬶紝valtio鐨勫彲鍙樻ā鍨嬪皢闈炲父閫傚悎銆傚鏋滀綘浣跨敤鐨勬槸zustand锛坮edux/绛変笉鍙彉鏁版嵁妯″瀷锛?immer锛屾帹鑽愪娇鐢╲altio(mobx)mobx鏈塧ctions鐨勬蹇碉紝valtio鐨勬蹇垫洿绠€鍗曪紙free锛夈€傚鏋滃笇鏈涢」鐩洿瑙勮寖锛屽彲浠ヤ娇鐢╩obx锛屽鏋滃笇鏈涢」鐩洿鑷敱鏂逛究锛屽彲浠ヤ娇鐢╲altiorecoil锛屽畠绫讳技浜巎otai鐨勭紪绋嬫€濇兂锛屼絾鏄彁渚涗簡鏇村鐨凙PI鍜岀壒鎬э紝瀵瑰師瀛愭€佺殑鎿嶄綔鎬ф洿寮猴紝灏佽浣撶Н涔熸洿澶э紝浣嗙敱浜嶳ecoil鍔熻兘搴炲ぇ锛屼娇鐢ㄨ捣鏉ユ瘮jotai鏇寸箒鐞愩€傚鏋滀綘甯屾湜椤圭洰杞诲阀鏂逛究锛屽彲浠ラ€夋嫨jotai銆傚鏋滀綘鎯冲皾璇曟洿澶氬師瀛愭€佺殑鍙兘鎬э紝閭ｅ氨璇曡瘯鍙嶅啿鍚с€傚鏋滆繖绡囨枃绔犲浣犳湁甯姪锛岃鐐逛釜璧烉煈崀涓嬫湡浼氬甫鏉ue鐘舵€佺鐞嗗伐鍏风殑浼樼己鐐瑰垎鏋愶紝娆㈣繋鍏虫敞鎴戠殑Blog馃専