javascript - React.memo 不适用于功能组件

Question

我尝试使用React.memo()来防止在我的一个组件上重新渲染，但只要其Parent Component发生更改，它就会继续重新渲染。

这是我的带有 React.memo() 的子组件

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

  return (
    <></>
  )
})

这是它被调用的地方。每当我单击Add按钮时，它都会调用状态函数 setModal(true)，Transactions 组件正在重新渲染

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>
  )
}

我是 React 新手，一直在探索/创建更广泛的项目。任何想法为什么它会继续重新渲染？谢谢！

Answer 1

我试图删除ScholarHistory 组件上的setModal道具，并且能够防止重新渲染。

我不确定是什么原因导致它，因为它与子组件完全没有关系，除了作为父组件的道具 - ScholarHistory。