这些使用三元运算符在 React 中有条件地应用内联样式的方法在性能上有什么不同吗?
Is there any difference in performance between these ways of conditionally applying an inline style in React using a ternary operator?
我想知道最好的方法是不将样式应用为内联样式的三元运算符的结果之一,特别是传递未定义或 {} 是否更好,如:
<div style={shouldApplyStyle ? {background: 'black'} : undefined />
或
<div style={shouldApplyStyle ? {background: 'black'} : {}/>
我知道一般来说这两个功能相同,但我想知道传递一个空对象是否会导致不必要的重新渲染,因为在 javascript {} != {}
中它会解释样式道具每次都变了。
在对此答案的评论中指出了这种可能性:
除了知道传递一个空的 prop 是否会导致额外的重新渲染之外,我还想知道使用一个而不是另一个是否有任何其他性能影响或危险。谢谢!
你是对的,传递新的 {}
样式会导致 re-render,尤其是当它是一个组件时。我个人使用undefined
。 undefined === undefined
我想知道最好的方法是不将样式应用为内联样式的三元运算符的结果之一,特别是传递未定义或 {} 是否更好,如:
<div style={shouldApplyStyle ? {background: 'black'} : undefined />
或
<div style={shouldApplyStyle ? {background: 'black'} : {}/>
我知道一般来说这两个功能相同,但我想知道传递一个空对象是否会导致不必要的重新渲染,因为在 javascript {} != {}
中它会解释样式道具每次都变了。
在对此答案的评论中指出了这种可能性:
除了知道传递一个空的 prop 是否会导致额外的重新渲染之外,我还想知道使用一个而不是另一个是否有任何其他性能影响或危险。谢谢!
你是对的,传递新的 {}
样式会导致 re-render,尤其是当它是一个组件时。我个人使用undefined
。 undefined === undefined