只用 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回答

双越

2021-06-06

是的。如果你不想每次组件更新(都会重新执行函数)都重新生成数据,那就用 useMemo

0
1
起点丶
非常感谢!
2021-06-06
共1条回复

2024版 前端框架及项目面试 聚焦Vue3/React/Webpack

面向1-3年前端的框架及项目面试“刚需内容”

4663 学习 · 1644 问题

查看课程