浠嬬粛褰撳墠绔笟鍔″鏉傚害涓婂崌鍒颁竴瀹氱▼搴︽椂锛屽浣曟彁楂樺墠绔唬鐮佺殑璐ㄩ噺灏辨垚浜嗗ぇ瀹跺叡鍚岀殑璇濋.鍓嶇濂藉儚涔熼€冧笉杩囨敼鍒汉浠g爜锛岄噸鏋勶紝淇産ug鐨勫鍛姐€傞偅涔堬紝鎴戜滑濡備綍浠庨」鐩唬鐮佸眰闈㈡敼鍙樿繖绉嶆儏鍐靛憿锛熶负浜嗕繚璇侀」鐩瓵涔熻兘鏈夊簭鐨勪粙鍏ュ紑鍙戝晢B鐨勫紑鍙戯紝浠庤€屾渶澶ч檺搴﹀湴鍑忓皯浜哄憳寮€鏀紝瀹炵幇鐪熸鐨勯檷鏈鏁堬紵浠庝唬鐮佸眰闈㈡潵鐪嬶紝鎴戠綏鍒椾簡濡備笅锛屽ぇ姒傚涓嬶細宸ョ▼鏂归潰瀵硅秴闀垮嚱鏁扮殑鍚勭lint妫€鏌ュ拰绾︽潫閮芥病鏈夊仛濂斤紝鍗曚粠鍑芥暟鍚嶅緢闅惧垽鏂繖涓嚱鏁版槸骞蹭粈涔堢殑.鍋氬崄浠朵簨銆備竴涓唬鐮侀噺寰堥暱鐨勬ā鍧楋紝閲岄潰缁存姢浜嗗緢澶氶€昏緫銆傚緢闅句竴鐪肩湅鍑烘煇涓彉閲忓湪鍝噷琚慨鏀逛簡銆備竴涓粍浠朵笌璇ョ粍浠舵墍闇€鐨勬墍鏈変唬鐮佹贩鍚堝湪涓€璧枫€傛垜涓嶆槑鐧借亴璐e垎宸ョ殑閲嶈鎬с€傛病鏈夋槑纭殑鑱岃矗鍒掑垎鍝釜妯″潡鍋氫粈涔堬紝涔熸病鏈夋竻妤氬湴鐞嗚В鏁版嵁搴旇濡備綍娴佸姩浠ュ強濡備綍鏀瑰彉瀹冦€傛暟鎹祦绱婁贡锛岀己涔忓嚱鏁板紡涔﹀啓鎰忚瘑銆傚彉閲忓懡鍚嶉潪甯镐笉瑙勫垯銆傚彉閲忓懡鍚嶅緢妯$硦锛岄€氳繃鍛藉悕鍙互娓呮鐨勮鏄庝綔鐢ㄣ€傝嚜宸卞仛浠€涔堬紝鍗撮殢渚垮寰呭悇涓ā鍧椾箣闂寸殑鍏崇郴寰堥毦鎺у埗杩涘害锛岀劧鍚庝粨淇冨伐浣滃鑷碽ug銆傞偅涔堬紝鐩墠hooks涓氬姟缁勪欢鐨勫啓娉曟湁浠€涔堥棶棰樺憿锛熷熀浜巋ooks缂栧啓绾笟鍔$粍浠舵病鏈変换浣曢檺鍒躲€俇I鍜屼笟鍔¢€昏緫閮界淮鎶ゅ湪涓€涓嚱鏁板唴閮紝闈㈡潯寮忎唬鐮佹粙鐢燂紝寰堝鏄撳啓鍑鸿秺鏉ヨ秺闀跨殑缁勪欢涓氬姟閫昏緫浠g爜锛屼箙鑰屼箙涔嬮毦浠ョ淮鎶ゃ€備竴涓嚱鏁板緢瀹规槗鍦ㄥ唴閮ㄨ€﹀悎绫诲瀷銆佸父閲忋€佸悇绉嶉挬瀛愶紙useState銆乽seReducer銆乽seCallback绛夛級锛屽悇绉嶅嚱鏁帮紝鐢氳嚦寰堝閫昏緫澶勭悊閮芥贩鍦╠om灞傘€傛笎娓愬湴锛屽鐢ㄦ€т細瓒婃潵瓒婂樊锛屽彲鑳介渶瑕侀绻侀噸鏋勶紝鎻愬彇浠g爜鎵嶈兘杈惧埌澶嶇敤鐨勭▼搴︺€備絾鏄線寰€涓氬姟璋冨害涓嶈兘鍐嶆嬁璧扮淮鎶よ€佷唬鐮侊紝閭f€庝箞鍔炲憿锛焗ooks缁勪欢鐨勫垎绂汇€婇噸鏋?锛氭敼鍠勬棦鏈変唬鐮佺殑璁捐銆嬫枃绔犳彁鍒帮細灏嗗鏉傜殑浠g爜鍧楀垎瑙f垚鏇村皬鐨勫崟鍏冧笌鑹ソ鐨勫懡鍚嶅悓鏍烽噸瑕併€傚洜姝わ紝鎴戜滑闇€瑕佸湪鍥㈤槦鍐呴儴杈炬垚鍏辫瘑锛岃兘澶熶骇鐢熷浐瀹氱殑寮€鍙戣寖寮忥紝鑳藉浠g爜鍒嗙锛屽仛鍒拌亴璐f槑纭紝渚嬪锛氭ā鍧桝涓撻棬澶勭悊View缁勪欢锛屾ā鍧桞涓撻棬澶勭悊涓氬姟閫昏緫锛孋妯″潡涓撻棬缁存姢ts绫诲瀷绫诲瀷锛孌妯″潡涓撻棬缁存姢鍚勭甯搁噺锛孍妯″潡涓撻棬缁存姢publichooks閫昏緫锛孎妯″潡涓撻棬缁存姢css妯″潡绛夈€傞偅涔堝湪杩欎釜鍓嶆彁涓嬶紝鎴戜滑闇€瑕佸皢鍓嶇UI涓庝笟鍔¢€昏緫鍒嗙銆傜洰鍓嶏紝鏈変袱绉嶄富娴佹柟娉曘€備竴鏄娊鍙栫函閫昏緫锛岃繑鍥炲嚱鏁板唴閮ㄦ柟娉曞拰鐘舵€侊紱褰㈠紡鏄細constuseApp=()=>{const[name,setName]=useState('mike');constgetName=()=>{};constupdateName=()=>{};return{name,getName,updateName}}constAppView=()=>{const{name}=useApp();return
{name}
}杩欎釜鏂规硶娌℃湁浠€涔堝ぇ闂锛屼絾鏄繖绉嶄唬鐮佹病鏈夊唴鑱氭€э紝涓嶈兘鎻愪緵閫氱敤鐨勯€昏緫澶勭悊銆備笟鍔″彉鏇翠細寮曞彂澶氫釜浠g爜鐨勭淮鎶ゅ嵄鏈恒€傚叾娆★紝濡傛灉涓氬姟鍥㈤槦姣旇緝澶氾紝閭d箞灏辫鑰冭檻濡備綍瑙勮寖缁熶竴鍥㈤槦鍐呴儴鐨勭紪鍐欙紝濡備綍鏀寔鏇村仴澹殑涓氬姟浠g爜銆俇I鍜岄€昏緫鐨勫垎绂诲苟涓嶆槸鏈€缁堢洰鐨勩€傛渶缁堢洰鏍囧簲璇ユ槸褰㈡垚鏄撲簬缁存姢銆佹ā鍧楄亴璐e垎宸ユ槑纭€佽兘澶熷舰鎴愬浐瀹氱殑寮€鍙戞ā鍨嬨€佹槗浜庢墿灞曘€佽兘澶熻鑼冧笟鍔′娇鐢ㄥ満鏅€佸叿鏈夊己澶х敓鍛藉姏鐨勮В鍐虫柟妗堛€傚鏋滃彲浠ヨ繖鏍峰仛锛屼负浠€涔堝緢灏戞湁浜鸿繖鏍峰仛锛熷師鍥犲彲鑳藉嚭鍦ㄥぇ瀹跺鍔熻兘缁勪欢鐨勬€濊€冧笂銆傚湪hooks璇炵敓涔嬪墠锛屼汉浠櫘閬嶈涓哄嚱鏁板紡缁勪欢鏄病鏈夌姸鎬佺殑锛屾墍浠ュ綋props鍥哄畾鏃讹紝鍑芥暟寮忕粍浠舵瘡娆℃覆鏌撶殑缁撴灉閮芥槸涓€鏍风殑锛屽嵆鐩稿悓鐨勮緭鍏ユ€绘槸鍙互寰楀埌鐩稿悓鐨勭粨鏋?杈撳嚭銆備絾鏄幇鍦ㄥ嚭鐜颁簡hooks锛屽彲浠ュ湪鍑芥暟缁勪欢鍐呴儴缁存姢鐘舵€侊紝鐩稿悓鐨勮緭鍏ヤ笉涓€瀹氫細浜х敓鐩稿悓鐨勮緭鍑恒€傚彟澶栵紝杩欎釜鏂规硶鍜宺eusablehooks鏈変粈涔堝尯鍒紵濡傛灉涓よ€呴兘鏄敤hooks缁存姢鐨勶紝鎬庝箞鍖哄垎鍛紵鍙︿竴绉嶆柟娉曟槸淇濈暀涓氬姟閫昏緫锛屼絾鎻愬彇UI缁勪欢锛屼笉鎺ㄨ崘杩欐牱鍋氥€傛湁鐐圭被浼间簬瀛愮粍浠讹紝鐖跺瓙缁勪欢涔嬮棿鐨勮瑙変氦娴佹劅闅忎箣鑰屾潵銆傛帴涓嬫潵鐪嬬湅绾痟ooks缁勪欢琚療鐥呯殑涓€浜涢棶棰橈細绾痟ooks缁勪欢鐨勯棶棰?.useState闅剧敤銆傚鏋滅姸鎬佸緢澶氾紝闇€瑕佷竴涓竴涓淮鎶わ紝鍐欑殑涓嶅绠€娲侊紱瓒婂鏉傦紝缁忓父浼氬嚭鐜颁竴涓ā鍧楅渶瑕佺淮鎶ゅ嚑鍗佷釜useState鐨勫按灏儏鍐点€?.useReducer+context鐨勫叏灞€鐘舵€佷笉濂界敤銆傝澶氬姩浣滅被鍨嬩粛鐒堕渶瑕佸畾涔夛紝骞朵笖闇€瑕佹彁渚涙彁渚涜€呫€備娇鐢╱seReducer璺ㄧ粍浠跺叡浜姸鎬侀潪甯搁夯鐑︺€?銆乽seCallback鐨勭敤娉曚笉澶熸竻鏅般€備笉鐭ラ亾浠€涔堟椂鍊欒鐢紝浠€涔堟椂鍊欎笉璇ョ敤銆?鐢熷懡鍛ㄦ湡闇€瑕佸紩鍏seEffect锛岄渶瑕佷汉宸ョ鐞嗭紝璇箟涓嶅銆?銆佸熀浜巋ooks鐨勪笟鍔$粍浠讹紝鍐呴儴鏂规硶浠嶇劧闅句互澶嶇敤锛屽簲璇ュ垎绂诲嚭鏉ュ崟鐙淮鎶ゃ€?銆佷娇鐢╱seEffect妯℃嫙鎸傝浇浜嬩欢鏃讹紝澶勭悊寮傛璇锋眰鍑芥暟寰堥夯鐑︺€?銆佸綋缁勪欢杈惧埌涓€瀹氱殑澶嶆潅搴︽椂锛屽爢绉捣鏉ョ殑浠g爜浼氳秺鏉ヨ秺闅剧淮鎶ゃ€?銆丷eactHook鐨勯棴鍖呴櫡闃便€?銆乽seState璋冪敤updater鏇存柊鍚庯紝鏃犳硶鍚屾鑾峰彇鏈€鏂扮殑state鍊笺€?0.useStateupdater涓嶈兘缁嗙矑搴︾殑鏇存柊瀵硅薄鐨勫睘鎬у€硷紝鎵€浠ュ畠涓嶅緱涓嶅仛涓€涓暟鎹殑娴呮嫹璐濓紝鐒跺悗瑕嗙洊瀹冪殑璁捐妯″紡銆佸師鍒欏拰鑼冨紡銆傛彁楂樹唬鐮佽川閲忥紝闄や簡渚濋潬寮€鍙戣嚜娴嬪拰鐩稿叧娴佺▼鏍囧噯鍖栧锛岃繕搴旇鍙楀埌鐩稿叧宸ュ叿鎴栫粺涓€寮€鍙戣寖寮忕殑绾︽潫銆傚浜庣函鍐欎笟鍔$殑锛屾病鏈夎鑼冩潵寮哄埗绾﹀畾锛屾墍浠ュ嚑涔庢病鏈変汉浼氳繖鏍峰鐞嗕笟鍔¢€昏緫鍜孶I鐨勫叧绯伙紝鏈€鍚庨兘鏄竴璧峰啓鐨勩€傝繖灏辨槸閽╁瓙绛夊急绾︽潫鐨勭己鐐广€傚熀浜庝互涓婇棶棰橈紝鎴戝紑鍙戜簡鍩轰簬reacthooks鐨刄I鍜屼笟鍔¢€昏緫鍒嗙锛屼互鍙婂熀浜巙seStatehooks鐨勫唴閮╱pdater瀹炵幇鐨勮В鍐虫柟妗堛€傚彲浠ュ湪绫诲唴閮ㄥ疄鐜皊etState锛岀劧鍚庡湪View缁勪欢涓搷搴旀洿鏂般€傚熀鏈В鍐充簡涓婅堪ReactHooks鐨勫崄澶р€滃ぇ闂鈥濄€俬ooks-view-model鏄竴绉嶉€氳繃鎷嗗垎UI瑙嗗浘鍜屼笟鍔¢€昏緫鐨勮В鍐虫柟妗堛€備笉浼氭覆鏌撴棤鍏崇殑缁勪欢銆俬ooks-view-model鏄竴涓泦鐘舵€佺鐞嗐€佸彉閲忓瓨鍌ㄧ鐞嗗拰鏁版嵁鎸佷箙鍖栫鐞嗕簬涓€浣撶殑瑙e喅鏂规銆傝鎯呯偣鍑火煈夛細https://github.com/hawx1993/h...hooks-view-model涓昏鐢ㄤ簬鍒嗙UI鍜屼笟鍔¢€昏緫锛屽彲浠ヨВ鍐崇函hooks缁勪欢鐨勯棶棰樸€傚姣攈ooks-view-model鐨勪紭鍔匡細Hooks缁勪欢闂hooks-view-modeluseState闅惧啓銆傚鏋滅姸鎬佸緢澶氾紝闇€瑕佷竴涓竴涓淮鎶ゃ€傛枃绗斾笉澶熺畝娲併€傛偍鍙互鏇存柊鍜岃В鏋勫璞″舰寮忕殑鏁版嵁銆倁seReducer+context鐨勫叏灞€鐘舵€佸緢闅剧敤锛岃繕鏄渶瑕佸畾涔夊緢澶欰ction绫诲瀷涔熼渶瑕佹彁渚涗竴涓猵rovider銆備娇鐢╱seReducer璺ㄧ粍浠跺叡浜姸鎬侀潪甯搁夯鐑︺€傚叏灞€鐘舵€佹洿鏂板彧闇€瑕佷娇鐢╱seGlobalStatehooks銆傜畝鍗曠殑usage鐢熷懡鍛ㄦ湡闇€瑕佸紩鍏seEffect锛岄渶瑕佷汉宸ョ鐞嗭紝璇箟涓嶅銆傛彁渚沵ounted鍜寀nmountedhook鍑芥暟锛屽彲浠ヨ嚜鍔ㄦ墽琛岋紝璇箟鍙嬪ソ鐨勫熀浜巋ooks鐨勪笟鍔$粍浠讹紝鍐呴儴鏂规硶澶嶇敤杩樻槸姣旇緝鍥伴毦锛屽簲璇ュ垎绂诲嚭鏉ュ崟鐙淮鎶ょ被鍐欏彲浠ラ€氳繃缁ф壙澶嶇敤锛屽叾浠杤iewModel涔熷彲浠ラ€氳繃useVM寮曞叆杩涜澶嶇敤锛屽鐢ㄦ€ч珮鎺ユ敹鏂扮殑閬撳叿锛岄渶瑕佹墜鍔ㄤ娇鐢╱seEffect瑙傚療閬撳叿鐨勫彉鍖栥€傛病鏈夊彲浠ヨ嚜鍔ㄨЕ鍙戠被鐨勭洿鎺ラ挬瀛愩€傛彁渚沷nPropsChanged閽╁瓙鍑芥暟锛屽彲浠ヨ嚜鍔ㄨЕ鍙戞墽琛屻€傚綋缁勪欢杈惧埌涓€瀹氱殑澶嶆潅搴︽椂锛岀Н绱殑浠g爜浼氳秺鏉ヨ秺闅剧淮鎶I鍜岄€昏緫寰堝ソ鐨勫垎绂伙紝浠g爜缁勭粐鎬у緢寮恒€俁eactHook鐨刢losuretrap闂鍦ㄧ淮鎶ょ被涓湁鎻愬埌锛屾墍浠ヤ笉瀛樺湪杩欎釜闂銆備娇鐢ㄦ洿鏂板櫒鏇存柊鍚庯紝鏃犳硶鍚屾鑾峰彇鏈€鏂扮姸鎬併€傝鍊煎彲浠ラ€氳繃璋冪敤getCurrentState鍚屾鑾峰彇鏈€鏂板€兼潵鑾峰彇銆傝皟鐢ㄦ洿鏂板櫒鏃犳硶瀹炵幇瀵硅薄灞炴€у€肩殑缁嗙矑搴︽洿鏂般€傞渶瑕佸瀵硅薄杩涜娴呮嫹璐濓紝鐒跺悗瑕嗙洊銆傞€氳繃updateImmerState鍙互瀹炵幇缁嗙矑搴︾殑鏇存柊1.View锛氳幏鍙栨暟鎹苟鏄剧ず鏁版嵁//AppView.tsximport{AppViewModel}from'./AppViewModel'import{useVM}from'hooks-view-model'import{usePrevious}from'@/鎸傞挬';constAppView=()=>{const{鍙樻€乮ousAddress}=usePrevious();const{changeAddress,useCurrentState}=useVM(AppViewModel,{address:previousAddress,})const{address='娴欐睙鐪?}=useCurrentState()return(
鐐瑰嚮鏇存敼鍦板潃{address}
)}2.ViewModel锛氱鐞嗙姸鎬佸拰澶勭悊鏁版嵁绫讳腑鐨勬墍鏈夋柟娉曢兘鏄澶村嚱鏁帮紝鍚﹀垯浼氭姤閿?;//鐩稿綋浜巗etState}}export{AppViewModel}閭d箞寰堝浜哄彲鑳戒細鐤戞儜锛屾槑鏄巖eact瀹樻柟宸茬粡鎺ㄥ磭鍑芥暟寮忕殑鍐欐硶浜嗭紝涓轰粈涔堣繕瑕佺敤class鍛紵鍩轰簬绫荤殑viewModel鍐欐硶鍜宧ooks鏈変粈涔堝尯鍒紵璇氱劧锛宧ooks鍙互婊¤冻UI鍜岄€昏緫鍒嗙鐨勯渶姹傦紝浣嗘槸鏄惁鏈夊繀瑕佸皢涓嶈兘鍏变韩鐨勪笟鍔¢€昏緫鎻愬彇鍒癶ooks涓憿锛熷畠涓庡彲閲嶅浣跨敤鐨勯挬瀛愭贩娣嗕簡鍚楋紵hooks涓殑useCallback銆乽seReducer銆乻ideeffects鐨勪娇鐢ㄥ緢瀹规槗閫犳垚娣锋穯锛岃兘涓嶈兘鏈夊叾浠栫殑鏂规硶鏉ョ畝鍖杣seState鐨勪娇鐢ㄥ憿锛熷叾娆★紝鍑芥暟寮忕粍浠剁殑鍐欐硶涓嶆槸鍑芥暟寮忕紪绋嬶紝鍚屾牱鐨勮緭鍏ワ紙props锛変笉浼氬緱鍒扮浉鍚岀殑杈撳嚭锛堝唴閮ㄧ姸鎬佹垨鍏ㄥ眬鐘舵€佸彲鑳戒細褰卞搷缁撴灉锛夛紝涓氬姟閫昏緫琚彁鍙栧埌绫讳腑锛屽畠浠嶇劧鏄竴涓姛鑳界粍浠躲€備笌function鐩告瘮锛宑lass澶╃劧鍏锋湁缁勭粐鎬с€佸彲鎵╁睍鎬э紙extends锛夈€佸彲缁存姢鎬с€傞鍏堬紝涓氬姟閫昏緫姣旇緝澶嶆潅銆侰lass鍏锋湁缁ф壙鐨勮兘鍔涳紝鍙互瀹炵幇vi鈥嬧€媏wModel鍜寁iew閮藉彲浠ヤ粠鐖剁被鑾峰彇鑳藉姏锛涘叾娆★紝class鍙互鏇村ソ鐨勭淮鎶や笟鍔¢€昏緫浠g爜锛屽湪class涓啓涓氬姟閫昏緫鍙互瀹屽叏蹇界暐reacthooks鑷甫鐨勫悇绉峢ook锛屾瘮濡倁seRef銆乽seCallback銆乽seReducer銆乽seState绛夛紝鎶婁笟鍔¢€昏緫鍐欏緱鏇寸函绮癸紱鑰屼笖hooks涔熷彲浠ュ拰viewModel鍏卞瓨锛屽彧闇€瑕佸湪view涓紩鍏ooks锛岀劧鍚庡皢杩斿洖鍊间綔涓簆rops锛岄€氳繃useVM浼犻€掔粰viewModel鍗冲彲銆備袱鑰呭苟瀛橈紝骞朵笉鐩镐簰鎺掓枼銆傚熀浜庣被鐨剉iewModel鍙互鏇村ソ鐨勭淮鎶や笟鍔¢€昏緫浠g爜锛屽彲浠ヤ娇鐢╠ecorators銆乸ublic銆乸rivate绛夊叧閿瓧鏉ユ彁楂樹唬鐮佺殑鍙淮鎶ゆ€у拰鍙墿灞曟€с€傚彲澶嶇敤閽╁瓙鍙互鐢ㄦ潵鎶借薄涓氬姟閫昏緫锛屽疄鐜板壇浣滅敤瑙傚療鍜岄€昏緫澶嶇敤锛屼袱鑰呮湁涓嶅悓鐨勫績鏅烘ā鍨嬨€傞厤缃敓鎴愰」鐩ā鏉挎枃浠跺彟澶栵紝鎴戝湪hooks-view-model涓瀯寤轰簡椤圭洰妯℃澘鏂囦欢锛屽彲浠ヤ竴閿敓鎴愰渶瑕佺殑妯℃澘鏂囦欢鍜屼唬鐮侊紝璁╁悇涓氬姟绾跨殑鍓嶇鍥㈤槦濮嬬粓淇濇寔涓€鑷村紑鍙戣鑼冨拰椋庢牸銆傜湡姝e仛鍒癇鎴愬憳鍙互浣庢垚鏈粙鍏ラ」鐩瓵锛屾彁楂樹唬鐮佺殑鍙淮鎶ゆ€у拰鍙鎬с€備娇鐢ㄦ柟娉曞涓嬶細鎵ц浠ヤ笅姝ラ锛屼竴閿敓鎴愭ā鏉挎枃浠?.娣诲姞鑴氭湰鍛戒护鍦╬ackage.json鐨勮剼鏈腑娣诲姞濡備笅鑴氭湰鍛戒护锛歿"generate":"plop--plopfile./node_modules/hooks-view-model/generators/index.js"}2.鍦ㄦ牴鐩綍涓嬪垱寤簍emplate.config.js锛屾寚瀹氭ā鏉块渶瑕佺敓鎴愮殑鐩稿璺緞鍦板潃锛歝onstdir_to_generate='./src/pages/';module.exports=dir_to_generate;鎵ц鍚庝細鍦ㄦ寚瀹氱洰褰曚笅鐢熸垚濡備笅妯℃澘鏂囦欢锛氭洿濂界殑debug鑳藉姏浣跨敤hooks锛屽鏋滄垜浠兂鐭ラ亾褰撳墠鐘舵€佸€硷紝闇€瑕佷竴涓竴涓猚onsole锛屽熀浜巋ooks-view-model锛屾垜浠彧闇€瑕佸湪鎺у埗鍙拌緭鍏ワ細globalStore锛屽氨鍙互鏌ョ湅鍒版墍鏈夎鍥惧搴旂殑鐘舵€侊紝骞堕€氳繃key鏉ュ尯鍒嗐€傚彲浠ュぇ澶ф彁楂樿皟璇曡兘鍔涖€?/p>