这些在 React 中使用三元运算符有条件地应用内联样式的方法在性能上是不是有任何差异？

Posted 2023-03-16

【中文标题】这些在 React 中使用三元运算符有条件地应用内联样式的方法在性能上是不是有任何差异？

【英文标题】：Is there any difference in performance between these ways of conditionally applying an inline style in React using a ternary operator?这些在 React 中使用三元运算符有条件地应用内联样式的方法在性能上是否有任何差异？

【发布时间】：2021-01-24 20:14:45

【问题描述】：

我想知道最好的方法是不将样式应用为内联样式的三元运算符中的结果之一，特别是传递 undefined 或 是否更好，如下所示：

<div style=shouldApplyStyle ? background: 'black' : undefined />

或

<div style=shouldApplyStyle ? background: 'black' : />

我知道一般来说这两个功能相同，但我想知道传递一个空对象是否会导致不必要的重新渲染，因为在 javascript != 中，它会将样式属性解释为每次都更改。

在对此答案的评论中指出这是一种可能性：https://***.com/a/58339902/4440124

除了知道传递一个空的 prop 是否会导致额外的重新渲染之外，我还想知道使用其中一个是否有任何其他性能影响或危险。谢谢！

【问题讨论】：

100% 同意@EmileBergeron，但即使您确定此特定组件是性能瓶颈，您最好还是使用useMemo。但更有可能的情况是，这是一个不值得担心的微优化。

@EmileBergeron 我问了一个类似的问题，但它被关闭了，因为标题是固执己见的，所以我做了一个新的。同样，您的评论无关紧要且无济于事。这个问题与您何时应该优化应用程序无关。我不是在优化应用程序，我问这个问题主要是出于好奇。如果我正在优化一个应用程序，如果我已经进行了分析，我需要知道我是否应该进行这种优化。最后，对于像这样的小东西，最好是第一次就以优化的方式去做，而不是等到问题出现后再去寻找它。

@LionelRowe 这不是一个关于优化和避免瓶颈的实际问题。这是一个纯粹的学术问题（因为没有更好的术语）。但是，如果 每次都被解释为已更改，则 useMemo() 将不起作用。由于 style 属性是有条件的，您必须告诉 useMemo() 检查 style 属性，并且由于 != 它每次都会重新渲染。如果组件在每次渲染时都执行密集操作，这实际上可能会导致性能问题，因为它不会经常重新渲染。

很公平。我猜useMemo 如果值经常变化但经常变回相同的先前值，可能还不够。在这种情况下，另一种选择是将诸如 之类的值分配给常量。 div style=shouldApplyStyle ? OBJECT_WITH_STYLES : EMPTY_OBJECT.

【参考方案1】：

你是对的，传递一个新的 样式会导致重新渲染，特别是如果它是一个组件。我个人使用undefined。 undefined === undefined