只用 memo 不用 useMemo
来源:14-8 使用useMemo做性能优化
起点丶
2021-06-06
自己试了一下,发现只用 memo
不用 useMemo
也是可以的,useMemo 只是起到缓存数据的作用
- 如果只对 子组件 使用
memo
包裹的话,会对子组件所有的props
,进行浅比较,如果没有变化,则不会更新子组件 - 以下代码,点击 count 按钮计数,child 组件 不会更新,只输出 ‘parent rending’
//子组件
const Child = memo(function Child(props) {
console.log('child rending')
return (
<div>
<h2>
这是 child {props.name}
</h2>
</div>
)
})
//父组件
function MemoDemo() {
console.log('parent rending')
const [count, setCount] = useState(0)
const [name, SetName] = useState('rym')
return (
<div>
<h1>{count}</h1>
<button
onClick={() => {
setCount(count + 1)
}}>
count
</button>
<Child name={name} />
<button
onClick={() => {
SetName('rym-update')
}}>
update name
</button>
</div>
)
}
- 测了半天,发现了一现象:如果
props
传入对象的话,就像老师课程中的例子,const userInfo = { name, age: 20 }
,那只用 memo 不管对象里边的属性有没有变化,都会触发更新子组件,因为 userInfo 引用类型,被memo
判断为前后不相等,就会触发更新 - 当传入的
props
是引用类型的时候,需要使用useMemo
,否则memo
会失效 - 感觉
useMemo
只是缓存数据以及memo
的一个‘补丁’,而真正做优化的还是memo
- 不知道以上我的理解是否正确?还请老师指正
写回答
1回答
-
是的。如果你不想每次组件更新(都会重新执行函数)都重新生成数据,那就用 useMemo
012021-06-06
相似问题