面试题：CSS在React与Vue框架组件化中的作用差异

Question

请阐述在React和Vue框架中，CSS在实现组件化过程里所扮演的角色有哪些不同点，例如在样式封装、作用域控制方面的差异。

Answer 1

样式封装

• React：
  • 常使用CSS Modules，它通过将CSS类名进行局部作用域处理来实现样式封装。每个组件的CSS文件中的类名会被自动生成一个唯一的哈希值，使得不同组件间相同类名不会冲突。例如，定义一个.button类，在编译后会变成类似.button__abc123的形式。
  • 也可使用styled - components库，它采用JavaScript编写CSS，将样式直接写在组件内部，通过模板字符串定义样式，样式与组件紧密绑定，进一步强化了封装性。例如：

import styled from'styled - components';
const Button = styled.button`
  background - color: blue;
  color: white;
`;

• Vue：
  • 采用<style scoped>标签来实现样式封装。它会自动为当前组件的DOM元素添加一个独一无二的属性，然后在样式中通过该属性来限定样式仅作用于当前组件内的元素。例如：

<template>
  <div class="button">按钮</div>
</template>
<style scoped>
.button {
  background - color: red;
  color: white;
}
</style>

作用域控制

• React：
  • CSS Modules作用域控制基于类名的哈希化，在构建时对类名进行处理，使得不同组件即使有相同的类名也不会相互影响。但如果不小心在全局CSS文件中定义了与组件内相同的类名，可能会存在样式覆盖风险。
  • styled - components的作用域完全由组件本身控制，因为样式直接写在组件内部，不存在与外部样式冲突的问题。
• Vue：
  • <style scoped>严格限定样式作用域在当前组件，通过属性选择器来控制样式作用范围，基本不会与其他组件样式冲突。但如果需要某些样式影响到子组件，可以通过deep选择器来穿透作用域，例如：

<style scoped>
.parent - component {
  /* 父组件样式 */
}
.parent - component >>>.child - component {
  /* 影响子组件样式 */
}
</style>

• 另外，Vue也支持普通的全局样式<style>标签，这就需要开发者自行管理样式冲突问题。