鎻忚堪UI
- React 缁勪欢鏄竴娈靛彲浠?浣跨敤鏍囩杩涜鎵╁睍 鐨?JavaScript 鍑芥暟銆?/li>
- React 缁勪欢鏄父瑙勭殑 JavaScript 鍑芥暟锛屼絾 缁勪欢鐨勫悕绉板繀椤讳互澶у啓瀛楁瘝寮€澶?/li>
- 鍚屼竴鏂囦欢涓紝鏈変笖浠呮湁涓€涓粯璁ゅ鍑猴紝浣嗗彲浠ユ湁澶氫釜鍏峰悕瀵煎嚭锛?/li>
- 涓轰粈涔堥渶瑕佷竴涓牴鏍囩
- JSX 铏界劧鐪嬭捣鏉ュ緢鍍?HTML锛屼絾鍦ㄥ簳灞傚叾瀹炶杞寲涓轰簡 JavaScript 瀵硅薄锛屼綘涓嶈兘鍦ㄤ竴涓嚱鏁颁腑杩斿洖澶氫釜瀵硅薄锛岄櫎闈炵敤涓€涓暟缁勬妸浠栦滑鍖呰璧锋潵銆傝繖灏辨槸涓轰粈涔堝涓?JSX 鏍囩蹇呴』瑕佺敤涓€涓埗鍏冪礌鎴栬€?Fragment 鏉ュ寘瑁广€?/li>
- 鍒囧嬁灏嗘暟瀛楁斁鍦?&& 宸︿晶.宸︿晶涓?鍒欎細娓叉煋涓?
- key 闇€瑕佹弧瓒崇殑鏉′欢
- key 鍊煎湪鍏勫紵鑺傜偣涔嬮棿蹇呴』鏄敮涓€鐨勩€?涓嶈繃涓嶈姹傚叏灞€鍞竴锛屽湪涓嶅悓鐨勬暟缁勪腑鍙互浣跨敤鐩稿悓鐨?key銆?/li>
- key 鍊间笉鑳芥敼鍙橈紝鍚﹀垯灏卞け鍘讳簡浣跨敤 key 鐨勬剰涔夛紒鎵€浠ュ崈涓囦笉瑕佸湪娓叉煋鏃跺姩鎬佸湴鐢熸垚 key銆?/li>
- 涓轰粈涔堥渶瑕乲ey
- React 閲岄渶瑕?key 鍜屾枃浠跺す閲岀殑鏂囦欢闇€瑕佹湁鏂囦欢鍚嶇殑閬撶悊鏄被浼肩殑銆備竴涓簿蹇冮€夋嫨鐨?key 鍊兼墍鑳芥彁渚涚殑淇℃伅杩滆繙涓嶆浜庤繖涓厓绱犲湪鏁扮粍涓殑浣嶇疆銆傚嵆浣垮厓绱犵殑浣嶇疆鍦ㄦ覆鏌撶殑杩囩▼涓彂鐢熶簡鏀瑰彉锛屽畠鎻愪緵鐨?key 鍊间篃鑳借 React 鍦ㄦ暣涓敓鍛藉懆鏈熶腑涓€鐩磋寰楀畠銆?/li>
- 璇蜂笉瑕佸湪杩愯杩囩▼涓姩鎬佸湴浜х敓 key锛屽儚鏄?key={Math.random()} 杩欑鏂瑰紡銆傝繖浼氬鑷存瘡娆￠噸鏂版覆鏌撳悗鐨?key 鍊奸兘涓嶄竴鏍凤紝浠庤€屼娇寰楁墍鏈夌殑缁勪欢鍜?DOM 鍏冪礌姣忔閮借閲嶆柊鍒涘缓銆傝繖涓嶄粎浼氶€犳垚杩愯鍙樻參鐨勯棶棰橈紝鏇存湁鍙兘瀵艰嚧鐢ㄦ埛杈撳叆鐨勪涪澶便€?/li>
- 绾嚱鏁扮殑鍩烘湰瀹氫箟锛?
- 鍙礋璐ｈ嚜宸辩殑浠诲姟銆?瀹冧笉浼氭洿鏀瑰湪璇ュ嚱鏁拌皟鐢ㄥ墠灏卞凡瀛樺湪鐨勫璞℃垨鍙橀噺銆?/li>
- 杈撳叆鐩稿悓锛岃緭鍑轰篃鐩稿悓銆?鍦ㄨ緭鍏ョ浉鍚岀殑鎯呭喌涓嬶紝瀵圭函鍑芥暟鏉ヨ搴旀€绘槸杩斿洖鐩稿悓鐨勭粨鏋溿€?/li>
- React 鍋囪浣犵紪鍐欑殑鎵€鏈夌粍浠堕兘鏄函鍑芥暟銆俁eact 鐨勬覆鏌撹繃绋嬪繀椤昏嚜濮嬭嚦缁堟槸绾补鐨勩€傜粍浠跺簲璇ュ彧 杩斿洖 瀹冧滑鐨?JSX锛岃€屼笉 鏀瑰彉 鍦ㄦ覆鏌撳墠锛屽氨宸插瓨鍦ㄧ殑浠讳綍瀵硅薄鎴栧彉閲?鈥?杩欏皢浼氫娇瀹冧滑鍙樺緱涓嶇函绮癸紒
- React 鎻愪緵浜?鈥滀弗鏍兼ā寮忊€濓紝鍦ㄤ弗鏍兼ā寮忎笅寮€鍙戞椂锛屽畠灏嗕細璋冪敤姣忎釜缁勪欢鍑芥暟涓ゆ銆傞€氳繃閲嶅璋冪敤缁勪欢鍑芥暟锛屼弗鏍兼ā寮忔湁鍔╀簬鎵惧埌杩濆弽杩欎簺瑙勫垯鐨勭粍浠躲€?/li>
- 鍓綔鐢細鍖呮嫭鏇存柊灞忓箷銆佸惎鍔ㄥ姩鐢汇€佹洿鏀规暟鎹瓑锛屽畠浠绉颁负 鍓綔鐢ㄣ€傚畠浠槸 鈥滈澶栤€?鍙戠敓鐨勪簨鎯咃紝涓庢覆鏌撹繃绋嬫棤鍏炽€?/li>
- 鍦?React 涓紝鍓綔鐢ㄩ€氬父灞炰簬 浜嬩欢澶勭悊绋嬪簭銆備簨浠跺鐞嗙▼搴忔槸 React 鍦ㄤ綘鎵ц鏌愪簺鎿嶄綔锛堝鍗曞嚮鎸夐挳锛夋椂杩愯鐨勫嚱鏁般€傚嵆浣夸簨浠跺鐞嗙▼搴忔槸鍦ㄤ綘鐨勭粍浠?鍐呴儴 瀹氫箟鐨勶紝瀹冧滑涔熶笉浼氬湪娓叉煋鏈熼棿杩愯锛?鍥犳浜嬩欢澶勭悊绋嬪簭鏃犻渶鏄函鍑芥暟銆?/li>
- 濡傛灉浣犵敤灏戒竴鍒囧姙娉曪紝浠嶆棤娉曚负鍓綔鐢ㄦ壘鍒板悎閫傜殑浜嬩欢澶勭悊绋嬪簭锛屼綘杩樺彲浠ヨ皟鐢ㄧ粍浠朵腑鐨?
useEffect鏂规硶灏嗗叾闄勫姞鍒拌繑鍥炵殑 JSX 涓€傝繖浼氬憡璇?React 鍦ㄦ覆鏌撶粨鏉熷悗鎵ц瀹冦€?strong>鐒惰€岋紝杩欑鏂规硶搴旇鏄綘鏈€鍚庣殑鎵嬫銆?/li>
娣诲姞浜や簰
-
e.stopPropagation()闃绘瑙﹀彂缁戝畾鍦ㄥ灞傛爣绛句笂鐨勪簨浠跺鐞嗗嚱鏁般€?/li> -
e.preventDefault()闃绘灏戞暟浜嬩欢鐨勯粯璁ゆ祻瑙堝櫒琛屼负銆?/li>
- 浜嬩欢澶勭悊鍑芥暟鏄墽琛屽壇浣滅敤鐨勬渶浣充綅缃紝鏁版嵁鐨勬敼鍙樹娇鐢╯tate瀛樺偍
- 涓轰粈涔堥渶瑕乽seState
- 灞€閮ㄥ彉閲忔棤娉曞湪澶氭娓叉煋涓寔涔呬繚瀛樸€傚綋 React 鍐嶆娓叉煋杩欎釜缁勪欢鏃讹紝瀹冧細浠庡ご寮€濮嬫覆鏌撯€斺€斾笉浼氳€冭檻涔嬪墠瀵瑰眬閮ㄥ彉閲忕殑浠讳綍鏇存敼銆?/li>
- 鏇存敼灞€閮ㄥ彉閲忎笉浼氳Е鍙戞覆鏌撱€?React 娌℃湁鎰忚瘑鍒板畠闇€瑕佷娇鐢ㄦ柊鏁版嵁鍐嶆娓叉煋缁勪欢銆?/li>
- Hooks 鈥斺€斾互
use寮€澶寸殑鍑芥暟鈥斺€斿彧鑳藉湪缁勪欢鎴栬嚜瀹氫箟 Hook 鐨勬渶椤跺眰璋冪敤銆?/strong> - 濡傛灉浣犳覆鏌撳悓涓€涓粍浠朵袱娆★紝姣忎釜鍓湰閮戒細鏈夊畬鍏ㄩ殧绂荤殑 state
- React 鎶婃洿鏀规彁浜ゅ埌 DOM 涓?
-
瀵逛簬鍒濇娓叉煋锛?/strong> React 浼氫娇鐢?
appendChild()DOM API 灏嗗叾鍒涘缓鐨勬墍鏈?DOM 鑺傜偣鏀惧湪灞忓箷涓娿€?/li>- 瀵逛簬閲嶆覆鏌擄紝 React 灏嗗簲鐢ㄦ渶灏戠殑蹇呰鎿嶄綔锛堝湪娓叉煋鏃惰绠楋紒锛夛紝浠ヤ娇寰?DOM 涓庢渶鏂扮殑娓叉煋杈撳嚭鐩镐簰鍖归厤銆?/li>
-
瀵逛簬鍒濇娓叉煋锛?/strong> React 浼氫娇鐢?
- React 浠呭湪娓叉煋涔嬮棿瀛樺湪宸紓鏃舵墠浼氭洿鏀?DOM 鑺傜偣
- 鍦ㄦ覆鏌撳畬鎴愬苟涓?React 鏇存柊 DOM 涔嬪悗锛屾祻瑙堝櫒灏变細閲嶆柊缁樺埗灞忓箷
- 鍦ㄤ竴涓?React 搴旂敤涓竴娆″睆骞曟洿鏂伴兘浼氬彂鐢熶互涓嬩笁涓楠わ細
- 瑙﹀彂
- 缁勪欢鐨?鍒濇娓叉煋銆?/li>
- 缁勪欢锛堟垨鑰呭叾绁栧厛涔嬩竴锛夌殑 鐘舵€佸彂鐢熶簡鏀瑰彉
- 娓叉煋銆傚湪鎮ㄨЕ鍙戞覆鏌撳悗锛孯eact 浼氳皟鐢ㄦ偍鐨勭粍浠舵潵纭畾瑕佸湪灞忓箷涓婃樉绀虹殑鍐呭銆傗€滄覆鏌撲腑鈥?鍗?React 鍦ㄨ皟鐢ㄦ偍鐨勭粍浠躲€?/li>
- 鍦ㄨ繘琛屽垵娆℃覆鏌撴椂, React 浼氳皟鐢ㄦ牴缁勪欢銆?/li>
- 瀵逛簬鍚庣画鐨勬覆鏌? React 浼氳皟鐢ㄥ唴閮ㄧ姸鎬佹洿鏂拌Е鍙戜簡娓叉煋鐨勫嚱鏁扮粍浠躲€?/li>
- 鎻愪氦銆傚湪娓叉煋锛堣皟鐢級鎮ㄧ殑缁勪欢涔嬪悗锛孯eact 灏嗕細淇敼 DOM銆?/li>
-
瀵逛簬鍒濇娓叉煋锛?/strong> React 浼氫娇鐢?
appendChild()DOM API 灏嗗叾鍒涘缓鐨勬墍鏈?DOM 鑺傜偣鏀惧湪灞忓箷涓娿€?/li>- 瀵逛簬閲嶆覆鏌擄紝 React 灏嗗簲鐢ㄦ渶灏戠殑蹇呰鎿嶄綔锛堝湪娓叉煋鏃惰绠楋紒锛夛紝浠ヤ娇寰?DOM 涓庢渶鏂扮殑娓叉煋杈撳嚭鐩镐簰鍖归厤銆?/li>
- 璁剧疆 state 浼氳Е鍙戞覆鏌擄紙褰撲綘璋冪敤 useState 鏃讹級
- 娓叉煋浼氬強鏃剁敓鎴愪竴寮犲揩鐓?
- 鈥滄鍦ㄦ覆鏌撯€?灏辨剰鍛崇潃 React 姝ｅ湪璋冪敤浣犵殑缁勪欢鈥斺€斾竴涓嚱鏁般€備綘浠庤鍑芥暟杩斿洖鐨?JSX 灏卞儚鏄?UI 鐨勪竴寮犲強鏃剁殑蹇収銆傚畠鐨?props銆佷簨浠跺鐞嗗嚱鏁板拰鍐呴儴鍙橀噺閮芥槸 鏍规嵁褰撳墠娓叉煋鏃剁殑 state 琚绠楀嚭鏉ョ殑銆?/li>
- 杩斿洖鐨?UI 鈥滃揩鐓р€濇槸鍙氦浜掔殑銆傚畠鍏朵腑鍖呮嫭绫讳技浜嬩欢澶勭悊鍑芥暟鐨勯€昏緫锛岃繖浜涢€昏緫鐢ㄤ簬鎸囧畾濡備綍瀵硅緭鍏ヤ綔鍑哄搷搴斻€俁eact 闅忓悗浼氭洿鏂板睆骞曟潵鍖归厤杩欏紶蹇収锛屽苟缁戝畾浜嬩欢澶勭悊鍑芥暟銆傚洜姝わ紝鎸変笅鎸夐挳灏变細瑙﹀彂浣?JSX 涓殑鐐瑰嚮浜嬩欢澶勭悊鍑芥暟銆?/li>
- state 瀹為檯涓娾€滄椿鈥濆湪 React 鏈韩涓€斺€斿氨鍍忚鎽嗗湪涓€涓灦瀛愪笂锛佲€斺€斾綅浜庝綘鐨勫嚱鏁颁箣澶栥€傚綋 React 璋冪敤浣犵殑缁勪欢鏃讹紝瀹冧細涓虹壒瀹氱殑閭ｄ竴娆℃覆鏌撴彁渚涗竴寮?state 蹇収銆備綘鐨勭粍浠朵細鍦ㄥ叾 JSX 涓繑鍥炰竴寮犲寘鍚竴鏁村鏂扮殑 props 鍜屼簨浠跺鐞嗗嚱鏁扮殑 UI 蹇収 锛屽叾涓墍鏈夌殑鍊奸兘鏄?鏍规嵁閭ｄ竴娆℃覆鏌撲腑 state 鐨勫€?琚绠楀嚭鏉ョ殑锛?/li>
- 璁剧疆 state 鍙細涓轰笅涓€娆℃覆鏌撳彉鏇?state 鐨勫€笺€?/li>
- 涓€涓?state 鍙橀噺鐨勫€兼案杩滀笉浼氬湪涓€娆℃覆鏌撶殑鍐呴儴鍙戠敓鍙樺寲锛?鍗充娇鍏朵簨浠跺鐞嗗嚱鏁扮殑浠ｇ爜鏄紓姝ョ殑銆?/li>
- React 浼氫娇 state 鐨勫€煎缁堚€濆浐瀹氣€滃湪涓€娆℃覆鏌撶殑鍚勪釜浜嬩欢澶勭悊鍑芥暟鍐呴儴銆?浣犳棤闇€鎷呭績浠ｇ爜杩愯鏃?state 鏄惁鍙戠敓浜嗗彉鍖栥€?/li>
- 鍙橀噺鍜屼簨浠跺鐞嗗嚱鏁颁笉浼氬湪閲嶆覆鏌撲腑鈥滃瓨娲烩€濄€傛瘡涓覆鏌撻兘鏈夎嚜宸辩殑浜嬩欢澶勭悊鍑芥暟銆?/li>
- 姣忎釜娓叉煋锛堜互鍙婂叾涓殑鍑芥暟锛夊缁堚€滅湅鍒扳€濈殑鏄?React 鎻愪緵缁欒繖涓?娓叉煋鐨?state 蹇収銆?/li>
- 杩囧幓鍒涘缓鐨勪簨浠跺鐞嗗嚱鏁版嫢鏈夌殑鏄垱寤哄畠浠殑閭ｆ娓叉煋涓殑 state 鍊笺€?/li>
- React 浼氱瓑鍒颁簨浠跺鐞嗗嚱鏁颁腑鐨?鎵€鏈?浠ｇ爜閮借繍琛屽畬姣曞啀澶勭悊浣犵殑 state 鏇存柊銆?/li>
- 鍦ㄤ笅娆℃覆鏌撳墠澶氭鏇存柊鍚屼竴涓?state锛岄渶瑕佷紶鍏ヤ竴涓洿鏂板嚱鏁帮紝濡俿etNumber(n => n + 1)锛岃€屼笉鏄儚 setNumber(number + 1) 杩欐牱浼犲叆 涓嬩竴涓?state 鍊?/li>
- 璁剧疆 state 涓嶄細鏇存敼鐜版湁娓叉煋涓殑鍙橀噺锛屼絾浼氳姹備竴娆℃柊鐨勬覆鏌撱€?/li>
- React 浼氬湪浜嬩欢澶勭悊鍑芥暟鎵ц瀹屾垚涔嬪悗澶勭悊 state 鏇存柊銆傝繖琚О涓烘壒澶勭悊銆?/li>
- 瑕佸湪涓€涓簨浠朵腑澶氭鏇存柊鏌愪簺 state锛屼綘鍙互浣跨敤 setNumber(n => n + 1) 鏇存柊鍑芥暟銆?/li>
- 鎶婃墍鏈夊瓨鏀惧湪 state 涓殑 JavaScript 瀵硅薄閮借涓哄彧璇荤殑
- 涓嶈鐩存帴淇敼涓€涓璞★紝鑰岃涓哄畠鍒涘缓涓€涓?鏂?鐗堟湰锛屽苟閫氳繃鎶?state 璁剧疆鎴愯繖涓柊鐗堟湰鏉ヨЕ鍙戦噸鏂版覆鏌撱€?/li>
- 浣犲彲浠ヤ娇鐢ㄨ繖鏍风殑 {...obj, something: 'newValue'} 瀵硅薄灞曞紑璇硶鏉ュ垱寤哄璞＄殑鎷疯礉銆?/li>
鐘舵€佺鐞?/h2>
- 鍙涓€涓粍浠惰繕琚覆鏌撳湪 UI 鏍戠殑鐩稿悓浣嶇疆锛孯eact 灏变細淇濈暀瀹冪殑 state銆?濡傛灉瀹冭绉婚櫎锛屾垨鑰呬竴涓笉鍚岀殑缁勪欢琚覆鏌撳湪鐩稿悓鐨勪綅缃紝閭ｄ箞 React 灏变細涓㈡帀瀹冪殑 state銆?/li>
- 鐩稿悓浣嶇疆鐨勭浉鍚岀粍浠朵細浣垮緱 state 琚繚鐣欎笅鏉?/li>
- 瀵?React 鏉ヨ閲嶈鐨勬槸缁勪欢鍦?UI 鏍戜腑鐨勪綅缃?鑰屼笉鏄湪 JSX 涓殑浣嶇疆锛?/li>
- 褰撲綘鍦ㄧ浉鍚屼綅缃覆鏌撲笉鍚岀殑缁勪欢鏃讹紝缁勪欢鐨勬暣涓瓙鏍戦兘浼氳閲嶇疆
- 姘歌繙瑕佸皢缁勪欢瀹氫箟鍦ㄦ渶涓婂眰锛堝嚱鏁扮粍浠跺锛夊苟涓斾笉瑕佹妸瀹冧滑鐨勫畾涔夊祵濂楄捣鏉ワ紝鍚﹀垯姣忔娓叉煋鍑虹殑閮芥槸涓嶅悓鐨勭粍浠讹紝鐘舵€佷細涓㈠け
- 鍦ㄧ浉鍚屼綅缃噸缃?state
- 灏嗙粍浠舵覆鏌撳湪涓嶅悓鐨勪綅缃€傚悓涓€涓粍浠跺湪绗竴涓綅缃笌绗簩涓綅缃氦鏇垮睍绀烘椂浼氶噸缃畇tate
- 浣跨敤 key 鏉ラ噸缃?state銆傚嵆浣夸袱涓?<Counter /> 浼氬嚭鐜板湪 JSX 涓殑鍚屼竴涓綅缃紝瀹冧滑涔熶笉浼氬叡浜?state
- 浣跨敤key鍚庯紝React 灏嗛噸鏂板垱寤?DOM 鍏冪礌锛岃€屼笉鏄鐢ㄥ畠浠€?/li>
- 涓鸿绉婚櫎鐨勭粍浠朵繚鐣?state
- 鐢?CSS 鎶婂叾浠栫粍浠堕殣钘忚捣鏉ャ€傝繖浜涚粍浠跺氨涓嶄細浠庢爲涓绉婚櫎浜嗭紝鎵€浠ュ畠浠殑鍐呴儴 state 浼氳淇濈暀涓嬫潵銆傝繖绉嶈В鍐虫柟娉曞浜庣畝鍗?UI 闈炲父鏈夋晥銆備絾濡傛灉瑕侀殣钘忕殑鏍戝舰缁撴瀯寰堝ぇ涓斿寘鍚簡澶ч噺鐨?DOM 鑺傜偣锛岄偅涔堟€ц兘灏变細鍙樺緱寰堝樊銆?/li>
- 浣犲彲浠ヨ繘琛岀姸鎬佹彁鍗囧苟鍦ㄧ埗缁勪欢涓繚瀛樻瘡涓敹浠朵汉鐨勮崏绋挎秷鎭€傝繖鏄渶甯歌鐨勮В鍐虫柟娉?/li>
- 浣犱篃鍙互浣跨敤localStorage瀛樺偍鑽夌淇℃伅
- 涓哄涓?涓嶅悓浣嶇疆鐨?鐩稿悓缁勪欢 鎸囧畾key鍙互淇濈暀state
- 鎶?useState 杞寲涓?useReducer锛?
- 閫氳繃浜嬩欢澶勭悊鍑芥暟 dispatch actions锛堟淳鍙慳ction瀵硅薄锛夛紱
- 缂栧啓涓€涓?reducer 鍑芥暟锛屽畠鎺ュ彈浼犲叆鐨?state 鍜屼竴涓?action瀵硅薄锛堥€氬父鍖呭惈type瀛楁锛夛紝骞惰繑鍥炰竴涓柊鐨?state锛?/li>
- 浣跨敤 useReducer 鏇挎崲 useState锛?/li>
- reducer 蹇呴』鏄竴涓函鍑芥暟鈥斺€斿畠搴旇鍙绠椾笅涓€涓姸鎬併€傝€屼笉搴旇 鈥滃仛鈥?鍏跺畠浜嬫儏锛屽寘鎷悜鐢ㄦ埛鏄剧ず娑堟伅銆傝繖搴旇鍦ㄤ簨浠跺鐞嗙▼搴忎腑澶勭悊銆傦紙涓轰簡渚夸簬鎹曡幏杩欐牱鐨勯敊璇紝React 浼氬湪涓ユ牸妯″紡涓嬪娆¤皟鐢ㄤ綘鐨?reducer銆?/li>
- Context 鍙互璁╃埗鑺傜偣锛岀敋鑷虫槸寰堣繙鐨勭埗鑺傜偣閮藉彲浠ヤ负鍏跺唴閮ㄧ殑鏁翠釜缁勪欢鏍戞彁渚涙暟鎹€?
- 閫氳繃 export const MyContext = createContext(defaultValue) 鍒涘缓骞跺鍑?context銆?/li>
- 鍦ㄦ棤璁哄眰绾у娣辩殑浠讳綍瀛愮粍浠朵腑锛屾妸 context 浼犻€掔粰 useContext(MyContext) Hook 鏉ヨ鍙栧畠銆?/li>
- 鍦ㄧ埗缁勪欢涓妸 children 鍖呭湪 <MyContext.Provider value={...}> 涓潵鎻愪緵 context銆?/li>
- 鍦?React 涓紝瑕嗙洊鏉ヨ嚜涓婂眰鐨勬煇浜?context 鐨勫敮涓€鏂规硶鏄皢瀛愮粍浠跺寘瑁瑰埌涓€涓彁渚涗笉鍚屽€肩殑 context provider 涓€?/li>
- 涓嶅悓鐨?React context 涓嶄細瑕嗙洊褰兼銆備綘閫氳繃 createContext() 鍒涘缓鐨勬瘡涓?context 閮藉拰鍏朵粬 context 瀹屽叏鍒嗙锛屽彧鏈変娇鐢ㄥ拰鎻愪緵 閭ｄ釜鐗瑰畾鐨?context 鐨勭粍浠舵墠浼氳仈绯诲湪涓€璧枫€備竴涓粍浠跺彲浠ヨ交鏉惧湴浣跨敤鎴栬€呮彁渚涜澶氫笉鍚岀殑 context銆?/li>
搴旀€ユ柟妗?/h2>
- 褰撲綘甯屾湜缁勪欢鈥滆浣忊€濇煇浜涗俊鎭紝浣嗗張涓嶆兂璁╄繖浜涗俊鎭Е鍙戞柊鐨勬覆鏌撴椂锛屼綘鍙互浣跨敤 ref 銆?/li>
- 褰撲竴鏉′俊鎭敤浜庢覆鏌撴椂锛屽皢瀹冧繚瀛樺湪 state 涓€傚綋涓€鏉′俊鎭粎琚簨浠跺鐞嗗櫒闇€瑕侊紝骞朵笖鏇存敼瀹冧笉闇€瑕侀噸鏂版覆鏌撴椂锛屼娇鐢?ref 鍙兘浼氭洿楂樻晥銆?/li>
- 浣曟椂浣跨敤ref
- 瀛樺偍timeout ID
- 瀛樺偍鍜屾搷浣淒OM 鍏冪礌
- 瀛樺偍涓嶉渶瑕佽鐢ㄦ潵璁＄畻 JSX 鐨勫叾浠栧璞°€?/li>
- 涓嶈鍦ㄦ覆鏌撹繃绋嬩腑璇诲彇鎴栧啓鍏?ref.current锛宺ef 鏈韩鏄竴涓櫘閫氱殑 JavaScript 瀵硅薄
- 鏈粰鐭ラ暱搴︾殑鍒楄〃涓瘡椤圭粦瀹歳ef
-
灏嗗嚱鏁颁紶閫掔粰
ref 灞炴€?/strong>銆傝繖绉颁负 ref 鍥炶皟銆傚綋闇€瑕佽缃?ref 鏃讹紝React 灏嗕紶鍏?DOM 鑺傜偣鏉ヨ皟鐢ㄤ綘鐨?ref 鍥炶皟锛屽苟鍦ㄩ渶瑕佹竻闄ゅ畠鏃朵紶鍏?null 銆傝繖浣夸綘鍙互缁存姢鑷繁鐨勬暟缁勬垨 Map锛屽苟閫氳繃鍏剁储寮曟垨鏌愮绫诲瀷鐨?ID 璁块棶浠讳綍 ref銆?/li>
- 璁块棶鍙︿竴涓粍浠剁殑 DOM 鑺傜偣
- 涓€涓粍浠跺彲浠ユ寚瀹氬皢瀹冪殑 ref 鈥滆浆鍙戔€濈粰涓€涓瓙缁勪欢锛屽瓙缁勪欢鏄娇鐢?forwardRef 澹版槑鐨勩€?杩欒浠庣埗缁勪欢鎺ユ敹鐨剅ef浣滀负绗簩涓弬鏁颁紶鍏ョ粍浠讹紝绗竴涓弬鏁版槸 props
- 浣跨敤ref鍚庯紝鐖剁粍浠跺彲浠ヨ皟鐢ㄥ瓙缁勪欢dom鑺傜偣鐨勬墍鏈夋柟娉曪紝浣跨敤鍛戒护鍙ユ焺锛坲seImperativeHandle锛夊彲浠ュ彧鏆撮湶涓€閮ㄥ垎 API
- 閫氬父锛屼綘灏嗕粠浜嬩欢澶勭悊鍣ㄨ闂?refs銆?/li>
- 浣犲彲浠ュ己鍒?React 鍚屾鏇存柊锛堚€滃埛鏂扳€濓級DOM锛堟坊鍔犱竴涓厓绱犲悗婊氬姩鑷宠鍏冪礌锛夈€?涓烘锛屼粠 react-dom 瀵煎叆 flushSync 骞跺皢 state 鏇存柊鍖呰９ 鍒?flushSync 璋冪敤涓?/li>
- useEffect 浼氭妸瀹冨寘瑁圭殑浠ｇ爜鏀惧埌灞忓箷鏇存柊娓叉煋涔嬪悗鎵ц
-涓轰粈涔堜緷璧栨暟缁勪腑鍙互鐪佺暐 ref 鎴栬€?set鍑芥暟?
- 杩欐槸鍥犱负
ref 鍏锋湁 绋冲畾 鐨勬爣璇嗭細React 淇濊瘉 姣忚疆娓叉煋涓皟鐢?useRef 鎵€浜х敓鐨勫紩鐢ㄥ璞℃椂锛岃幏鍙栧埌鐨勫璞″紩鐢ㄦ€绘槸鐩稿悓鐨勶紝鍗宠幏鍙栧埌鐨勫璞″紩鐢ㄦ案杩滀笉浼氭敼鍙橈紝鎵€浠ュ畠涓嶄細瀵艰嚧閲嶆柊杩愯 Effect銆傚洜姝わ紝渚濊禆鏁扮粍涓槸鍚﹀寘鍚畠骞朵笉閲嶈銆傚綋鐒朵篃鍙互鍖呮嫭瀹?/li>
-
useState 杩斿洖鐨?set 鍑芥暟 涔熸湁绋冲畾鐨勬爣璇嗙锛屾墍浠ヤ篃鍙互鎶婂畠浠庝緷璧栨暟缁勪腑蹇界暐鎺?/li>
- React 鎬绘槸鍦ㄦ墽琛屼笅涓€杞覆鏌撶殑 Effect 涔嬪墠娓呯悊(鎵цeffect涓璻eturn鍑虹殑娓呯悊鍑芥暟)涓婁竴杞覆鏌撶殑 Effect銆?/li>
- 濡傛灉涓€涓€煎彲浠ュ熀浜庣幇鏈夌殑 props 鎴?state 璁＄畻寰楀嚭锛屼笉瑕佹妸瀹冧綔涓轰竴涓?state锛岃€屾槸鍦ㄦ覆鏌撴湡闂寸洿鎺ヨ绠楄繖涓€?/strong>
- 浣犲彲浠ヤ娇鐢?
useMemo Hook 缂撳瓨锛堟垨鑰呰 璁板繂锛坢emoize锛夛級涓€涓槀璐电殑璁＄畻(鐢ㄨhook鍖呰９涓€涓€楁椂鐨勫嚱鏁帮紝浠ラ伩鍏嶆瘡娆℃覆鏌撴湡闂寸殑閲嶆柊璁＄畻)銆?/li>
- 褰?props 鍙樺寲鏃堕噸缃墍鏈?state锛屽簲褰撶粰璇ョ粍浠惰缃甼ey灞炴€э紝key鍙樺寲锛宺eact浼氳嚜鍔ㄩ噸缃敼缁勪欢
- 褰?props 鍙樺寲鏃堕噸缃儴鍒?state
- 鍦ㄦ覆鏌撴湡闂存洿鏂扮粍浠舵椂锛孯eact 浼氫涪寮冨凡缁忚繑鍥炵殑 JSX 骞剁珛鍗冲皾璇曢噸鏂版覆鏌撱€備负浜嗛伩鍏嶉潪甯哥紦鎱㈢殑绾ц仈閲嶈瘯锛孯eact 鍙厑璁稿湪娓叉煋鏈熼棿鏇存柊 鍚屼竴 缁勪欢鐨勭姸鎬併€傚鏋滀綘鍦ㄦ覆鏌撴湡闂存洿鏂板彟涓€涓粍浠剁殑鐘舵€侊紝浣犱細鐪嬪埌涓€鏉℃姤閿欎俊鎭€?/li>
- 濡傛灉鏌愪簺閫昏緫蹇呴』鍦?姣忔搴旂敤鍔犺浇鏃舵墽琛屼竴娆★紝鑰屼笉鏄湪 姣忔缁勪欢鎸傝浇鏃舵墽琛屼竴娆★紝鍙互娣诲姞涓€涓《灞傚彉閲忥紙鍐欏湪缁勪欢鍑芥暟涔嬪锛夋潵璁板綍瀹冩槸鍚﹀凡缁忔墽琛岃繃浜?/li>
- 璁㈤槄澶栭儴 store锛寀seSyncExternalStore
- 鏁版嵁璇锋眰涓紝涓轰簡淇绔炴€佹潯浠朵笅杩斿洖鍊約et閿欒鐨勯棶棰橈紝浣犻渶瑕佹坊鍔犱竴涓?娓呯悊鍑芥暟 鏉ュ拷鐣ヨ緝鏃╃殑杩斿洖缁撴灉
useEffect(() => {
let ignore = false;
fetchResults(query, page).then(json => {
if (!ignore) {
setResults(json);
}
});
return () => {
ignore = true;
};
}, [query, page]);
- 姣忎釜 Effect 琛ㄧず涓€涓嫭绔嬬殑鍚屾杩囩▼銆傛姷鍒跺皢涓?Effect 鏃犲叧鐨勯€昏緫娣诲姞鍒板凡缁忕紪鍐欑殑 Effect 涓紙浠ｇ爜涓殑姣忎釜 Effect 搴旇浠ｈ〃涓€涓嫭绔嬬殑鍚屾杩囩▼锛夛紝浠呬粎鍥犱负 杩欎簺閫昏緫 闇€瑕佷笌 Effect 鍚屾椂杩愯锛堝簲閲嶆柊鍐欎竴涓猠ffect鍑芥暟鏉ュ悓姝?杩欎簺閫昏緫锛屽畠鐨勭殑濂藉鏄紝鍒犻櫎涓€涓?Effect 涓嶄細褰卞搷鍙︿竴涓?Effect 鐨勯€昏緫锛夈€?/li>
- 缁勪欢鍐呴儴鐨勬墍鏈夊€硷紙鍖呮嫭 props銆乻tate 鍜岀粍浠朵綋鍐呯殑鍙橀噺锛夐兘鏄搷搴斿紡鐨勩€備换浣曞搷搴斿紡鍊奸兘鍙互鍦ㄩ噸鏂版覆鏌撴椂鍙戠敓鍙樺寲锛屾墍浠ラ渶瑕佸皢鍝嶅簲寮忓€煎寘鎷湪 Effect 鐨勪緷璧栭」涓€?/li>
- 閬垮厤灏嗗璞″拰鍑芥暟浣滀负渚濊禆椤广€傚鏋滃湪娓叉煋杩囩▼涓垱寤哄璞″拰鍑芥暟锛岀劧鍚庡湪 Effect 涓鍙栧畠浠紝瀹冧滑灏嗗湪姣忔娓叉煋鏃堕兘涓嶅悓銆傝繖灏嗗鑷?Effect 姣忔閮介噸鏂板悓姝?/li>
- 閬垮厤绂佺敤妫€鏌ュ伐鍏枫€備负浜嗕笉杩濆弽瑙勫垯锛屼慨澶嶄唬鐮佹€绘槸鍊煎緱鐨勶紒
useEffect(() => {
// ...
// 馃敶 閬垮厤杩欐牱绂佺敤闈欐€佷唬鐮佸垎鏋愬伐鍏凤細
// eslint-ignore-next-line react-hooks/exhaustive-deps
}, []);
- 浣跨敤
useEffectEvent 锛堝疄楠屾€х殑鍔熻兘锛夎繖涓壒娈婄殑 Hook 浠?Effect 涓彁鍙栭潪鍝嶅簲寮忛€昏緫銆侲ffect Event銆傚畠鏄?Effect 閫昏緫鐨勪竴閮ㄥ垎锛屼絾鏄叾琛屼负鏇村儚浜嬩欢澶勭悊鍑芥暟銆傚畠鍐呴儴鐨勯€昏緫涓嶆槸鍝嶅簲寮忕殑锛屼笉闇€瑕佹坊鍔犲埌effect鐨勪緷璧栦腑锛孍ffect Event 璁╀綘鍦?Effect 鍝嶅簲鎬у拰涓嶅簲鏄搷搴斿紡鐨勪唬鐮侀棿鈥滄墦鐮撮摼鏉♀€濓紝 Effect Event 璇诲彇鐨勬槸鏈€鏂扮殑 props 鍜?state 銆?/li>
- 浜嬩欢澶勭悊鍑芥暟鍐呴儴鐨勯€昏緫鏄潪鍝嶅簲寮忕殑锛堢敤鎴风殑鐗瑰畾鎿嶄綔锛屾墠浼氭墽琛岋級銆?/li>
- Effect 鍐呴儴鐨勯€昏緫鏄搷搴斿紡鐨勶紙鍒囨崲鑱婂ぉ瀹わ紝闇€瑕佽嚜鍔ㄦ柇寮€涔嬪墠鐨勶紝杩炴帴鏈€鏂扮殑锛夈€?/li>
- 浣犲彲浠ュ皢闈炲搷搴斿紡閫昏緫浠?Effect 绉诲埌 Effect Event 涓€?/li>
- 鍙湪 Effect 鍐呴儴璋冪敤 Effect Event銆?/li>
- 涓嶈灏?Effect Event 浼犵粰鍏朵粬缁勪欢鎴栬€?Hook銆?/li>
- 娉ㄦ剰锛屼綘涓嶈兘鈥滈€夋嫨鈥?Effect 鐨勪緷璧栥€傛瘡涓 Effect 鎵€浣跨敤鐨勫搷搴斿紡鍊硷紝蹇呴』鍦ㄤ緷璧栦腑澹版槑銆備緷璧栨槸鐢?Effect 鐨勪唬鐮佸喅瀹氱殑銆傛瘡涓?Effect 搴旇浠ｈ〃涓€涓嫭绔嬬殑鍚屾杩囩▼
锛屼笉搴旇鍚屾涓や釜涓嶅悓鐨勩€佷笉鐩稿叧鐨勪笢瑗匡紝搴斿皢浠栦滑鎷嗗垎鍦ㄤ笉鍚岀殑effect涓?/li>
- 鏄惁鍦ㄨ鍙栦竴浜涚姸鎬佹潵璁＄畻涓嬩竴涓姸鎬侊紵浣跨敤state鐨勬洿鏂板嚱鏁板啓娉?/li>
- 浣犳兂璇诲彇涓€涓€艰€屼笉瀵瑰叾鍙樺寲鍋氬嚭鈥滃弽搴斺€濆悧锛熸垨鑰呮潵鑷?props 鐨勪簨浠跺鐞嗙▼搴忕殑澶勭悊锛屽皢闈炲搷搴斿紡閫昏緫锛坧rops鐨勪簨浠跺鐞嗙▼搴忥級绉昏嚦 Effect Event 涓紙闈炲搷搴斿紡閫昏緫搴旇鍦ㄤ簨浠朵腑锛?
- 灏介噺閬垮厤瀵硅薄鍜屽嚱鏁颁緷璧栥€傚皢瀹冧滑绉诲埌缁勪欢澶栵紙甯搁噺瀵硅薄鎴栬€呭嚱鏁帮級銆乪ffect澶栵紙鍦╡ffect澶栧瀵硅薄鎴栬€呭嚱鏁拌В鏋勶紝浣縠ffect渚濊禆瑙ｆ瀯鍑烘潵鐨勫熀鏈被鍨嬬殑鍊硷級銆?Effect 鍐咃紙鍦╡ffect涓垱寤哄璞℃垨鑰呭嚱鏁帮級
- 鑷畾涔?Hook 鍏变韩鐨勫彧鏄姸鎬侀€昏緫鑰屼笉鏄姸鎬佹湰韬€傚 Hook 鐨勬瘡涓皟鐢ㄥ畬鍏ㄧ嫭绔嬩簬瀵瑰悓涓€涓?Hook 鐨勫叾浠栬皟鐢?/li>
- 涓嶈鍒涘缓鍍?useMount 杩欐牱鐨勮嚜瀹氫箟 Hook銆備繚鎸佺洰鏍囧叿浣撳寲銆?/li>
api
- 鍗充娇涓€涓粍浠惰璁板繂鍖?memo)浜嗭紝褰撳畠鑷韩鐨勭姸鎬佸彂鐢熷彉鍖栨椂锛屽畠浠嶇劧浼氶噸鏂版覆鏌?/li>
- 鍗充娇缁勪欢宸茶璁板繂鍖?memo)锛屽綋鍏朵娇鐢ㄧ殑 context 鍙戠敓鍙樺寲鏃讹紝瀹冧粛灏嗛噸鏂版覆鏌?/li>
- 灏嗙粍浠舵覆鏌撳湪涓嶅悓鐨勪綅缃€傚悓涓€涓粍浠跺湪绗竴涓綅缃笌绗簩涓綅缃氦鏇垮睍绀烘椂浼氶噸缃畇tate
- 浣跨敤 key 鏉ラ噸缃?state銆傚嵆浣夸袱涓?<Counter /> 浼氬嚭鐜板湪 JSX 涓殑鍚屼竴涓綅缃紝瀹冧滑涔熶笉浼氬叡浜?state
- 浣跨敤key鍚庯紝React 灏嗛噸鏂板垱寤?DOM 鍏冪礌锛岃€屼笉鏄鐢ㄥ畠浠€?/li>
- 鐢?CSS 鎶婂叾浠栫粍浠堕殣钘忚捣鏉ャ€傝繖浜涚粍浠跺氨涓嶄細浠庢爲涓绉婚櫎浜嗭紝鎵€浠ュ畠浠殑鍐呴儴 state 浼氳淇濈暀涓嬫潵銆傝繖绉嶈В鍐虫柟娉曞浜庣畝鍗?UI 闈炲父鏈夋晥銆備絾濡傛灉瑕侀殣钘忕殑鏍戝舰缁撴瀯寰堝ぇ涓斿寘鍚簡澶ч噺鐨?DOM 鑺傜偣锛岄偅涔堟€ц兘灏变細鍙樺緱寰堝樊銆?/li>
- 浣犲彲浠ヨ繘琛岀姸鎬佹彁鍗囧苟鍦ㄧ埗缁勪欢涓繚瀛樻瘡涓敹浠朵汉鐨勮崏绋挎秷鎭€傝繖鏄渶甯歌鐨勮В鍐虫柟娉?/li>
- 浣犱篃鍙互浣跨敤localStorage瀛樺偍鑽夌淇℃伅
- 涓哄涓?涓嶅悓浣嶇疆鐨?鐩稿悓缁勪欢 鎸囧畾key鍙互淇濈暀state
- 閫氳繃浜嬩欢澶勭悊鍑芥暟 dispatch actions锛堟淳鍙慳ction瀵硅薄锛夛紱
- 缂栧啓涓€涓?reducer 鍑芥暟锛屽畠鎺ュ彈浼犲叆鐨?state 鍜屼竴涓?action瀵硅薄锛堥€氬父鍖呭惈type瀛楁锛夛紝骞惰繑鍥炰竴涓柊鐨?state锛?/li>
- 浣跨敤 useReducer 鏇挎崲 useState锛?/li>
- 閫氳繃 export const MyContext = createContext(defaultValue) 鍒涘缓骞跺鍑?context銆?/li>
- 鍦ㄦ棤璁哄眰绾у娣辩殑浠讳綍瀛愮粍浠朵腑锛屾妸 context 浼犻€掔粰 useContext(MyContext) Hook 鏉ヨ鍙栧畠銆?/li>
- 鍦ㄧ埗缁勪欢涓妸 children 鍖呭湪 <MyContext.Provider value={...}> 涓潵鎻愪緵 context銆?/li>
- 褰撲綘甯屾湜缁勪欢鈥滆浣忊€濇煇浜涗俊鎭紝浣嗗張涓嶆兂璁╄繖浜涗俊鎭Е鍙戞柊鐨勬覆鏌撴椂锛屼綘鍙互浣跨敤 ref 銆?/li>
- 褰撲竴鏉′俊鎭敤浜庢覆鏌撴椂锛屽皢瀹冧繚瀛樺湪 state 涓€傚綋涓€鏉′俊鎭粎琚簨浠跺鐞嗗櫒闇€瑕侊紝骞朵笖鏇存敼瀹冧笉闇€瑕侀噸鏂版覆鏌撴椂锛屼娇鐢?ref 鍙兘浼氭洿楂樻晥銆?/li>
- 浣曟椂浣跨敤ref
- 瀛樺偍timeout ID
- 瀛樺偍鍜屾搷浣淒OM 鍏冪礌
- 瀛樺偍涓嶉渶瑕佽鐢ㄦ潵璁＄畻 JSX 鐨勫叾浠栧璞°€?/li>
- 涓嶈鍦ㄦ覆鏌撹繃绋嬩腑璇诲彇鎴栧啓鍏?ref.current锛宺ef 鏈韩鏄竴涓櫘閫氱殑 JavaScript 瀵硅薄
- 鏈粰鐭ラ暱搴︾殑鍒楄〃涓瘡椤圭粦瀹歳ef
-
灏嗗嚱鏁颁紶閫掔粰
ref灞炴€?/strong>銆傝繖绉颁负ref鍥炶皟銆傚綋闇€瑕佽缃?ref 鏃讹紝React 灏嗕紶鍏?DOM 鑺傜偣鏉ヨ皟鐢ㄤ綘鐨?ref 鍥炶皟锛屽苟鍦ㄩ渶瑕佹竻闄ゅ畠鏃朵紶鍏?null銆傝繖浣夸綘鍙互缁存姢鑷繁鐨勬暟缁勬垨 Map锛屽苟閫氳繃鍏剁储寮曟垨鏌愮绫诲瀷鐨?ID 璁块棶浠讳綍 ref銆?/li>
-
灏嗗嚱鏁颁紶閫掔粰
- 璁块棶鍙︿竴涓粍浠剁殑 DOM 鑺傜偣
- 涓€涓粍浠跺彲浠ユ寚瀹氬皢瀹冪殑 ref 鈥滆浆鍙戔€濈粰涓€涓瓙缁勪欢锛屽瓙缁勪欢鏄娇鐢?forwardRef 澹版槑鐨勩€?杩欒浠庣埗缁勪欢鎺ユ敹鐨剅ef浣滀负绗簩涓弬鏁颁紶鍏ョ粍浠讹紝绗竴涓弬鏁版槸 props
- 浣跨敤ref鍚庯紝鐖剁粍浠跺彲浠ヨ皟鐢ㄥ瓙缁勪欢dom鑺傜偣鐨勬墍鏈夋柟娉曪紝浣跨敤鍛戒护鍙ユ焺锛坲seImperativeHandle锛夊彲浠ュ彧鏆撮湶涓€閮ㄥ垎 API
- 閫氬父锛屼綘灏嗕粠浜嬩欢澶勭悊鍣ㄨ闂?refs銆?/li>
- 浣犲彲浠ュ己鍒?React 鍚屾鏇存柊锛堚€滃埛鏂扳€濓級DOM锛堟坊鍔犱竴涓厓绱犲悗婊氬姩鑷宠鍏冪礌锛夈€?涓烘锛屼粠 react-dom 瀵煎叆 flushSync 骞跺皢 state 鏇存柊鍖呰９ 鍒?flushSync 璋冪敤涓?/li>
- useEffect 浼氭妸瀹冨寘瑁圭殑浠ｇ爜鏀惧埌灞忓箷鏇存柊娓叉煋涔嬪悗鎵ц
-涓轰粈涔堜緷璧栨暟缁勪腑鍙互鐪佺暐 ref 鎴栬€?set鍑芥暟?- 杩欐槸鍥犱负
ref鍏锋湁 绋冲畾 鐨勬爣璇嗭細React 淇濊瘉 姣忚疆娓叉煋涓皟鐢?useRef鎵€浜х敓鐨勫紩鐢ㄥ璞℃椂锛岃幏鍙栧埌鐨勫璞″紩鐢ㄦ€绘槸鐩稿悓鐨勶紝鍗宠幏鍙栧埌鐨勫璞″紩鐢ㄦ案杩滀笉浼氭敼鍙橈紝鎵€浠ュ畠涓嶄細瀵艰嚧閲嶆柊杩愯 Effect銆傚洜姝わ紝渚濊禆鏁扮粍涓槸鍚﹀寘鍚畠骞朵笉閲嶈銆傚綋鐒朵篃鍙互鍖呮嫭瀹?/li> -
useState杩斿洖鐨?set鍑芥暟 涔熸湁绋冲畾鐨勬爣璇嗙锛屾墍浠ヤ篃鍙互鎶婂畠浠庝緷璧栨暟缁勪腑蹇界暐鎺?/li>
- 杩欐槸鍥犱负
- React 鎬绘槸鍦ㄦ墽琛屼笅涓€杞覆鏌撶殑 Effect 涔嬪墠娓呯悊(鎵цeffect涓璻eturn鍑虹殑娓呯悊鍑芥暟)涓婁竴杞覆鏌撶殑 Effect銆?/li>
- 濡傛灉涓€涓€煎彲浠ュ熀浜庣幇鏈夌殑 props 鎴?state 璁＄畻寰楀嚭锛屼笉瑕佹妸瀹冧綔涓轰竴涓?state锛岃€屾槸鍦ㄦ覆鏌撴湡闂寸洿鎺ヨ绠楄繖涓€?/strong>
- 浣犲彲浠ヤ娇鐢?
useMemoHook 缂撳瓨锛堟垨鑰呰 璁板繂锛坢emoize锛夛級涓€涓槀璐电殑璁＄畻(鐢ㄨhook鍖呰９涓€涓€楁椂鐨勫嚱鏁帮紝浠ラ伩鍏嶆瘡娆℃覆鏌撴湡闂寸殑閲嶆柊璁＄畻)銆?/li> - 褰?props 鍙樺寲鏃堕噸缃墍鏈?state锛屽簲褰撶粰璇ョ粍浠惰缃甼ey灞炴€э紝key鍙樺寲锛宺eact浼氳嚜鍔ㄩ噸缃敼缁勪欢
- 褰?props 鍙樺寲鏃堕噸缃儴鍒?state
- 鍦ㄦ覆鏌撴湡闂存洿鏂扮粍浠舵椂锛孯eact 浼氫涪寮冨凡缁忚繑鍥炵殑 JSX 骞剁珛鍗冲皾璇曢噸鏂版覆鏌撱€備负浜嗛伩鍏嶉潪甯哥紦鎱㈢殑绾ц仈閲嶈瘯锛孯eact 鍙厑璁稿湪娓叉煋鏈熼棿鏇存柊 鍚屼竴 缁勪欢鐨勭姸鎬併€傚鏋滀綘鍦ㄦ覆鏌撴湡闂存洿鏂板彟涓€涓粍浠剁殑鐘舵€侊紝浣犱細鐪嬪埌涓€鏉℃姤閿欎俊鎭€?/li>
- 濡傛灉鏌愪簺閫昏緫蹇呴』鍦?姣忔搴旂敤鍔犺浇鏃舵墽琛屼竴娆★紝鑰屼笉鏄湪 姣忔缁勪欢鎸傝浇鏃舵墽琛屼竴娆★紝鍙互娣诲姞涓€涓《灞傚彉閲忥紙鍐欏湪缁勪欢鍑芥暟涔嬪锛夋潵璁板綍瀹冩槸鍚﹀凡缁忔墽琛岃繃浜?/li>
- 璁㈤槄澶栭儴 store锛寀seSyncExternalStore
- 鏁版嵁璇锋眰涓紝涓轰簡淇绔炴€佹潯浠朵笅杩斿洖鍊約et閿欒鐨勯棶棰橈紝浣犻渶瑕佹坊鍔犱竴涓?娓呯悊鍑芥暟 鏉ュ拷鐣ヨ緝鏃╃殑杩斿洖缁撴灉
useEffect(() => {
let ignore = false;
fetchResults(query, page).then(json => {
if (!ignore) {
setResults(json);
}
});
return () => {
ignore = true;
};
}, [query, page]);
- 姣忎釜 Effect 琛ㄧず涓€涓嫭绔嬬殑鍚屾杩囩▼銆傛姷鍒跺皢涓?Effect 鏃犲叧鐨勯€昏緫娣诲姞鍒板凡缁忕紪鍐欑殑 Effect 涓紙浠ｇ爜涓殑姣忎釜 Effect 搴旇浠ｈ〃涓€涓嫭绔嬬殑鍚屾杩囩▼锛夛紝浠呬粎鍥犱负 杩欎簺閫昏緫 闇€瑕佷笌 Effect 鍚屾椂杩愯锛堝簲閲嶆柊鍐欎竴涓猠ffect鍑芥暟鏉ュ悓姝?杩欎簺閫昏緫锛屽畠鐨勭殑濂藉鏄紝鍒犻櫎涓€涓?Effect 涓嶄細褰卞搷鍙︿竴涓?Effect 鐨勯€昏緫锛夈€?/li>
- 缁勪欢鍐呴儴鐨勬墍鏈夊€硷紙鍖呮嫭 props銆乻tate 鍜岀粍浠朵綋鍐呯殑鍙橀噺锛夐兘鏄搷搴斿紡鐨勩€備换浣曞搷搴斿紡鍊奸兘鍙互鍦ㄩ噸鏂版覆鏌撴椂鍙戠敓鍙樺寲锛屾墍浠ラ渶瑕佸皢鍝嶅簲寮忓€煎寘鎷湪 Effect 鐨勪緷璧栭」涓€?/li>
- 閬垮厤灏嗗璞″拰鍑芥暟浣滀负渚濊禆椤广€傚鏋滃湪娓叉煋杩囩▼涓垱寤哄璞″拰鍑芥暟锛岀劧鍚庡湪 Effect 涓鍙栧畠浠紝瀹冧滑灏嗗湪姣忔娓叉煋鏃堕兘涓嶅悓銆傝繖灏嗗鑷?Effect 姣忔閮介噸鏂板悓姝?/li>
- 閬垮厤绂佺敤妫€鏌ュ伐鍏枫€備负浜嗕笉杩濆弽瑙勫垯锛屼慨澶嶄唬鐮佹€绘槸鍊煎緱鐨勶紒
useEffect(() => {
// ...
// 馃敶 閬垮厤杩欐牱绂佺敤闈欐€佷唬鐮佸垎鏋愬伐鍏凤細
// eslint-ignore-next-line react-hooks/exhaustive-deps
}, []);
- 浣跨敤
useEffectEvent锛堝疄楠屾€х殑鍔熻兘锛夎繖涓壒娈婄殑 Hook 浠?Effect 涓彁鍙栭潪鍝嶅簲寮忛€昏緫銆侲ffect Event銆傚畠鏄?Effect 閫昏緫鐨勪竴閮ㄥ垎锛屼絾鏄叾琛屼负鏇村儚浜嬩欢澶勭悊鍑芥暟銆傚畠鍐呴儴鐨勯€昏緫涓嶆槸鍝嶅簲寮忕殑锛屼笉闇€瑕佹坊鍔犲埌effect鐨勪緷璧栦腑锛孍ffect Event 璁╀綘鍦?Effect 鍝嶅簲鎬у拰涓嶅簲鏄搷搴斿紡鐨勪唬鐮侀棿鈥滄墦鐮撮摼鏉♀€濓紝 Effect Event 璇诲彇鐨勬槸鏈€鏂扮殑 props 鍜?state 銆?/li> - 浜嬩欢澶勭悊鍑芥暟鍐呴儴鐨勯€昏緫鏄潪鍝嶅簲寮忕殑锛堢敤鎴风殑鐗瑰畾鎿嶄綔锛屾墠浼氭墽琛岋級銆?/li>
- Effect 鍐呴儴鐨勯€昏緫鏄搷搴斿紡鐨勶紙鍒囨崲鑱婂ぉ瀹わ紝闇€瑕佽嚜鍔ㄦ柇寮€涔嬪墠鐨勶紝杩炴帴鏈€鏂扮殑锛夈€?/li>
- 浣犲彲浠ュ皢闈炲搷搴斿紡閫昏緫浠?Effect 绉诲埌 Effect Event 涓€?/li>
- 鍙湪 Effect 鍐呴儴璋冪敤 Effect Event銆?/li>
- 涓嶈灏?Effect Event 浼犵粰鍏朵粬缁勪欢鎴栬€?Hook銆?/li>
- 娉ㄦ剰锛屼綘涓嶈兘鈥滈€夋嫨鈥?Effect 鐨勪緷璧栥€傛瘡涓 Effect 鎵€浣跨敤鐨勫搷搴斿紡鍊硷紝蹇呴』鍦ㄤ緷璧栦腑澹版槑銆備緷璧栨槸鐢?Effect 鐨勪唬鐮佸喅瀹氱殑銆傛瘡涓?Effect 搴旇浠ｈ〃涓€涓嫭绔嬬殑鍚屾杩囩▼
锛屼笉搴旇鍚屾涓や釜涓嶅悓鐨勩€佷笉鐩稿叧鐨勪笢瑗匡紝搴斿皢浠栦滑鎷嗗垎鍦ㄤ笉鍚岀殑effect涓?/li> - 鏄惁鍦ㄨ鍙栦竴浜涚姸鎬佹潵璁＄畻涓嬩竴涓姸鎬侊紵浣跨敤state鐨勬洿鏂板嚱鏁板啓娉?/li>
- 浣犳兂璇诲彇涓€涓€艰€屼笉瀵瑰叾鍙樺寲鍋氬嚭鈥滃弽搴斺€濆悧锛熸垨鑰呮潵鑷?props 鐨勪簨浠跺鐞嗙▼搴忕殑澶勭悊锛屽皢闈炲搷搴斿紡閫昏緫锛坧rops鐨勪簨浠跺鐞嗙▼搴忥級绉昏嚦 Effect Event 涓紙闈炲搷搴斿紡閫昏緫搴旇鍦ㄤ簨浠朵腑锛?
- 灏介噺閬垮厤瀵硅薄鍜屽嚱鏁颁緷璧栥€傚皢瀹冧滑绉诲埌缁勪欢澶栵紙甯搁噺瀵硅薄鎴栬€呭嚱鏁帮級銆乪ffect澶栵紙鍦╡ffect澶栧瀵硅薄鎴栬€呭嚱鏁拌В鏋勶紝浣縠ffect渚濊禆瑙ｆ瀯鍑烘潵鐨勫熀鏈被鍨嬬殑鍊硷級銆?Effect 鍐咃紙鍦╡ffect涓垱寤哄璞℃垨鑰呭嚱鏁帮級
- 鑷畾涔?Hook 鍏变韩鐨勫彧鏄姸鎬侀€昏緫鑰屼笉鏄姸鎬佹湰韬€傚 Hook 鐨勬瘡涓皟鐢ㄥ畬鍏ㄧ嫭绔嬩簬瀵瑰悓涓€涓?Hook 鐨勫叾浠栬皟鐢?/li>
- 涓嶈鍒涘缓鍍?useMount 杩欐牱鐨勮嚜瀹氫箟 Hook銆備繚鎸佺洰鏍囧叿浣撳寲銆?/li>
api
- 鍗充娇涓€涓粍浠惰璁板繂鍖?memo)浜嗭紝褰撳畠鑷韩鐨勭姸鎬佸彂鐢熷彉鍖栨椂锛屽畠浠嶇劧浼氶噸鏂版覆鏌?/li>
- 鍗充娇缁勪欢宸茶璁板繂鍖?memo)锛屽綋鍏朵娇鐢ㄧ殑 context 鍙戠敓鍙樺寲鏃讹紝瀹冧粛灏嗛噸鏂版覆鏌?/li>