// 子组件 const ChildComp = () => { console.log('ChildComp...'); return (<div>ChildComp...</div>); }; // 父组件 const Parent = () => { const [count, setCount] = useState(0); return ( <div className="App"> <div>hello world {count}</div> <div onClick={() => { setCount(count => count + 1); }}>点击增加</div> <ChildComp/> </div> ); }; export default Parent;
改造：我们可以利用 memo 包一层，就能办理上面的问题；可是仅仅办理父组件没有传参给子组件的环境以及父组件传简朴范例的参数给子组件的环境（譬喻 string、number、boolean等）；假如有传巨大属性应该利用 useCallback（回调事件）可能 useMemo（巨大属性）
// 子组件 const ChildComp = () => { console.log('ChildComp...'); return (<div>ChildComp...</div>); }; const MemoChildComp = memo(ChildComp);
六、useMemo假设以下场景，父组件在挪用子组件时通报 info 工具属性，点击父组件按钮时，发明节制台会打印出子组件被渲染的信息。
import React, { memo, useState } from 'react'; // 子组件 const ChildComp = (info:{info:{name: string, age: number}}) => { console.log('ChildComp...'); return (<div>ChildComp...</div>); }; const MemoChildComp = memo(ChildComp); // 父组件 const Parent = () => { const [count, setCount] = useState(0); const [name] = useState('jack'); const [age] = useState(11); const info = { name, age }; return ( <div className="App"> <div>hello world {count}</div> <div onClick={() => { setCount(count => count + 1); }}>点击增加</div> <MemoChildComp info={info}/> </div> ); }; export default Parent;
阐明原因：
点击父组件按钮，触发父组件从头渲染；
父组件渲染，const info = { name, age } 一行会从头生成一个新工具，导致通报给子组件的 info 属性值变革，进而导致子组件从头渲染。
办理：
利用 useMemo 将工具属性包一层，useMemo 有两个参数：
第一个参数是个函数，返回的工具指向同一个引用，不会建设新工具；
第二个参数是个数组，只有数组中的变量改变时，第一个参数的函数才会返回一个新的工具。
import React, { memo, useMemo, useState } from 'react'; // 子组件 const ChildComp = (info:{info:{name: string, age: number}}) => { console.log('ChildComp...'); return (<div>ChildComp...</div>); }; const MemoChildComp = memo(ChildComp); // 父组件 const Parent = () => { const [count, setCount] = useState(0); const [name] = useState('jack'); const [age] = useState(11); // 利用 useMemo 将工具属性包一层 const info = useMemo(() => ({ name, age }), [name, age]); return ( <div className="App"> <div>hello world {count}</div> <div onClick={() => { setCount(count => count + 1); }}>点击增加</div> <MemoChildComp info={info}/> </div> ); }; export default Parent;
七 、useCallback接着第六章节的例子，假设需要将事件传给子组件，如下所示，当点击父组件按钮时，发明节制台会打印出子组件被渲染的信息，说明子组件又被从头渲染了。
import React, { memo, useMemo, useState } from 'react'; // 子组件 const ChildComp = (props:any) => { console.log('ChildComp...'); return (<div>ChildComp...</div>); }; const MemoChildComp = memo(ChildComp); // 父组件 const Parent = () => { const [count, setCount] = useState(0); const [name] = useState('jack'); const [age] = useState(11); const info = useMemo(() => ({ name, age }), [name, age]); const changeName = () => { console.log('输着名称...'); }; return ( <div className="App"> <div>hello world {count}</div> <div onClick={() => { setCount(count => count + 1); }}>点击增加</div> <MemoChildComp info={info} changeName={changeName}/> </div> ); }; export default Parent;
阐明下原因：
点击父组件按钮，改变了父组件中 count 变量值（父组件的 state 值），进而导致父组件从头渲染；
父组件从头渲染时，会从头建设 changeName 函数，即传给子组件的 changeName 属性产生了变革，导致子组件渲染；
办理：
修改父组件的 changeName 要领，用 useCallback 钩子函数包裹一层， useCallback 参数与 useMemo 雷同