Question

例如，我有一个超级简单的'Heading'组件，它基本上只是一个美化的<h1>：

导入来自＆＃39;反应＆＃39 ;;

的反应

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>

注意style属性是如何重复的？所以这是我的问题，这是件坏事吗？有关系吗？从我可以说的是，它根本不是一件坏事，因为你没有下载从服务器预渲染的这个html页面。因此，所有重复的样式都不能计算到更大的文件大小。

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

免责声明：我理解stackoverflow有点＆＃34;已关闭＆＃34;对这样的问题。如果你非常冒犯我在这里问过这个问题（我认为我是谁？？）请指点我到一个网站和社区，我可以：）

Answer 1

内联风格并不一定是坏的（是的，有些纯粹主义者不同意）。我确实认为有一些内联是有道理的。如果您正在生成一次性概念证明，那就去做吧。如果必须在昨天完成并且你下周有重构时间，它可能会有效。

您所使用的内容以及查看HTML（在React代码中）时，您会看到您尝试进行的视觉更改。

我在确定对与错时所考虑的是长期影响。如果有人希望这种颜色在未来几年内发生变化，会发生什么。那个地方的开发人员会首先考虑CSS，而不是代码。

我不会内联样式，而是依赖于正确的分类，以便我可以通过修改CSS文件来调整视觉样式，而不是深入研究和重新编译代码。还要记住，内联样式在CSS代码中很难覆盖（来自外部文件）。

反应内联样式，这是一件坏事吗？

1 个答案: