是否应该对在其 props 中带有“children”的 HOC 组件进行 momoized答案

【问题标题】：Should a HOC component with "children" in its props be momoized是否应该对在其 props 中带有“children”的 HOC 组件进行 momoized
【发布时间】：2019-11-20 03:51:43
【问题描述】：

具体来说，一个功能组件应该接受一个“孩子”道具，并将这个“孩子”作为其返回对象的一部分。目的是减少额外的重新渲染以提高性能，通常在所有正常用例中，特别是，据说这个“孩子”是一个包含许多级别嵌套组件的组件。

主要组件（HOC）：

export const HOC = memo((props) => {
    return (
        <div>{props.children}</div>
    )
})

孩子可能是：

export const Child = ((props) => {
     const [a, setA] = useState()

     return (
         <div>
             <B><C/></B>
         </div>
     )
})

一个用例可能是：

     <HOC>
          <Child/>
     </HOC>

假设在此示例中，两种一般情况是： setA() 被调用，这导致子元素的重新渲染，并被重新渲染。

话虽如此，我应该在任何这些情况下使用“备忘录”，还是在任何情况下一般都使用“备忘录”？

【问题讨论】：

标签： reactjs higher-order-components

【解决方案1】：

使用memo或不使用它的决定必须谨慎而不是盲目。您必须意识到，每当您使用备忘录时，您实际上是在要求做出反应以始终计算道具之间的差异，如果您的情况经常导致道具发生变化，那么使用备忘录将是一种开销，并且会降低性能，因为比较几乎总是会导致重新渲染。

在您的情况下，HOC 实际上不是一个高阶组件，而是一个普通的功能组件，并且由于没有将任何道具传递给作为子级传递的 B 和 C，因此您可以使用 memo考虑到您的子组件经常呈现

【讨论】：