例如,我有这个超级简单的“标题”组件,基本上只是一个美化的< h1&gt ;： 从’react’导入React；

class Heading extends React.Component {

    render () {

        const style = {
            'color' : 'red' 
        };

        return (
            <h1 className='heading' style={style}>
                {this.props.title}
            </h1>
        );
    }
}

export default Heading;

这在DOM中呈现为如下所示：

<h1 class="heading" style="color: red;">Heading</h1>

太好了,看起来不错.如果我在页面上有一堆这些组件,它将看起来像这样：

<h1 class="heading" style="color: red;">Heading</h1>
<h1 class="heading" style="color: red;">Heading</h1>
<h1 class="heading" style="color: red;">Heading</h1>
<h1 class="heading" style="color: red;">Heading</h1>

注意样式属性是如何在那一遍重复的吗？所以这是我的问题,这是一件坏事吗？有关系吗？据我所知,这根本不是一件坏事,因为您没有下载从服务器预渲染的html页面.因此,所有这些重复的样式都无法计算出更大的文件大小.

如果这是真的…那为什么不使用内联样式？

免责声明：我知道*对于这样的问题有点“封闭”.如果您很生气,我在这里问了这个(我想是谁！？),请把我指向一个我可以在其中找到的网站和社区：)

解决方法:

内联样式不一定是不好的(是的,有些纯粹主义者会不同意).我确实相信有些内联是有意义的.如果您要生成一次性的概念证明,那就去做吧.如果必须在昨天完成,而您下周有重构时间,则可能可以.

您所拥有的东西可以正常工作,并且在查看HTML(React代码中的HTML)时,您会看到要进行的视觉更改.

在确定对与错时,我尝试看的是长期影响.如果有人希望这种红色在几年后发生变化,会发生什么.那个地方的开发人员会首先考虑CSS,而不是代码.

我不会内联样式,而是依靠适当的分类,以便我可以通过修改CSS文件来调整视觉样式,而不是深入研究并重新编译代码.还请记住,内联样式更难在CSS代码中(从外部文件中)覆盖.