React.memo 没有在功能组件上工作

Question

我尝试使用 React.memo() 来防止在我的一个组件上重新渲染，但只要其 父组件.

这是我的带有 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 的新手，参与过 exploring/creating 更广泛的项目。任何想法为什么它继续重新渲染？谢谢！

Answer 1

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

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

React.memo 没有在功能组件上工作

React.memo not working on a functional component

javascript

reactjs

react-memo