0
例如，我有一個ES6和諧JSX代碼段是這樣的：React.jS中內聯所有樣式的性能問題？
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>
)
}
}
如可以看到的，使用的JSX內嵌樣式很多。使用Webpack的編譯階段非常慢。除了編譯之外，我只是想知道，如果我在任何地方都使用JSX內聯樣式，渲染是否會有很大的開銷。
有沒有人有關於此的想法？謝謝！