react.memo() 浅比较简单对象返回false

#1

请教一个问题，父组件传递一个简单对象 {a: 1} 给 Count 子组件，子组件使用 React.memo，点击 click 父组件更新时，子组件为什么还会重新渲染呢？（React.memo的浅比较不是会比较一层吗，两次的 {a: 1} 虽然指针不同，但浅比较应该返回 true）

import React, { useState, useEffect } from 'react'

const Count = React.memo(props => {
  const { prop } = props

  useEffect(() => {
    console.log('count render')
  })

  return <p>this is count component</p>
})

function App() {
  const [value, setValue] = useState(1)
  const obj = { a: 1 }

  return (
    <div>
      <p>value: {value}</p>
      <p onClick={() => { setValue(value + 1) }}>click</p>
      <Count prop={obj} />
    </div>
  )
}

export default App
#2

<Count prop={{a: 1}} /> 这个不浅啊
<Count a={obj.a} /> 或者 <Count {...obj} /> 这种类型的才算是浅的
深比较你可以写成

const Count = React.memo(props=> {
  ....
}, (props0, props1)=> props0.prop.a === props1.prop.a )
#3

也就是 Reat.memo 默认浅比较的是 props 这个属性，而不是 props.prop 属性，是这样吧～

#4

嗯(至少要输入6个字)