杩欓噷鐨勬枃绔犻兘鏄叧浜巋ooksreact锛屼粈涔堟槸hooks锛屾墍浠ラ【鍚嶆€濅箟Hooks缈昏瘧杩囨潵灏辨槸閽╁瓙锛孒ooks鏄嚱鏁帮紝璐熻矗鍦ㄥ嚱鏁扮粍浠朵腑hook鍒板閮ㄥ嚱鏁颁腑銆傦紙鎴戣浜嗭紝浣嗘垜濂藉儚娌¤锛夋湁浠€涔堝ソ鐪嬬殑锛熷姛鑳界粍浠跺師鍦伴涓婂ぉ锛岃繖涓笉鐢ㄦ搷蹇冿紝鐢熷懡鍛ㄦ湡涔熶笉鐢ㄨ閭ｄ箞澶氥€傚彲浠ユ妸浠庡ご鍒板熬鐨勭敓鍛藉懆鏈熷啓鍦ㄤ竴璧凤紝浠ｇ爜鏇寸編瑙傘€倁seEffect(()=>{console.log('寮€娉?)return()=>{console.log('End')}},[])//ps.绌烘暟缁勫氨鏄彧杈撳叆涓€娆＄殑props鍊肩殑鍙樺寲锛寈x鍊肩殑鍙樺寲浠栦滑閮藉彲浠ユ斁鍦ㄤ竴璧风洃鎺seEffect(()=>{console.log('涓嶇鏄暟缁勮繕鏄璞★紝鏁版嵁閮藉彲浠ヤ笉绠″娣遍兘杩涘叆锛堝悗鏉ュ彂鐜颁笉鑳藉お娣憋級锛岃繖涓嶆瘮vue鐨剋atch濂藉悧锛?)//閭ｄ箞useEffect鏄浣曠洃鍚暟鎹彉鍖栫殑//涓よ€呮湁浠€涔堝尯鍒玜nduseLayoutEffect//杩欎釜鍏堜粠閽╁瓙鐨勫熀鏈蹇靛垪琛ㄥ紑濮嬶紝璇峰線涓嬬湅},[props.a,b])閫氳繃鏌ョ湅useEffect鐨勬簮鐮侊紝鎴戜滑涓嶉毦鍙戠幇//閫氳繃鏌ョ湅婧愪唬鐮侊紝鎴戜滑鐭ラ亾for(leti=0;iboolean=typeofObject.is==='function'?Object.is:鏄紱瀵煎嚭榛樿瀵硅薄鏄紱鎵€浠ュ畠鏄娇鐢∣bject.is杩涜姣旇緝銆傚鏋滈渶瑕佸仛娣卞害瀵规瘮锛屽彲浠ヤ娇鐢╝hooks鐨剈seDeepCompareEffect锛岀敤娉曞拰useEffect涓€鏍凤紝浣嗘槸deps鏄€氳繃lodash鐨刬sEqual姣旇緝娣卞叆鐨勪唬鐮佸鐢ㄧ巼鏇撮珮銆傛姳鎬ㄩ棴鍖呴櫡闃眎mport{useEffect,useState}from'react'exportdefaultfunctionApp(){const[count,setCount]=useState(0)useEffect(()=>{setInterval(()=>{setCount(count+1)},1000);},[])return(count={count}
);}浣犲彲鑳芥€绘槸鏈熸湜鏁板瓧浼氭敼鍙橈紝浣嗗畠骞舵病鏈夛紝涓€鐩翠繚鎸佸湪1.涓轰粈涔堜簨鎯呬細鍙戝睍鎴愯繖鏍凤紝閭ｅ氨浠庡簳灞傛覆鏌撹璧枫€傜涓€娆℃覆鏌?>鎵цAPP->usestate璁剧疆count涓哄垵濮?->1绉掑悗state鍙樺寲->鏌ョ湅update->璺熼殢fiber閾捐〃鎵цhooks->useEffectdeps淇濇寔涓嶅彉->鐒跺悗1绉掑悗鐨刢ount涓€鐩存槸0+1銆俢ountuseEffect(()=>{setInterval(()=>{setCount(count+1)},1000);},[count])//杩欐牱纭疄浼氬緱鍒版渶鏂扮殑count//鉂屼絾涓嶅缓璁湪杩欓噷鍐?/鍥犱负浣犳兂鎯筹紝姣忔洿鏂颁竴娆¤鏁帮紝瀹冮兘浼氶噸鏂拌繘鍏ュ苟寤虹珛涓€涓柊鐨勫畾鏃跺櫒//浠ュ悗鐨勭敾闈細闈炲父闅剧湅銆傚缓璁増鏈柟娉晆seEffect(()=>{setInterval(()=>{setCount(res=>(res+1))},1000);},[])//setCount鏈韩鍙互浼犳柟娉曪紝灏辨槸latestvalueadvancedversionrefDafa//绠€鍗曟潵璇达紝useRef杩斿洖鍚屼竴涓璞★紝鎸囧悜鍚屼竴鍧楀唴瀛榣etref_=useRef(1)ref_.current++useEffect(()=>{setInterval(()=>{console.log(ref.current)//3},1000)})涓嶈兘鐢ㄦ潵鍒ゆ柇鎴栬窡闅忓彇鏈哄櫒鍑芥暟馃尠if(Math.random()>0.5){useState('first')}letshowSex=trueif(showSex){const[sex,setSex]=useState('male');showSex=false;}鍑虹幇涓婅堪琛屼负鐨勫師鍥犳槸hooks鐨勬暟鎹鐞嗘槸閫氳繃涓€涓摼琛ㄦ潵绠＄悊鐨勶紝鎵€浠ュ鏋滀笉涓句釜涓嶅悎閫傜殑渚嬪瓙鏁版嵁鏄笉鑳戒竴鏃朵娇鐢ㄧ殑锛屽氨鍍忔暟缁刐0]浠ｈ〃useState('A')array[1]standsforuseState('B)鐜板湪浣犵獊鐒跺垹鎺?A'锛屽氨鍙樻垚浜嗕竴涓猘rray[0]standsforuseState('B')锛岄偅浣犲氨涓嶆槸浣狅紝浠栧氨涓嶆槸浠杣seCallBack鎴杣seMemo鍙湁鍦ㄦ暟鎹彂鐢熷彉鍖栨椂鎵嶄細閲嶆柊璁＄畻缁撴灉銆傛嵁璇存槸涓轰簡鎬ц兘浼樺寲锛岃捣鍒扮紦瀛樼殑浣滅敤銆傝繖閲屾湁涓€涓潰璇曚腑缁忓父琚棶鍒扮殑useCallBack鍜寀seMemo鐨勫尯鍒棶棰橈紵缃戜笂鍚勭鍟板棪鐨勫垎鏋愶紝涓€鍙ヨ瘽鍏跺疄灏辨槸useCallback缂撳瓨閽╁瓙鍑芥暟锛寀seMemo缂撳瓨杩斿洖鍊硷紙璁＄畻缁撴灉锛夈€愬綋鐒秛seMemo涔熷彲浠ヤ紶鍏ュ嚱鏁般€戣繖鏃跺€欏ソ濂囩殑瀹濆疂浠細闂簡锛屾墍浠ヤ細鏈夎繖涔堝鐢ㄨ繖涓紝杩欎箞澶氫唬鐮佹湁浠€涔堢敤锛熺瓟妗堟槸锛氭€ц兘浼樺寲锛岃繖娑夊強鍒皉eact鏇存繁灞傛鐨勬覆鏌撳師鐞嗭紝鈥淐ompareandupdate!!鈥濓紝react姣忔娓叉煋鏃讹紝閮戒細閲嶆柊璁＄畻鍊煎拰鍑芥暟Rendering锛岃繖閲屼細娑堣€椾竴浜涘唴瀛樸€備娇鐢ㄩ偅2涓笢瑗垮叾瀹炲氨鏄湪鍛婅瘔react鎴戜滑娌℃湁鍙橈紝缁欐垜鐣欑潃锛屼笉鐢ㄦ瘮浜嗐€備竴浜涘濮撶殑灏忔湅鍙嬭繖鏃跺€欎笉鑰愮儲浜嗭紝绔欒捣鏉ユ彁闂細react涓轰粈涔堜笉鑷姩甯垜浠仛杩欎簺浼樺寲鍛紵鎴戝彧鎯冲畨瀹夐潤闈欑殑鍐欎唬鐮併€備负浠€涔堣鑰冭檻鏄惁鍖呭惈useCallBack锛熶竴浜涘缇炵殑瀛╁瓙浼氬榾鍜曡繖涓棶棰橈紝涓轰粈涔堜笂璇剧殑鏃跺€欎笉闇€瑕佸叧娉ㄨ繖浜涚粍浠跺憿锛熶釜浜虹湅娉曪細鏂版棫鐗堟湰鐨勬覆鏌撴柟寮忓叾瀹炲樊涓嶅銆傚浜庢祻瑙堝櫒鏉ヨ锛屼竴涓皬鐨勭増鏈洿鏂版墍甯︽潵鐨勬晥鏋滐紝鍙兘杩滆儨浜庝綘杈涜嫤浜嗗灏戜釜鏃ユ棩澶滃銆傜患涓婃墍杩帮紝hooks瑕佸ソ锛屼絾瑕佹厧鐢?center>浠婂ぉ鍏虫敞鍏紬鍙凤紝鏈夊皬鍝ュ湪绾挎寚瀵?/center>鏈枃鐢卞崥鏂囧彂甯冨钩鍙癘penWrite鍙戝竷锛?/p>
