在React JS中使用样式的最佳(最佳)方法

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

  • 普通CSS
  • JS中的CSS
  • 样式化的组件
  • Sass和SCSS

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

WLKing 回答:在React JS中使用样式的最佳(最佳)方法

性能都是一样的,当您运行npm run build时,所有这些都转换为纯CSS。

CSS具有其优点,因为它对设计人员友好,但是如果不小心将两个具有相同名称的类(这是将CSS分成多个文件的情况),则可能会引起一些问题,如果发生这种情况,则会使调试成为噩梦(我自己去过那里。

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

样式化组件,js中的CSS,可能更适合基于组件的反应世界,因为对于您样式化的每个“类”,都会生成UNIQE className +它为您提供了更多功能通过使道具/状态修改类的样式,与其他更改 backgroundColor 的样式不同,您将需要2个类。

有很多方法可以做到,最适合我的最佳比较文章是在这里:https://www.sitepoint.com/react-components-styling-options/

,

请尽可能尝试使用SCSS。它有助于组织样式,并且将以任何方式处理为CSS。因此,字面上没有任何缺点。

对于简单的样式,我建议使用普通的CSS类(在.scss文件中)。

对于复杂的动画或样式逻辑,请结合使用JavaScript和framer-motion等现有动画库。这样一来,您可以更好地控制正在发生的事情,并拥有更多使网站变得出色和独特的可能性。

本文链接:https://www.f2er.com/3004459.html

大家都在问