ReactuseCallback&useMemo解读

时间：2023-03-28 14:13:17 HTML

鍓嶈█闃呰鏈枃闇€瑕佸Reacthooks涓殑useState鍜寀seEffect鏈変竴涓熀鏈殑浜嗚В銆傛垜鐨勮繖绡囨枃绔犲濡備綍鍦≧eact椤圭洰涓厖鍒嗕娇鐢℉ooks杩涜浜嗘€讳綋浠嬬粛銆倁seCallback瀹樻柟鏂囨。瀵箄seCallback鐨勪綔鐢細浼犻€掍竴涓唴鑱斿洖璋冨拰涓€涓緷璧栨暟缁勩€倁seCallback灏嗚繑鍥炰竴涓蹇嗙増鏈殑鍥炶皟锛屽彧鏈夊綋鍏朵腑涓€涓緷璧栭」鍙戠敓鍙樺寲鏃舵墠浼氬彂鐢熷彉鍖栥€傜畝鍗曞湴璇达紝瀹冭繑鍥炰竴涓嚱鏁帮紝鍙湁褰撲緷璧栭」鍙戠敓鍙樺寲鏃讹紝瀹冩墠浼氳鏇存柊锛堣繑鍥炰竴涓柊鍑芥暟锛夈€倁seCallback鐨勫簲鐢ㄥ湪绾夸唬鐮侊細CodeSandboximportReact,{useState,useCallback}from'react';importButtonfrom'./Button';exportdefaultfunctionApp(){const[count1,setCount1]=useState(0);const[count2,setCount2]=useState(0);const[count3,setCount3]=useState(0);consthandleClickButton1=()=>{setCount1(count1+1);};consthandleClickButton2=useCallback(()=>{setCount2(count2+1);},[count2]);杩斿洖(onClickButton={()=>{setCount3(count3+1);}}>Button3

);}//Button.jsximportReactfrom'react';constButton=({onClickButton,children})=>{return(<>{children}{Math.random()});};瀵煎嚭榛樿React.memo(Button)锛涙渚嬩腑鍙互鐐瑰嚮demo涓殑鍑犱釜鎸夐挳鐪嬬湅鏁堟灉锛氱偣鍑籅utton1鏃讹紝鍙細鏇存柊Button1鍜孊utton3鍚庨潰鐨勫唴瀹癸紱褰撶偣鍑籅utton2鏃讹紝涓変釜鎸夐挳鍚庨潰鐨勫唴瀹归兘浼氭洿鏂帮紱鍗曞嚮Button3涔熷彧浼氭洿鏂癇utton1鍜孊utton3鍚庨潰鐨勫唴瀹广€備粩缁嗚€冭檻浠ヤ笂鏁堟灉鍙互鍙戠幇锛屽彧鏈夐€氳繃useCallback浼樺寲鐨凚utton2鍦ㄧ偣鍑昏嚜韬椂浼氬彂鐢熷彉鍖栵紝鍏朵粬涓や釜鍙鏇存柊鐖剁粍浠跺氨浼氬彂鐢熷彉鍖栵紙杩欓噷鐨凚utton1鍜孊utton3鍏跺疄鏄竴鏍风殑锛夛紝鏃犻潪鏄嚱鏁板啓鍦ㄤ簡涓嶅悓鐨勫湴鏂癸級銆備笅闈㈡垜浠粩缁嗙湅鐪嬪叿浣撶殑浼樺寲閫昏緫銆傚湪杩欓噷鎮ㄥ彲鑳戒細娉ㄦ剰鍒癇utton缁勪欢鐨凴eact.memo鏂规硶銆傚湪杩欑鏂规硶涓紝灏嗗閬撳叿杩涜娴呭眰姣旇緝銆傚鏋滈亾鍏锋病鏈夋敼鍙橈紝缁勪欢灏嗕笉浼氳閲嶆柊娓叉煋銆俢onsta=()=>{};甯搁噺b=()=>{};涓€涓?==涔欙紱//false涓婇潰鐨勪唬鐮佸彲浠ョ湅鍑烘垜浠袱涓浉鍚岀殑鍑芥暟鏄笉鐩哥瓑鐨勶紙杩欐槸搴熻瘽锛岀浉淇＄湅鍒扮殑浜洪兘鐭ラ亾锛屽氨涓嶈В閲婁簡锛夈€俢onst[count1,setCount1]=useState(0);//...consthandleClickButton1=()=>{setCount1(count1+1);};//...returnButton1鍥炶繃澶存潵鐪嬶紝涓婇潰鐨凚utton缁勪欢閮介渶瑕佷竴涓猳nClickButtonprops銆傝櫧鐒禦eact.memo鏄敤鏉ヤ紭鍖栫粍浠剁殑锛屼絾鏄垜浠０鏄庣殑handleClickButton1鐩存帴瀹氫箟浜嗕竴涓柟娉曪紝瀵艰嚧鍙鐖剁粍浠讹紙status鎴栬€卲rops鏇存柊锛夊氨浼氬鑷撮噸鏂版覆鏌擄紝杩欓噷澹版槑浜嗕竴涓柊鐨勬柟娉曘€傚敖绠℃柊鏂规硶鍜屾棫鏂规硶鐨勯暱搴︾浉鍚岋紝浣嗗畠浠粛鐒舵槸涓や釜涓嶅悓鐨勫璞°€傛瘮杈僐eact涔嬪悗銆傚憟鐜般€俢onsthandleClickButton2=useCallback(()=>{setCount2(count2+1);},[count2]);涓婇潰浠ｇ爜涓紝鎴戜滑鐨勬柟娉曚娇鐢╱seCallback鍖呰９浜嗕竴灞傦紝鍚庨潰浼犲叆浜嗕竴涓猍count2]鍙橀噺锛岃繖閲寀seCallback浼氭牴鎹甤ount2鏄惁鍙樺寲鏉ュ喅瀹氭槸鍚﹁繑鍥炰竴涓柊鐨勫嚱鏁帮紝鍑芥暟鍐呴儴浣滅敤鍩熶細涔熺浉搴旀洿鏂般€傜敱浜庢垜浠殑鏂规硶鍙緷璧栦簬鍙橀噺count2锛岃€宑ount2鍙湁鍦˙utton2琚偣鍑诲悗鎵嶄細鏇存柊handleClickButton2锛屽鑷存垜浠偣鍑籅utton1鑰屾病鏈夐噸鏂版覆鏌揃utton2鐨勫唴瀹广€俆ipsimportReact,{useState,useCallback}from'react';importButtonfrom'./Button';exportdefaultfunctionApp(){const[count2,setCount2]=useState(0);澶嶅埗浠ｇ爜consthandleClickButton2=useCallback(()=>{setCount2(count2+1);},[]);return(Button2);}鎴戜滑璋冩暣浜嗕唬鐮侊紝绗簩涓猽seCallback渚濊禆鐨勫弬鏁板彉鎴愪簡涓€涓┖鏁扮粍锛屼篃灏辨槸璇磋繖涓柟娉曟病鏈変緷璧栧€煎苟涓斾笉浼氳鏇存柊銆傚苟涓旂敱浜嶫S鐨勯潤鎬佷綔鐢ㄥ煙锛岃繖涓嚱鏁颁腑鐨刢ount2浼氫竴鐩翠负0锛屽彲浠ュ娆＄偣鍑籅utton2鏌ョ湅鍙樺寲锛屼細鍙戠幇Button2鍚庨潰鐨勫€煎彧浼氭敼鍙樹竴娆°€傚洜涓轰笂闈㈠嚱鏁颁腑鐨刢ount2涓€鐩存槸0锛屼篃灏辨槸姣忔閮芥槸0+1锛屾墍浠utton鎺ュ彈鐨刢ount灞炴€у彧浼氫粠0鍙樻垚1锛屾案杩滄槸1锛岃€宧andleClickButton2涔熸病鏈変緷璧栭」锛屼笉浼氳繑鍥瀗ew鏂规硶锛屽鑷碆utton缁勪欢浠呭湪璁℃暟鏇存敼鏃舵洿鏂颁竴娆°€備笂闈㈣鐨勬槸涓嶆洿鏂板鑷寸殑闂锛屾帴涓嬫潵鎴戜滑鍐嶇湅棰戠箒鏇存柊瀵艰嚧鐨勯棶棰樸€俢onst[text,setText]=useState('');consthandleSubmit=useCallback(()=>{//...},[鏂囨湰]);return(

setText(e.target.value)}/>);鍦ㄤ笂闈㈢殑渚嬪瓙涓紝鎴戜滑鍙互鐪嬪埌鎴戜滑鐨刪andleSubmit浼氶殢鐫€鏂囨湰鐨勬洿鏂拌€屾洿鏂帮紝鍦ㄤ娇鐢╥nput涓枃鏈殑鍙樺寲鑲畾鏄浉褰撻绻佺殑銆傚鏋滄鏃舵垜浠殑OtherForm鏄竴涓ぇ缁勪欢锛屽氨蹇呴』瀵瑰叾杩涜浼樺寲銆傝繖鏃跺€欏氨鍙互浣跨敤useRef鏉ュ府蹇欎簡銆俢onsttextRef=useRef('');const[text,setText]=useState('');consthandleSubmit=useCallback(()=>{console.log(textRef.current);//...},[textRef]);return(

{const{value}=e.target;setText(value)textRef.current=value;}}/>);浣跨敤useRef鐢熸垚涓€涓湪缁勪欢鐨勬瘡涓敓鍛藉懆鏈熼兘鍙互璁块棶鐨勫彉閲忥紝handleSubmit涓嶄細鍥犱负鏂囨湰鐨勬洿鏂拌€屾洿鏂帮紝涓嶄細璁㎡therForm澶氭Render銆傝瘎璁轰腑鏈夋湅鍙嬫彁鍒版槸鍚﹁鐢╱seCallback鍖呰９鎵€鏈夌殑鏂规硶銆傝繖搴旇涔熸槸寰堝鍒氭帴瑙seCallback鐨勫皬浼欎即浠殑鐤戦棶銆傞鍏堢瓟妗堟槸锛氫笉瑕佹妸鎵€鏈夌殑鏂规硶閮界敤useCallback鍖呰璧锋潵锛屼笅闈㈣缁嗚璇淬€俢onst[count1,setCount1]=useState(0);const[count2,setCount2]=useState(0);consthandleClickButton1=()=>{setCount1(count1+1)};consthandleClickButton2=useCallback(()=>{setCount2(count2+1)},[count2]);return(<>button1button2)鍙傝€冨墠绔潰璇曢姝ラ璇﹁В鐨勪笂闈㈢殑鍐欐硶浼氬湪褰撳墠缁勪欢閲嶆柊娓叉煋鐨勬椂鍊欏０鏄庝竴涓柊鐨刪andleClickButton1鍑芥暟锛屼笅闈seCallback涓殑鍑芥暟涔熶細澹版槑涓€涓柊鐨勫嚱鏁帮紝浼犲叆useCallback锛岃櫧鐒惰繖涓嚱鏁板彲鑳戒細鍥犱负inputs娌℃湁鏀瑰彉杩斿洖鍒癶andleClickButton2鍙橀噺銆傛墍浠ュ湪鎴戜滑鐨勪緥瀛愪腑锛屽畠杩斿洖鏂板嚱鏁板拰鏃у嚱鏁版槸涓€鏍风殑锛屽洜涓轰笅闈㈢殑