React.memo不工作于功能组件

Question

我尝试使用React.memo()来防止在我的一个组件上重新呈现，但是每当它的父组件发生更改时，它就会继续重新呈现。

下面是带有React.memo()的子组件

const Transactions = React.memo(() => {
  console.log('rerender')

  return (
    <></>
  )
})

这就是它的名字所在。每当我单击Add按钮，它就调用状态函数setModal(true)，事务组件将被重新呈现为。

const ScholarHistory = ({setModal}) => {
  return (
    <div className="pml-scholar pml-scholar--column">
      <div className="pml-scholar-container">
        <button onClick={() => setModal(true)} className="pml-scholar-add-button"> Add </button>
      </div>

    <Transactions />
    </div>
  )
}

我是新的反应和探索/创造更广泛的项目。你知道为什么它一直在重新渲染吗？谢谢!

Answer 1

我试图移除setModal组件上的道具，并且能够阻止重呈现。

我不知道是什么原因造成的，因为它与子组件没有任何关系，而只是作为父组件- ScholarHistory的支柱。

Answer 2

把它放在这里给仍然有同样问题的人来晚一点。

我认为原因是setModal支柱以某种方式删除了整个父组件，因此也删除了缓存的Transactions组件，从而导致了重登。

如果您只是更改父组件的支柱(即更改它的状态)而没有从虚拟DOM树中删除它，那么子组件将不会被重命名。