react优化避免使用内联样式属性-自学php网

来源：未知时间：2024-05-13 19:49 作者：小飞侠阅读:次

[导读] 当使用内联 style 为元素添加样式时，内联 style 会被编译为 JavaScript 代码，通过 Javascript 代码将样式规则映射到元素的身上，浏览器就会花费更多的时问执行脚本和渲染 Ui，从而增加...

当使用内联 style 为元素添加样式时，内联 style 会被编译为 JavaScript 代码，

通过 Javascript 代码将样式规则映射到元素的身上，浏览器就会花费更

多的时问执行脚本和渲染 Ui，从而增加了组件的渲染时问。

function App() {

return <div style={{ backgroundColor: "skyblue" }}>App works</div>

}

在上面的组件中，为元素附加了内联样式，添加的内联样式为 JavaScript 对象，backgroundColor 需要被转换为等效的 CSS 样式规则，然后将其应用

到元素，这样涉及到脚本的执行．

更好的办法是将 CSS 文件导入样式组件。能通过 CSS 直接做的事情就不要通过 JavaScript 去做，因为 Javascript 操作 DOM 非常慢.

更多文章推荐