React.memo 不适用于功能组件答案

【问题标题】：React.memo not working on a functional componentReact.memo 不适用于功能组件
【发布时间】：2021-12-09 16:25:48
【问题描述】：

我尝试使用 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 新手，一直在探索/创建更广泛的项目。任何想法为什么它会继续重新渲染？谢谢！

【问题讨论】：

请注意，在 react 中重新渲染并不意味着 DOM 正在发生变化。
当一个组件的父组件重新渲染时，它必然会重新渲染它的所有子组件，这样它就可以计算出发生了什么变化并需要提交给 DOM。您将控制台日志记录为无意的副作用，因此它不能准确衡量 Transactions 组件何时实际上重新呈现到 DOM。
When a component's parent component rerenders it necessarily rerenders all its children @DrewReese 这是默认行为，但他们使用 React.memo 试图阻止这种行为。这就是他们的问题所在。
@NicholasTower React 在需要协调差异时在“渲染阶段”调用组件上的“渲染”......正如 Evolutionxbox 所说，这与渲染/重新渲染到DOM 是我们在“提交阶段”看到的情况，通常会考虑正在渲染的组件。
来自react docs：“此方法仅作为性能优化存在。不要依赖它来“阻止”渲染，因为这可能会导致错误。”

标签： javascript reactjs react-memo

【解决方案1】：

我尝试删除 ScholarHistory 组件上的 setModal 属性，并且能够阻止重新渲染。

我不确定是什么原因造成的，因为除了作为 父组件 - ScholarHistory 的道具之外，它与子组件没有任何关系。

【讨论】：

当您移除 setModal 时，您不再更改父级的状态，这不会触发重新渲染。