React50种状态类型
时间：2023-03-29 11:39:13
HTML
React鏄竴涓鍥惧眰妗嗘灦锛屽叾鏍稿績鎬濇兂鏄疷I=f(state)锛屽嵆鈥淯I鏄痵tate鐨勬姇褰扁€濓紝state浠庝笂鍒颁笅娴佸姩锛屾暣涓猂eact缁勪欢鏍戠敱鍥藉椹卞姩銆傚綋React搴旂敤绋嬪簭瓒冲澶嶆潅骞朵笖缁勪欢宓屽瓒冲娣辨椂锛岀粍浠舵爲涓殑鐘舵€佹祦浼氬彉寰楅毦浠ユ帶鍒讹紙渚嬪锛屽綋鐖惰妭鐐圭殑鐘舵€佹祦鍚戝彾鑺傜偣鏃讹紝鎮ㄥ浣曡窡韪墍鍋氱殑鏇存敼).杩欎釜鏃跺€欙紝鎴戜滑灏遍渶瑕佸鐘舵€佽繘琛岀鐞嗐€傚湪杩涜鐘舵€佺鐞嗙殑鍚屾椂锛屾垜浠繕闇€瑕佸尯鍒哛eact搴旂敤涓殑鐘舵€佺被鍨嬶紝浠庤€屽埗瀹氬嚭鏈€閫傚悎鐨勭姸鎬佺鐞嗘柟妗堛€傜姸鎬佺被鍨婻eact搴旂敤鐘舵€佸湪瀹忚涓婂彲浠ュ垎涓轰袱绉嶇被鍨嬶細瀹㈡埛绔姸鎬丆lientState锛氬ぇ閮ㄥ垎鐢ㄦ潵鎺у埗瀹㈡埛绔殑UI鏄剧ず锛屾瘮濡備笅闈粙缁嶇殑Local鐘舵€侊紝Feature鐘舵€侊紝Application鐘舵€佸睘浜庨檮搴稿浗銆係erverStateServerState锛氬鎴风閫氳繃寮傛璇锋眰鑾峰彇鐨勬暟鎹€傛湰鍦扮姸鎬?鏈湴鐘舵€佷粎瀛樺湪浜庡崟涓粍浠剁姸鎬佷腑锛屾垜浠彲浠ョО鍏朵负鈥滄湰鍦扳€濇垨鈥淯I鈥濈姸鎬併€傚畠閫氬父甯姪鎴戜滑绠＄悊UI浜や簰锛屼緥濡傛樉绀哄拰闅愯棌鍐呭鎴栧惎鐢ㄥ拰绂佺敤鎸夐挳锛屽畠杩樼粡甯告帶鍒跺湪鎴戜滑绛夊緟鏃跺憟鐜扮殑鍐呭銆傝€冭檻浠ヤ笅绀轰緥锛歠unctionText(){const[viewMore,setViewMore]=useState(false);return(React浣垮垱寤轰氦浜掑紡UI鍙樺緱杞绘澗銆倇viewMore&&涓哄簲鐢ㄧ▼搴忎腑鐨勬瘡涓姸鎬佽璁＄畝鍗曠殑瑙嗗浘銆?/span>}
setViewMore(true)}>readmore)}viewMore鏄竴涓狹eaning鐘舵€侊紝瀹冪殑浣滅敤鍙槸鎺у埗杩欓噷鏂囨湰鐨勫彲瑙佹€с€傚湪姝ょず渚嬩腑锛寁iewMore瀵瑰簲鐢ㄧ▼搴忕殑鍏朵粬缁勪欢鏃犵敤锛屽洜姝ゆ偍涓嶅繀灏嗘鐘舵€佹硠婕忓埌Text缁勪欢涔嬪銆傜壒寰佺姸鎬佲€斺€旂壒寰佺姸鎬佺粨鍚堜簡涓や釜鎴栧涓渶瑕佺煡閬撶浉鍚屼俊鎭殑缁勪欢锛屾垜浠皢杩欑鐘舵€佸畾涔変负鈥滅壒寰佲€濈姸鎬併€傚彲浠ヨ锛屾瘡涓潪鍦版柟宸為兘灞炰簬杩欎竴绫汇€傜劧鑰岋紝骞堕潪姣忎釜鍔熻兘鐘舵€侀兘鏄钩绛夌殑锛屾垜浠皢鍦ㄦ湰鏂囦腑璇︾粏浜嗚В杩欎竴鐐广€傜壒寰佺姸鎬佺殑涓€涓緢濂界殑渚嬪瓙鏄〃鍗曠姸鎬侊紝瀹冪湅璧锋潵鏈夌偣鍍忎笂闈㈡弿杩扮殑UI鐘舵€侊紝浣嗙粨鍚堜簡澶氫釜杈撳叆骞剁鐞嗗涓粍浠躲€備粠鈥滃弽搴斺€濆鍏useState}锛沜onstSkill=({onChange})=>();constYears=({onChange})=>();瀵煎嚭榛樿鍑芥暟Form(){const[skill,setSkill]=useState("");const[years,setYears]=useState("");constisFormReady=skill!==""&&骞达紒=="";return(alert("鎻愬強鎴愬姛")}>
submit);}杩欓噷鎴戜滑鏈変竴涓狥orm琛ㄥ崟锛岄噷闈㈠寘鍚玸kill鍜寉ears涓や釜瀛楁锛岄粯璁ゆ儏鍐典笅锛孎orm琛ㄥ崟鐨勬彁浜ゆ寜閽槸绂佺敤鐨勶紝鍙湁褰撲袱涓寜閽兘鍚敤鏃舵墠浼氬惎鐢ㄨ緭鍏ユ湁鍊硷紝璇锋敞鎰忔妧鑳藉拰骞撮檺閮芥槸蹇呴渶鐨勶紝浠ヤ究鎴戜滑鍙互璁＄畻isFormReady鐨勫€笺€傝〃鍗曟槸瀹炵幇姝ょ被閫昏緫鐨勬渶浣冲満鎵€锛屽洜涓哄畠鍖呭惈鎵€鏈夊叧鑱斿厓绱犮€傝繖涓緥瀛愪綋鐜颁簡traitstate鍜宎pplicationstate鐨勪竴涓竟鐣岋紝杩欓噷涔熷彲浠ヤ娇鐢≧edux鏉ヨ繘琛岀姸鎬佺鐞嗭紝浣嗚繖涓嶆槸涓€涓ソ鐨勫仛娉曪紝鎴戜滑搴旇鍦ㄥ畠琚彁鍗囨垚涓篴pplicationstate鐗瑰緛鐘舵€佷箣鍓嶆棭鐐硅瘑鍒畠銆傚簲鐢ㄧ▼搴忕姸鎬佲€斺€斿簲鐢ㄧ▼搴忕姸鎬佹槸鎸囧鐢ㄦ埛鏁翠綋浣撻獙鐨勭姸鎬侊紝杩欏彲鑳芥槸鎺堟潈鐘舵€併€侀厤缃枃浠舵暟鎹垨鍏ㄥ眬鏍峰紡涓婚銆傚簲鐢ㄧ▼搴忎腑鐨勪换浣曞湴鏂归兘鍙兘闇€瑕佸畠銆備笅闈㈡槸涓€涓畝鍗曠殑绀轰緥锛歩mportReact,{useContext,useState}from"react";constThemeContext=React.createContext();constTheme=({onChange})=>{const{theme}=useContext(ThemeContext);return`Theme:${theme}`;}constThemeSelector=()=>{const{theme,toggleTheme}=useContext(ThemeContext);return(lightdark);}瀵煎嚭榛樿鍊糵unctionApp(){const[theme,setTheme]=useState("light");consttoggleTheme=()=>setTheme(theme==="light"?"dark":"light");constthemeStyle={鑳屾櫙锛氫富棰?==鈥滃厜鈥濓紵"#fff":"#b9b9b9"};return(<椤佃剼鏍峰紡={meStyle}>
);}鍦ㄨ繖涓緥瀛愪腑锛屾湁涓€涓猦eader鍜屼竴涓猣ooter锛屼粬浠兘闇€瑕佺煡閬撳綋鍓嶅簲鐢ㄧ殑涓婚锛屾垜浠娇鐢–ontextAPI灏嗕富棰樿缃负搴旂敤鐘舵€侊紝杩欐牱Theme鍜孴hemeSelector涔熷彲浠ユ柟渚垮湴璁块棶锛堝畠浠篃闇€瑕佽闂富棰橈紝浣嗗畠浠彲鑳藉祵濂楀湪鍏朵粬缁勪欢涓級銆傚鏋滆澶氱粍浠堕兘闇€瑕佹煇浜涘睘鎬у苟涓斿彲鑳介渶瑕佷粠杩滅▼缁勪欢鏇存柊锛岄偅涔堟垜浠彲鑳藉繀椤诲皢鍏惰缃负搴旂敤绋嬪簭鐘舵€併€係erverstate-鏈嶅姟鍣ㄧ姸鎬佹湇鍔″櫒鐘舵€佸彲浠ョ悊瑙ｄ负鎺ュ彛鐘舵€併€傛湇鍔″櫒鐘舵€佹湁浠ヤ笅鐗圭偣锛氫繚瀛樺湪杩滅锛屾湰鍦版棤娉曠洿鎺ユ帶鍒讹紝闇€瑕佸紓姝PI鏌ヨ鍜屾洿鏂帮紝鍙兘琚叾浠栫敤鎴疯姹傝€屼笉鑷煡銆備竴鏂规洿鏀逛簡鏁版嵁锛屽鑷存暟鎹笉鍚屾绛夌幇鏈夌殑鐘舵€佺鐞嗗簱锛堝Mobx銆丷edux绛夛級閫傜敤浜庣鐞嗗鎴风鐘舵€侊紝浣嗕笉鍏冲績瀹㈡埛绔浣曡姹傝繙绋嬫暟鎹紓姝ワ紝鍥犳瀹冧滑涓嶉€傚悎澶勭悊鏉ヨ嚜鏈嶅姟鍣ㄧ殑寮傛鐘舵€併€傝纭畾鏈嶅姟鍣ㄧ姸鎬侊紝鎮ㄥ繀椤昏€冭檻鏁版嵁鏇存敼鐨勯鐜囦互鍙婃暟鎹殑鏉ユ簮銆傚鏋滃畠鎴栧鎴栧皯鏄潤鎬佺殑锛岄偅涔堟垜浠簲璇ラ伩鍏嶄粠鏈嶅姟鍣ㄨ幏鍙栧畠锛岃€屽彧鏄皢瀹冨瓨鍌ㄥ埌瀹㈡埛绔苟灏嗗叾浣滀负鍏ㄥ眬鍙橀噺浼犻€掋€傜姸鎬佺鐞嗛殢鐫€React鐢熸€佺殑涓嶆柇澹ぇ锛岀ぞ鍖烘彁渚涗簡澶氱鏂瑰紡鏉ヨВ鍐崇姸鎬佺鐞嗭紝鍖呮嫭Redux銆佸熀浜嶧lux鎬濇兂鐨刏ustand锛屼互鍙奟eact鑷甫鐨剈seReducer+Context锛涘熀浜庨浘鍖栫殑Recoil銆丣otail绛夛紱鑰屽搷搴斿紡瑙ｅ喅鏂规鐨勪唬琛∕obx锛岃繖閲屽氨涓嶅仛杩囧浠嬬粛浜嗭紝鍏堟潵浜嗚В涓€涓嬫渶甯哥敤鐨勪竴浜涘惂銆侶ooks鏄姸鎬佺鐞嗙殑涓昏鏈哄埗useState鎴杣seReducer鏄ぇ澶氭暟浜虹敤鏉ョ鐞嗘湰鍦扮姸鎬佺殑锛寀seState瀹為檯涓婃槸React涓噸鏂版覆鏌撶殑涓昏鏈哄埗锛岃繖灏辨槸涓轰粈涔堝ぇ澶氭暟鐘舵€佺鐞嗗簱閮藉湪搴曞眰浣跨敤瀹冦€傚鏋滄繁鍏ユ寲鎺橈紝浣犱細鍙戠幇杩欎簺涓嶅悓鐨勭涓夋柟搴撴彁渚涚殑CustomHooks閮戒緷璧栦簬榛樿鐨剈seState銆乽seReducer鍜寀seEffect銆備笅闈㈡槸瀹樼綉鎻愪緵鐨剈seReducer鐨勭畝鍗曚緥瀛愶細constinitialState={count:0};functionreducer(state,action){switch(action.type){case'increment':return{count:state.count+1};case'decrement':return{count:state.count-1};榛樿锛氭姏鍑烘柊鐨勯敊璇紙锛夛紱}}functionCounter(){const[state,dispatch]=useReducer(reducer,initialState);return(<>Count:{state.count}
dispatch({type:'decrement'})}>-dispatch({type:'increment'})}>+);}Statepromotion-LiftingStateUp鍦≧eact涓紝鍙互閫氳繃灏嗗涓粍浠朵腑闇€瑕佸叡浜殑鐘舵€佸悜涓婄Щ鍔ㄥ埌绂诲畠浠渶杩戠殑浣嶇疆鏉ュ疄鐜板叡浜姸鎬佸叕鍏辩埗缁勪欢锛岀О涓衡€滅姸鎬佹彁鍗団€濄€傚洖鎯充竴涓嬫湰鏂囧紑澶寸殑鏌ョ湅鏇村绀轰緥锛堢敤浜庢帶鍒舵枃鏈彲瑙佹€х殑鏈湴鐘舵€侊級銆傜劧鑰岋紝濡傛灉鏈変竴涓柊鐨勮姹傚苟涓旀垜浠湁涓€涓叏灞€鐨勨€滄墿灞曟枃鏈€濇寜閽紝閭ｄ箞鎴戜滑蹇呴』鎻愬崌杩欎釜鐘舵€佸苟閫氳繃props灏嗗畠浼犻€掍笅鍘汇€?/viewMore鏄竴涓湰鍦扮姸鎬佸嚱鏁癈omponent(){const[viewMore,setViewMore]=useState(false);return(Text...{viewMore&&Moretext...}
setViewMore(true)}>闃呰鏇村);}//灏唙iewMore鎻愬崌涓虹粍浠剁殑鍔熻兘鐘舵€佸嚱鏁癈omponent({viewMore}){return(Text...{viewMore&&Moretext...}
);}褰撲綘鐪嬪埌涓€涓眬閮ㄧ殑鐘舵€佸彉閲忓彉鎴愪簡涓€涓猵rops鐨勬椂鍊欙紝鎴戜滑鍙互鐩磋鐨勭湅鍑哄畠鏄竴涓姸鎬佹彁鍗囥€傝繖绉嶆柟娉曢渶瑕佸皬蹇冨湴鍦╬rop閽诲彇鏂归潰鎵惧埌骞宠 锛屽苟涓旀偍涓嶅笇鏈涙湁璁稿鍙礋璐ｅ皢props浼犻€掔粰瀹冧滑鐨勫瓙缁勪欢鐨勨€滀腑闂翠汉鈥濈粍浠躲€備娇鐢–ontextAPIContextAPI鎻愪緵浜嗕竴绉嶉€氳繃缁勪欢鏍戜紶閫掓暟鎹殑鏂规硶锛岃€屾棤闇€鍦ㄦ瘡涓骇鍒墜鍔ㄥ悜涓嬩紶閫抪rops銆傚湪鍏稿瀷鐨凴eact搴旂敤绋嬪簭涓紝鏁版嵁閫氳繃props鑷笂鑰屼笅锛堢埗鍒板瓙锛変紶閫掞紝浣嗚繖绉嶅仛娉曞浜庢煇浜涚被鍨嬬殑props锛堜緥濡傦細璇█鐜棣栭€夐」銆乁I涓婚锛夋潵璇存瀬鍏剁箒鐞愶紝杩欎簺灞炴€ф槸璁稿缁勪欢鎵€蹇呴渶鐨勫簲鐢ㄣ€侰ontext鎻愪緵浜嗕竴绉嶅湪缁勪欢涔嬮棿鍏变韩姝ょ被鍊肩殑鏂规硶锛岃€屾棤闇€閫氳繃缁勪欢鏍戠殑灞傛樉寮忎紶閫抪rops銆侰ontext鏃ㄥ湪鍏变韩瀵圭粍浠舵爲鏉ヨ鏄€滃叏灞€鈥濈殑鏁版嵁锛屼緥濡傚綋鍓嶇粡杩囪韩浠介獙璇佺殑鐢ㄦ埛銆佷富棰樻垨棣栭€夎瑷€锛屽洜姝ontext涓昏鐢ㄤ簬搴旂敤绋嬪簭鐘舵€佺鐞嗭紙璇峰弬闃呭簲鐢ㄧ▼搴忕姸鎬佺ず渚嬶級銆傚鏋滄偍鍙兂閬垮厤閫愬眰浼犻€掑睘鎬э紝缁勪欢缁勫悎鏈夋椂鏄瘮涓婁笅鏂囨洿濂界殑瑙ｅ喅鏂规銆侰ompositionmode-CompositionmodeContextAPI閫傜敤浜庣鐞嗗簲鐢ㄧ▼搴忕姸鎬併€傚鏋滄兂閬垮厤PropsDrilling绛夐棶棰橈紝鍙互浣跨敤鍚堟垚妯″紡銆傜粍鍚堟槸涓€绉嶉€氳繃灏嗙粍浠剁粍鍚堝湪涓€璧锋潵鍒涘缓鏇村ぇ缁勪欢鐨勬柟娉曘€傜粍鍚堜笉浠呭叿鏈夊鍙樼殑鐏垫椿鎬у拰鍙噸鐢ㄦ€э紝鑰屼笖鍏锋湁鍗曚竴鑱岃矗鐨勭壒鐐广€傜粍鍚堜篃鏄疪eact鐨勬牳蹇冦€傜湅瀹樼綉鐨勪緥瀛愶細functionSplitPane(props){return({props.left} 