React.jS中的内联所有样式的性能问题？
[英]Performance issue for inline ALL styles in React.jS?
问题描述
For example, I have a ES6 Harmony JSX snippet like this: 
例如，我有一个ES6 Harmony JSX片段，如下所示：
export class Curve extends Component {
render() {
return (
<svg xmlns="http://www.w3.org/2000/svg" width={216} height={232}
viewBox="0 0 216 232">
<defs>
<pattern id="a" width={34} height={34} patternUnits="userSpaceOnUse"
viewBox="0 0 34 34">
<rect width={34} height={34} style={{fill: 'none'}}/>
<line x1="10.55" y1="-177.3" x2="-174.05" y2="7.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="27.55" y1="-177.3" x2="-157.05" y2="7.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="44.55" y1="-177.3" x2="-140.05" y2="7.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="61.55" y1="-177.3" x2="-123.05" y2="7.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="78.55" y1="-177.3" x2="-106.05" y2="7.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="95.55" y1="-177.3" x2="-89.05" y2="7.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="112.55" y1="-177.3" x2="-72.05" y2="7.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="129.55" y1="-177.3" x2="-55.05" y2="7.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="146.55" y1="-177.3" x2="-38.05" y2="7.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="163.55" y1="-177.3" x2="-21.05" y2="7.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="180.55" y1="-177.3" x2="-4.05" y2="7.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="197.55" y1="-177.3" x2="12.95" y2="7.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="214.55" y1="-177.3" x2="29.95" y2="7.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="2.05" y1="-160.3" x2="-182.55" y2="24.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="19.05" y1="-160.3" x2="-165.55" y2="24.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="36.05" y1="-160.3" x2="-148.55" y2="24.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="53.05" y1="-160.3" x2="-131.55" y2="24.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="70.05" y1="-160.3" x2="-114.55" y2="24.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="87.05" y1="-160.3" x2="-97.55" y2="24.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="104.05" y1="-160.3" x2="-80.55" y2="24.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="121.05" y1="-160.3" x2="-63.55" y2="24.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="138.05" y1="-160.3" x2="-46.55" y2="24.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="155.05" y1="-160.3" x2="-29.55" y2="24.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="172.05" y1="-160.3" x2="-12.55" y2="24.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="189.05" y1="-160.3" x2="4.45" y2="24.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="206.05" y1="-160.3" x2="21.45" y2="24.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="10.55" y1="-143.3" x2="-174.05" y2="41.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="27.55" y1="-143.3" x2="-157.05" y2="41.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="44.55" y1="-143.3" x2="-140.05" y2="41.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="61.55" y1="-143.3" x2="-123.05" y2="41.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="78.55" y1="-143.3" x2="-106.05" y2="41.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="95.55" y1="-143.3" x2="-89.05" y2="41.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="112.55" y1="-143.3" x2="-72.05" y2="41.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="129.55" y1="-143.3" x2="-55.05" y2="41.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="146.55" y1="-143.3" x2="-38.05" y2="41.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="163.55" y1="-143.3" x2="-21.05" y2="41.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="180.55" y1="-143.3" x2="-4.05" y2="41.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="197.55" y1="-143.3" x2="12.95" y2="41.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="214.55" y1="-143.3" x2="29.95" y2="41.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="2.05" y1="-126.3" x2="-182.55" y2="58.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="19.05" y1="-126.3" x2="-165.55" y2="58.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="36.05" y1="-126.3" x2="-148.55" y2="58.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="53.05" y1="-126.3" x2="-131.55" y2="58.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="70.05" y1="-126.3" x2="-114.55" y2="58.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="87.05" y1="-126.3" x2="-97.55" y2="58.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="104.05" y1="-126.3" x2="-80.55" y2="58.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="121.05" y1="-126.3" x2="-63.55" y2="58.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="138.05" y1="-126.3" x2="-46.55" y2="58.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="155.05" y1="-126.3" x2="-29.55" y2="58.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="172.05" y1="-126.3" x2="-12.55" y2="58.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="189.05" y1="-126.3" x2="4.45" y2="58.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="206.05" y1="-126.3" x2="21.45" y2="58.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="10.55" y1="-109.3" x2="-174.05" y2="75.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="27.55" y1="-109.3" x2="-157.05" y2="75.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="44.55" y1="-109.3" x2="-140.05" y2="75.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="61.55" y1="-109.3" x2="-123.05" y2="75.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="78.55" y1="-109.3" x2="-106.05" y2="75.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="95.55" y1="-109.3" x2="-89.05" y2="75.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="112.55" y1="-109.3" x2="-72.05" y2="75.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="129.55" y1="-109.3" x2="-55.05" y2="75.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="146.55" y1="-109.3" x2="-38.05" y2="75.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="163.55" y1="-109.3" x2="-21.05" y2="75.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="180.55" y1="-109.3" x2="-4.05" y2="75.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="197.55" y1="-109.3" x2="12.95" y2="75.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="214.55" y1="-109.3" x2="29.95" y2="75.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="2.05" y1="-92.3" x2="-182.55" y2="92.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="19.05" y1="-92.3" x2="-165.55" y2="92.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="36.05" y1="-92.3" x2="-148.55" y2="92.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="53.05" y1="-92.3" x2="-131.55" y2="92.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="70.05" y1="-92.3" x2="-114.55" y2="92.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="87.05" y1="-92.3" x2="-97.55" y2="92.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="104.05" y1="-92.3" x2="-80.55" y2="92.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="121.05" y1="-92.3" x2="-63.55" y2="92.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="138.05" y1="-92.3" x2="-46.55" y2="92.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="155.05" y1="-92.3" x2="-29.55" y2="92.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="172.05" y1="-92.3" x2="-12.55" y2="92.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="189.05" y1="-92.3" x2="4.45" y2="92.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="206.05" y1="-92.3" x2="21.45" y2="92.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="10.55" y1="-75.3" x2="-174.05" y2="109.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="27.55" y1="-75.3" x2="-157.05" y2="109.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="44.55" y1="-75.3" x2="-140.05" y2="109.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="61.55" y1="-75.3" x2="-123.05" y2="109.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="78.55" y1="-75.3" x2="-106.05" y2="109.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="95.55" y1="-75.3" x2="-89.05" y2="109.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="112.55" y1="-75.3" x2="-72.05" y2="109.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="129.55" y1="-75.3" x2="-55.05" y2="109.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="146.55" y1="-75.3" x2="-38.05" y2="109.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="163.55" y1="-75.3" x2="-21.05" y2="109.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="180.55" y1="-75.3" x2="-4.05" y2="109.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="197.55" y1="-75.3" x2="12.95" y2="109.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="214.55" y1="-75.3" x2="29.95" y2="109.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="2.05" y1="-58.3" x2="-182.55" y2="126.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="19.05" y1="-58.3" x2="-165.55" y2="126.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="36.05" y1="-58.3" x2="-148.55" y2="126.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="53.05" y1="-58.3" x2="-131.55" y2="126.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="70.05" y1="-58.3" x2="-114.55" y2="126.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="87.05" y1="-58.3" x2="-97.55" y2="126.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="104.05" y1="-58.3" x2="-80.55" y2="126.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="121.05" y1="-58.3" x2="-63.55" y2="126.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="138.05" y1="-58.3" x2="-46.55" y2="126.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="155.05" y1="-58.3" x2="-29.55" y2="126.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="172.05" y1="-58.3" x2="-12.55" y2="126.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="189.05" y1="-58.3" x2="4.45" y2="126.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="206.05" y1="-58.3" x2="21.45" y2="126.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="10.55" y1="-41.3" x2="-174.05" y2="143.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="27.55" y1="-41.3" x2="-157.05" y2="143.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="44.55" y1="-41.3" x2="-140.05" y2="143.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="61.55" y1="-41.3" x2="-123.05" y2="143.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="78.55" y1="-41.3" x2="-106.05" y2="143.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="95.55" y1="-41.3" x2="-89.05" y2="143.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="112.55" y1="-41.3" x2="-72.05" y2="143.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
<line x1="129.55" y1="-41.3" x2="-55.05" y2="143.3"
style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
</pattern>
</defs>
<title>g-force</title>
<path d="M1324,1663a108,108,0,1,0,108,108V1663H1324Zm0,200a92,92,0,1,1,92-92A92,92,0,0,1,1324,1863Z"
transform="translate(-1216 -1647)" style={{fill: '#130726', opacity: '0.7'}}/>
<g>
<path d="M1346,1647h74a12,12,0,0,1,12,12v0a12,12,0,0,1-12,12h-74a0,0,0,0,1,0,0v-24a0,0,0,0,1,0,0Z"
transform="translate(1562 1671) rotate(-180)" style={{fill: '#100028'}}/>
<text transform="translate(144.51 18)"
style={{fontSize: 16, fill: '#fff', fontFamily: 'Whitney', fontWeight: 700}}>GFORCE</text>
</g>
<path
d="M1324,1679a92,92,0,1,0,92,92A92,92,0,0,0,1324,1679Zm0,160a68,68,0,1,1,68-68A68,68,0,0,1,1324,1839Z"
transform="translate(-1216 -1647)" style={{fill: '#130726', opacity: '0.5'}}/>
<circle cx={108} cy={124} r={68} style={{fill: '#130726', opacity: '0.7'}}/>
<g style={{opacity: '0.7'}}>
<path
d="M1324,1680a91,91,0,1,1-91,91,91.1,91.1,0,0,1,91-91m0-1a92,92,0,1,0,92,92,92,92,0,0,0-92-92h0Z"
transform="translate(-1216 -1647)" style={{fill: '#fff'}}/>
</g>
<g>
<rect x={32} y={116} width={16} height={16} rx={8} ry={8} style={{fill: '#100028'}}/>
<text transform="translate(34.97 127.9)"
style={{fontSize: 12, fill: '#fff', fontFamily: 'Tungsten'}}>0.5
</text>
</g>
<path
d="M1342.88,1721.48c27.35,10.43,49.32,53.09,41.85,72.68s-52.27,36.79-79.62,26.37A53,53,0,0,1,1342.88,1721.48Z"
transform="translate(-1216 -1647)"
style={{stroke: '#ffff0b', strokeMiterlimit: 10, fill: 'url(#a)'}}/>
<circle cx={108} cy={124} r={44} style={{fill: '#100028'}}/>
<circle cx={168} cy={150} r={6} style={{fill: '#ffff15'}}/>
<g>
<rect x={8} y={116} width={16} height={16} rx={8} ry={8} style={{fill: '#100028'}}/>
<text transform="translate(11.84 127.9)"
style={{fontSize: 12, fill: '#fff', fontFamily: 'Tungsten'}}>1.0
</text>
</g>
<g>
<path d="M1311,1761.66h-2.22v-1.38H1311V1758h1.44v2.28h2.22v1.38h-2.22v2.28H1311v-2.28Z"
transform="translate(-1216 -1647)" style={{fill: '#fff'}}/>
<text transform="translate(101.55 119.93)"
style={{fontSize: 28, fill: '#fff', fontFamily: 'Tungsten'}}>0
.
46
</text>
<text transform="translate(79 119.93)"
style={{fontSize: 18, fill: '#ffff15', fontFamily: 'Tungsten'}}>X
</text>
<text transform="translate(79 147)" style={{fontSize: 18, fill: '#ffff15', fontFamily: 'Tungsten'}}>
Y
</text>
<text transform="translate(101.55 147.4)"
style={{fontSize: 28, fill: '#fff', fontFamily: 'Tungsten'}}>0.68
</text>
<rect x="92.74" y="118.55" width="5.87" height="1.38" style={{fill: '#5a5368'}}/>
<path d="M1311,1789.12h-2.22v-1.38H1311v-2.28h1.44v2.28h2.22v1.38h-2.22v2.28H1311v-2.28Z"
transform="translate(-1216 -1647)" style={{fill: '#fff'}}/>
<rect x="92.74" y="146.02" width="5.87" height="1.38" style={{fill: '#5a5368'}}/>
</g>
</svg>
)
}
}
As can be seen, A LOT of JSX inline style is used. 可以看出，使用了许多JSX内联样式。 And the compiling stage is quite slow using Webpack. 而且使用Webpack的编译阶段相当慢。 Apart from compiling, I was just wondering whether there will be a big overhead for rendering if I use JSX inline style everywhere. 除了编译之外，我只是想知道如果我在所有地方都使用JSX内联样式是否会产生很大的渲染开销。
Does anyone have ideas about this? 有人对此有想法吗？ Thanks! 谢谢！
1 个解决方案
解决方案1
0 已采纳 2015-12-23 03:00:19
On some UI blocks inlining CSS is considered good. 在某些UI块上，内联CSS被认为是很好的。 Usually called critical CSS, can increase the perceived performance of your app. 通常称为关键CSS，可以提高您的应用感知性能。
Inlining all CSS is not that good of an idea. 内联所有 CSS并不是一个好主意。 You're potentially sending lots of duplicate data. 您可能会发送大量重复数据。 And you'll be unable to make use of caching those resources/data. 而且您将无法利用对那些资源/数据进行缓存。
Duplicate data in HTML is mostly negated by g-zipping, and if you're caching the entire html-page itself, can negate the problem of not caching the CSS seperately a bit. HTML中的重复数据大多被g-zip否定了，如果您要缓存整个html页面本身，则可以消除不单独缓存CSS的问题。 But not entirely, CSS will be re-downloaded on every page. 但并非完全如此，CSS将在每个页面上重新下载。
Why use so many inline styles anyway? 为什么要使用这么多的内联样式？ It seems like you could just create about 4 css classes and apply them as className to the elements? 看来您仅可以创建大约4个CSS类并将它们作为className应用于元素？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Radium for React.js内联样式意外的令牌错误？ - Radium for React.js inline-styles unexpected token error?
在react.js中使用内联样式的CSS伪类 - CSS Pseudo-classes with inline styles in react.js
React.js：如何使内联样式自动更新状态更改的进度条 - React.js: how to make inline styles automatically update progress bar on state change
如何使用内联样式在滚动时使用 transform: rotate() 和 react.js - How to use inline styles to use transform: rotate() with react.js on scroll
React.js输入性能 - React.js input performance
如何使用React.js制定样式 - How to enact styles with React.js
React.js 和 JSON：动态样式？ - React.js and JSON: Dynamic Styles?
react.js 中的道具问题 - Issue with props in react.js
React.js国家问题 - React.js State Issue
React.js 道具问题 - React.js props issue
相关标签