React性能优化技巧
时间：2023-03-29 11:10:52
HTML
鎴戜滑涓€鑸仛React鎬ц兘浼樺寲锛屾湁涓ょ鎬濊矾1.楠岃瘉鏍戜腑鐨剆tate鏄惁鏀惧湪浜嗘瘮瀹為檯闇€瑕佹洿楂樼殑浣嶇疆銆傦紙渚嬪锛屽皢杈撳叆妗嗙殑鐘舵€佹斁鍦ㄩ泦涓紡瀛樺偍涓槸娌℃湁鎰忎箟鐨勩€傦級2.杩愯React寮€鍙戜汉鍛樺伐鍏蜂互妫€娴嬪鑷翠簩娆℃覆鏌撶殑鍘熷洜锛屽苟灏唌emo()鍖呰鍦ㄦ槀璐电殑瀛愭爲涓娿€傦紙骞跺湪闇€瑕佺殑鍦版柟浣跨敤useMemo()锛夐櫎浜嗕互涓婁袱绉嶆€濊矾锛屽垎浜袱涓熀鏈妧宸ю煒婃彁楂樻覆鏌撴€ц兘锛氳繖閲屾槸涓€涓覆鏌撴€ц兘闂涓ラ噸鐨勭粍浠讹紙褰揂pp涓殑棰滆壊鍙戠敓鍙樺寲鏃讹紝鎴戜滑浼氶噸鏂版覆鏌?ExpensiveTree/>缁勪欢)import{useState}from'react';瀵煎嚭榛樿鍑芥暟App(){let[color,setColor]=useState('red');return(
setColor(e.target.value)}/>浣犲ソ锛屼笘鐣岋紒 );}functionExpensiveTree(){鐜板湪=performance.now();while(performance.now()-now<100){//浜哄伐寤惰繜--100ms浠€涔堥兘涓嶅仛}return
鎴戞槸涓€涓潪甯告參鐨勭粍浠舵爲銆?/p>;}杩欎釜闂鍙互閫氳繃鍔犱环鏉ヨВ鍐砿emo()鍒癊xpensiveTree涓庢垜浠叡鍚岀殑鎯虫硶銆傛帴涓嬫潵璇磋鎴戜滑鐨勬妧鑳藉惂銆傛妧宸?锛氬悜涓嬬Щ鍔⊿tate浠旂粏鏌ョ湅娓叉煋浠ｇ爜锛屾敞鎰忓彧鏈夎繑鍥炵殑鏍戠殑涓€閮ㄥ垎鐪熸鍏冲績褰撳墠棰滆壊锛屾墍浠ヨ鎴戜滑灏嗚閮ㄥ垎鎻愬彇鍒癋orm缁勪欢涓苟灏嗙姸鎬佺Щ鍔ㄥ埌璇ョ粍浠朵腑锛歟xportdefaultfunctionApp(){return(<>
);}functionForm(){璁color,setColor]=useState('red');return(<>
setColor(e.target.value)}/>浣犲ソ锛屼笘鐣岋紒);}鐜板湪濡傛灉棰滆壊鏀瑰彉浜嗭紝鍙湁Form浼氶噸鏂版覆鏌擄紝闂灏辫В鍐充簡銆俆rick2:ContentHoisting褰撻儴鍒嗙姸鎬佺敤鍦ㄦ槀璐垫爲鐨勪笂灞備唬鐮佷腑鏃讹紝涓婅堪瑙ｅ喅鏂规涓嶈捣浣滅敤銆傚繀鍥惧皢棰滆壊鏀惧湪鐖跺厓绱燿iv涓?)銆傚鍑洪粯璁ゅ嚱鏁癆pp(){let[color,setColor]=useState('red');return(setColor(e.target.value)}/>浣犲ソ锛屼笘鐣岋紒
);}娌℃湁鍔炴硶鎶婁笉鐢ㄩ鑹茬殑閮ㄥ垎鎻愬彇鍒板彟涓€涓粍浠朵腑锛屽洜涓洪鑹查渶瑕佸湪ExpensiveTree鐨勭埗缁勪欢div涓娇鐢ㄣ€傛垜浠彲浠ュ皢App缁勪欢鎷嗗垎涓轰袱涓瓙缁勪欢銆備緷璧栦簬棰滆壊鐨勪唬鐮佷笌棰滆壊鐘舵€佸彉閲忎竴璧锋斁鍏olorPicker缁勪欢涓€備笉鍏冲績棰滆壊鐨勯儴鍒嗚繕鏄斁鍦ˋpp缁勪欢涓紝鐒跺悗浠SX鍐呭鐨勫舰寮忎紶閫掔粰ColorPicker锛屼篃灏辨槸children灞炴€с€傚綋棰滆壊鏀瑰彉鏃讹紝ColorPicker浼氶噸鏂版覆鏌撱€備絾瀹冧粛鐒舵嫢鏈変笂娆′粠App鑾峰緱鐨勭浉鍚屽瓙灞炴€э紝鍥犳React涓嶄細璁块棶璇ュ瓙鏍戙€傚洜姝わ紝ExpensiveTree涓嶄細閲嶆柊娓叉煋銆俥xportdefaultfunctionApp(){return(
Hello,world!
);}functionColorPicker({children}){璁color,setColor]=useState锛堚€滅孩鑹茬殑鈥濓級;return(
setColor(e.target.value)}/>{children} );}杩欎袱涓猼echniques鍜宮emo鏄浉杈呯浉鎴愮殑锛屽ぇ瀹跺彲浠ユ牴鎹疄闄呭満鏅喅瀹氫娇鐢ㄥ摢绉嶆柟娉曟潵鎻愬崌娓叉煋鎬ц兘銆?/p>
