涓€銆佸墠缃煡璇哛eact缁勪欢鏇存柊鐨勪竴浜涘父璇嗭細1銆佸綋缁勪欢鍐呴儴鐘舵€佸彂鐢熷彉鍖栨椂锛岀粍浠朵細閲嶆柊娓叉煋exportdefaultfunctionFather(){console.log('鐖剁粍浠堕噸鏂版覆鏌?)const[value,setValue]=useState(0)return(
value:{value}
{setValue(value+1)}}>value+1)}寰堢畝鍗曠殑鏍楀瓙锛岀偣鍑绘寜閽椂鏀瑰彉缁勪欢鍐呴儴鐨勪竴涓姸鎬佸€硷紝浠庢帶鍒跺彴鍙互鐪嬪埌杩欎釜鍑芥暟component浼氬啀娆℃樉绀烘墍璋撲竴娆″氨鏄噸鏂版覆鏌撱€?.鐖剁粍浠剁殑閲嶆柊娓叉煋浼氬鑷村瓙缁勪欢涔熼噸鏂版覆鏌撱€俥xportdefaultfunctionChild(){console.log('瀛愮粍浠堕噸鏂版覆鏌?)return(
)}瀹氫箟涓€涓笉渚濊禆浠讳綍灞炴€х殑瀛愮粍浠剁殑鐖剁粍浠躲€傦紙鍙樉绀虹埗缁勪欢涓殑瀛愮粍浠讹級浠庢帶鍒跺彴涓婏紝绗竴娆℃覆鏌撶粍浠舵椂鎵撳嵃绗竴缁刐鐖剁粍浠堕噸鏂版覆鏌擄紝瀛愮粍浠堕噸鏂版覆鏌揮銆傚綋鐐瑰嚮鐖剁粍浠朵腑鐨勬寜閽椂锛岀埗缁勪欢鐨勭姸鎬佸彂鐢熷彉鍖栥€備粠1寮€濮嬶紝鐖剁粍浠跺皢琚噸鏂版覆鏌撱€備絾鏄痯rintdeck鍛婅瘔鎴戜滑瀛愮粍浠朵篃閲嶆柊娓叉煋浜嗐€傝В閲婏細鐖剁粍浠剁殑鐘舵€佹敼鍙樷€斺€旂埗缁勪欢閲嶆柊娓叉煋鈥斺€斿鑷村瓙缁勪欢涔熼噸鏂版覆鏌撱€傝繕鏈夎瘉鏄庯紝鍗充娇瀛愮粍浠朵緷璧栫埗缁勪欢鐨勬暟鎹紝锛堟瘮濡俷锛夛紝浣嗘槸鎴戞病鏈夋敼n锛屾敼鐨勬槸涓庡瓙缁勪欢鐩稿叧鐨勫€硷紝涓嶇鍊硷紝瀛愮粍浠朵篃浼氳閲嶆柊娓叉煋銆傜敱姝ゅ彲瑙侊紝鏈夊緢澶氬満鏅細瀵艰嚧瀛愮粍浠舵覆鏌撴棤鏁堛€備篃灏辨槸璇达紝瀛愮粍浠舵樉鐒朵笉闇€瑕侀噸鏂版覆鏌擄紝鍙瀹冧緷璧栫殑鐖剁粍浠剁殑鏁版嵁鍙戠敓鍙樺寲锛屽氨鍙互閲嶆柊娓叉煋銆傝繖灏辨槸React.memo鐨勪娇鐢?.濡傛灉React.memo璇翠笂闈㈣鐨凜hild鍙槸涓€涓櫘閫氱殑鍑芥暟缁勪欢锛屽畠鍙細璺熺潃鐖剁粍浠剁殑娓叉煋锛屼笉鍋囨€濈储鍦版覆鏌撹嚜宸便€傞偅涔堢敤React.memo鍖呰９鐨勭粍浠跺氨鍏峰浜嗚瘑鍒玴rops鐨勮兘鍔涳紝瀹冨彲浠ュ仛鍒帮細鍙湁褰撳畠鎵€渚濊禆鐨刾rops鍙戠敓鍙樺寲鏃讹紝瀹冩墠浼氶噸鏂版覆鏌揻unctionChild(){console.log('瀛愮粍浠堕噸鏂版覆鏌?)return(
)}exportdefaultReact.memo(Child)鎴戜滑鍦–hild澶栭潰鍖呰９涓€灞俁eact.memo锛岃繕鏄蛋涓婇潰鐨勬祦绋嬨€傜涓€缁勪袱涓墍鏈夌粍浠堕兘琚覆鏌撲簡锛岃繖鏄粍浠剁殑鍒濆娓叉煋鎵撳嵃缁撴灉銆傚綋鐐瑰嚮鎸夐挳鏃讹紝鐖剁粍浠剁殑鐘舵€佸彂鐢熷彉鍖栵紝鐖剁粍浠堕噸鏂版覆鏌擄紝浣嗗瓙缁勪欢涓嶉噸鏂版覆鏌撱€傚瓙缁勪欢鏈変緷璧栫殑props馃尠:functionChild(props){console.log('瀛愮粍浠堕噸鏂版覆鏌?)const{n}=propsreturn(
)}exportdefaultReact.memo(Child)鐖剁粍浠舵湁涓や釜鐘舵€侊細value鍜宯銆傚瓙缁勪欢鍙緷璧杗exportdefaultfunctionFather(){console.log("Parentcomponentre-renders");const[鍊?setValue]=useState(0);const[n,setN]=useState(0);杩斿洖(
value:{value}
n:{n}
{setValue(value+1);}}>value+1{setN(n+1);}}>n+1
);}缁撴灉鏄彧鏈夌偣鍑籲+1鎸夐挳鏃讹紝鐖剁粍浠秐鐨勭姸鎬佹墠浼氭敼鍙樷€斺€旂埗缁勪欢娓叉煋鈥斺€攏鏄疌hild渚濊禆鐨勫睘鎬э紝鎵€浠hild涔熸覆鏌擄紝杩欓伩鍏嶄簡寰堝涓庡瓙缁勪欢鏃犲叧鐨勭姸鎬佸彉鍖栧鑷寸殑瀛愮粍浠舵覆鏌撴棤鏁堛€?.useCallbackuseCallback涔熺敤浜庨伩鍏嶅瓙缁勪欢鐨勬棤鏁堟覆鏌擄紝瀵逛簬鍑芥暟銆備笂闈㈣櫧鐒剁粰瀛愮粍浠跺姞浜嗕竴灞俁eact.memo锛屼絾鏄鏋滃瓙缁勪欢鐨勪竴涓猵rops鏄竴涓嚱鏁帮紝閭ｄ箞杩欎釜鍑芥暟鏄畾涔夊湪鐖剁粍浠跺唴閮ㄧ殑銆傚綋鐖剁粍浠跺洜鐘舵€佹敼鍙樿€岄噸鏂版覆鏌撴椂锛屽唴閮ㄥ嚱鏁颁篃浼氳閲嶆柊鍒涘缓锛岃櫧鐒跺嚱鏁板唴瀹圭浉鍚岋紝浣嗗畠鐨勫紩鐢ㄥ彂鐢熶簡鍙樺寲锛屽嵆鍑芥暟fn鍦ㄥ唴瀛樹腑鎸囧悜鐨勫湴鍧€宸茬粡鏀瑰彉銆傛墍浠ュ瓙缁勪欢璁や负prop鍙戠敓浜嗗彉鍖栵紝瀹冧細閲嶆柊娓叉煋鑷繁銆備絾鍏跺疄鍔熻兘鏈韩骞舵病鏈夋敼鍙橈紝鎵€浠ヨ繖绉嶆儏鍐典笅鐨勬棤鏁堟覆鏌撲篃鏄彲浠ヤ紭鍖栫殑銆傪煂?:exportdefaultfunctionFather(){console.log("鐖剁粍浠堕噸鏂版覆鏌?);constclick=()=>{console.log('鎴戞槸涓€涓偣鍑诲嚱鏁?)}return(
);}瀹氫箟涓€涓澶栫殑functionclick涓虹埗缁勪欢锛屽苟浣滀负prop浼犵粰瀛愮粍浠讹紝瀛愮粍浠朵篃鍙緷璧杗銆傜粨鏋滄槸褰撴垜鐐瑰嚮value+1鏃讹紝瀛愮粍浠朵篃閲嶆柊娓叉煋銆傝繖鏄洜涓虹埗缁勪欢鐨勬覆鏌撳鑷寸偣鍑诲嚱鏁拌閲嶆柊鍒涘缓锛屾敼鍙樹簡瀹冪殑鍦板潃銆備紭鍖栵細灏嗚浼犻€掔粰瀛愮粍浠剁殑鍑芥暟鍖呰鍦╱seCallback涓細constclick=useCallback(()=>{console.log('鎴戞槸鐐瑰嚮鍑芥暟')},[n])useCallback璇硶锛氭帴鍙楃涓€涓弬鏁版槸鍑芥暟鎺ュ彈鐨勭浜屼釜鍙傛暟鏄竴涓暟缁勶紝琛ㄧず渚濊禆鍏崇郴锛氬鏋滄暟缁勪腑鏈夊€硷紝鍒欒〃绀哄彧鏈夊綋渚濊禆鍏崇郴鍙戠敓鍙樺寲鏃讹紝杩斿洖鐨勫嚱鏁版墠浼氶噸鏂版寚鍚戝弬鏁板嚱鏁扮殑鏂板湴鍧€.濡傛灉鏄┖鏁扮粍锛屼細娉ㄦ剰鍒板彧鏈夌涓€娆℃覆鏌撶粍浠舵椂锛屾墠浼氫负杩斿洖鍑芥暟鍒涘缓寮曠敤銆傚湪鍏朵粬鎯呭喌涓嬶紝鐐瑰嚮鐨勫湴鍧€涓嶄細鏀瑰彉銆傚鏋滀笉閫氳繃锛屽垯琛ㄧず鍙缁勪欢娓叉煋涓€娆★紝灏变細鍒涘缓涓€娆＄偣鍑伙紝鍏跺紩鐢ㄥ湴鍧€涔熶細鏇存柊涓€娆°€傝繑鍥炰竴涓嚱鏁帮紝鍙互鐪嬩綔鏄鍙傛暟鍑芥暟鐨勭紦瀛橈紝涓庡弬鏁板嚱鏁板叿鏈夌浉鍚岀殑鍔熻兘銆傛€荤粨锛氳鍑芥暟鏄负浜嗙‘淇濆彧鏈夊綋渚濊禆鍏崇郴鍙戠敓鍙樺寲鏃讹紝杩斿洖鐨勫嚱鏁版墠浼氱敤鏂扮殑鍦板潃閲嶆柊鍒涘缓銆傚湪涓婇潰鐨勪緥瀛愪腑锛岀粨鏋滄槸褰撴垜鐐瑰嚮鐖剁粍浠剁殑value+1鏃讹紝瀛愮粍浠舵病鏈夐噸鏂版覆鏌撱€傚洜涓篶lick鍑芥暟渚濊禆鐨刵娌℃湁鍙橈紝鎵€浠ュ嵆浣垮畠鎵€鍦ㄧ殑鐖剁粍浠堕噸鏂版覆鏌擄紝click鍑芥暟鍦ㄥ唴瀛樹腑鐨勫湴鍧€杩樻槸涓婃缂撳瓨鐨勭粨鏋滐紝鑰宑lick鐨刾ropnclick瀛愮粍浠舵病鏈夋敼鍙橈紝瀹冨寘瑁呬簡React.memo锛屾墍浠ュ瓙缁勪欢涓嶄細娓叉煋銆傜壒鐐箄seCallback鐨勫弬鏁板嚱鏁板湪鍐呴儴鏋勬垚涓€涓棴鍖呫€傚鏋滆繖涓嚱鏁颁娇鐢ㄤ簡瀹冪殑澶栭儴鍙橀噺锛岃€岃繖涓彉閲忔槸缁勪欢鐨勫唴閮ㄧ姸鎬侊紝閭ｄ箞鍑芥暟涓鍙栫殑鍙橀噺鍊兼湁鏃朵細涓嶄細闅忔椂鏇存柊銆俥xportdefaultfunctionFather(){console.log("鐖剁粍浠堕噸鏂版覆鏌?);const[n,setN]=useState(0);constclick=useCallback(()=>{璇诲叆console.log('useCallbackn:',n)},[])return(
鐖剁粍浠跺唴閮ㄧ姸鎬乶:{n}
{setN(n+1);}}>鐖剁粍浠秐+1
);}functionChild(props){console.log('瀛愮粍浠堕噸鏂版覆鏌?)const{n,click}=propsreturn(
)}exportdefaultReact.memo(Child)鐖剁粍浠跺唴閮ㄧ姸鎬乶,涓€涓寜閽畁+1,n+1鐐瑰嚮鍚庯紱杩樻湁涓€涓敤useCallback缂撳瓨鐨刢lick鍑芥暟锛屼綔涓簆rop浼犻€掔粰Child锛屽綋click鍑芥暟琚皟鐢ㄦ椂锛屼細鎵撳嵃n鐨勫€硷紝娌℃湁渚濊禆銆傚瓙缁勪欢鏈変竴涓寜閽紝鐐瑰嚮鏃惰皟鐢ㄧ埗缁勪欢鐨勭偣鍑诲嚱鏁般€傛垜浠厛鍦ㄧ埗缁勪欢涓偣鍑籲+1鍑犳锛岀埗缁勪欢鐨勫唴閮ㄧ姸鎬乶纭疄浠巙i鏀瑰彉浜嗐€傜劧鍚庣偣鍑诲瓙缁勪欢鐨勬寜閽墦鍗皀鐨勫€硷細usecallback涓鍙栫殑n杩樻槸鍒濆鍊?锛侀偅鏄洜涓篶lick鐨勭浜屼釜鍙傛暟鏄竴涓病鏈変緷璧栧叧绯荤殑绌烘暟缁勩€傚洜姝わ紝瀹冨彧浼氬湪缁勪欢绗竴娆℃覆鏌撴椂琚紩鐢紝骞朵笌缁勪欢涓婁笅鏂囥€佷綔鐢ㄥ煙绛夌浉鍏宠仈锛屽苟琚紦瀛樸€傛鏃秐鐨勫€间负0锛屾墍浠lick鍐呴儴浣滅敤鍩熷唴n鐨勫€兼案杩滀负0銆傚嵆浣垮悗闈鐨勫€煎彂鐢熷彉鍖栵紝鍥犱负click涓嶄細閲嶆柊鍏宠仈鍜屽紩鐢紝鎵€浠ヤ細涓€鐩翠娇鐢ㄧ紦瀛橈紝鎵€浠ヨ皟鐢╟lick鏃讹紝浼氭墦鍗皀鐨勫€硷紝鎵撳嵃鐨勫€兼案杩滄槸鍒濆鐨勪环鍊笺€俢onstclick=useCallback(()=>{console.log('nreadinuseCallback:',n)},[n])鍋氫竴涓皬淇敼锛氳click渚濊禆浜巒銆傛晥鏋滄槸姣忔n鍙樺寲鏃讹紝click閮戒細琚噸瀹氬悜鍒版柊鐨勫唴閮ㄥ嚱鏁扮殑鍦板潃锛屽畠鐨勫唴閮ㄤ綔鐢ㄥ煙涔熶細鏇存柊锛屾墍浣跨敤鐨勫彉閲弉鐨勫€间細涓庡彉鍖栧悗鐨刵鍚屾銆傛墍浠ヨ皟鐢╟lick鍑芥暟锛屾墦鍗扮殑n濮嬬粓淇濇寔鏂板€笺€傚洜姝わ紝鍦ㄤ娇鐢╱seCallback鏃讹紝蹇呴』灏嗗嚱鏁颁腑浣跨敤鐨剆tate浣滀负渚濊禆浼犲叆锛屽惁鍒欏皢鑾峰彇涓嶅埌鏂扮殑state銆?銆乽seMemouseCallback缂撳瓨浜嗗嚱鏁帮紝useMemo缂撳瓨浜嗗嚱鏁扮殑杩斿洖鍊笺€傞€氬父鐢ㄤ簬浼樺寲澶嶆潅鐨勮绠楅€昏緫銆備緥濡傦紝涓€涓嚱鏁拌繑鍥炰竴涓€笺€傞€氳繃浣跨敤useMemo锛屽彧鏈夊綋杩欎釜鍑芥暟鐨勪緷璧栧彂鐢熷彉鍖栨椂锛岃繖涓嚱鏁版墠浼氳鍐嶆璋冪敤锛屽緱鍒颁竴涓柊鐨勭粨鏋滃€笺€傚鏋滀緷璧栧叧绯绘病鏈夋敼鍙橈紝鍑芥暟灏嗕笉浼氳璋冪敤锛屼娇鐢ㄦ渶鍚庣紦瀛樼殑鍊笺€傜被浼间簬Vue涓殑璁＄畻灞炴€onstsum=useMemo(()=>{letsum=0for(leti=0;i
