请稍等 ...

只用 memo 不用 useMemo

自己试了一下，发现只用 `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
不知道以上我的理解是否正确？还请老师指正