useMemo 和 useCallback用途一直,不同在:
- useMemo用于变量 ,前提:不是useState的变量,并且这个变量是 引用类型
- useCallback用于函数
问题:即使用了memo ,子组件还是重新渲染了
父组件:
function App() {
const [count, setCount] = useState(0);
const [text] = useState('我是')
const obj = {des:text+'工程师'}
return (
<div className="container">
parent:
<button onClick={() => {setCount(count + 1)}}>count++</button>
<span>count:{count}</span>
<Child obj={obj} />
</div>
);
}
子组件:
const Child = memo(({ obj }) => {
console.log("子组件渲染了");
return <div>child: {obj.des}</div>;
});
这个时候就可以用useMemo来解决了
const obj = useMemo(()=>{
return {des:text+'工程师'}
},[text])
只有当text变化,子组件才会重新渲染