在React js中使用样式的最佳(最佳)方法 [英] best (optimal) way to use style in react js

问题描述

在React js中使用样式的方法太多，这让我感到困惑.例如:

There are so many ways to use style inside react js that it confuses me. for example :

• 普通CSS
• JS中的CSS
• 样式化的组件
• 无礼SCSS

以上方法是否影响网站加载速度?这两种方法有什么区别?

Are the above methods influencing website load speed? What is the difference between these methods?

推荐答案

性能都是相同的，当您运行npm run build时，所有这些都转换为纯CSS.

Performance is all the same, all of them are translated into plain CSS when you run : npm run build.

CSS具有设计者友好的优势，但是如果不小心将两个具有相同名称的类(这是将CSS拆分为多个文件)造成的，您可能会遇到一些问题，如果发生这种情况，这将使调试成为噩梦(我自己去过那里.

CSS has its benefits, because of designer-friendly but you may get some problems by accidentally making 2 classes with the same name(this is when you have CSS split into many files) if this happens it will make debugging a nightmare (been there myself).

Sass与css有相同的问题，但这是更酷的css的一种方法:)

Sass has the same problem as css, but it's a way more cooler css :)

样式化组件，js中的CSS，可能更适合基于组件的反应世界，因为对于您样式化的每个类"，都会生成UNIQE className +它为您提供了更多功能通过props/state修改类的样式，不像其他更改 backgroundColor 的样式，您将需要2个类.

Styled-component, CSS in js, may fit a little better on react component-based world, because for every "class" that you style a UNIQE className is generated + it gives you more power by having props/state modifying the styles of classes, not like others where for a backgroundColor change you will need 2 classes.

有很多方法可以做到，最适合我的比较好的文章是在这里:

There are a lot of ways to do this, best-comparing article that it served me well in my beginning is in here: https://www.sitepoint.com/react-components-styling-options/

这篇关于在React js中使用样式的最佳(最佳)方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！