Vue和React对比学习之css以及相应的模块化方案-阿里云开发者社区

简介

Vue和React是目前前端最火的两个框架。不管是面试还是工作可以说是前端开发者们都必须掌握的。

今天我们通过对比的方式来学习Vue和React的样式这一部分。

本文首先讲述了Vue和React支持书写样式的方式，然后分析了Vue和React的模块化方案，最后通过对比总结了它们之间的相同点和不同点。

希望通过这种对比方式的学习能让我们学习的时候印象更深刻，希望能够帮助到大家。

静态style

静态style就是内联样式。

Vue

Vue支持内联样式，并且和普通css语法一样。

<div style="color: red; font-size: 18px">内联静态style</div>

React

但是React不支持这种写法。在React中style 接受一个采用小驼峰命名属性的 JavaScript 对象，而不是 CSS 字符串。这与 DOM 中 style 的 JavaScript 属性是一致的，同时会更高效的，且能预防跨站脚本（XSS）的安全漏。

<div style={{ color: "red", fontSize: "18px" }}>内联静态style</div>

例子渲染效果如下

动态style

动态style就是样式能根据变量值动态改变。

Vue

在Vue中，内联动态样式支持对象和数组两种方式。

样式属性名支持两种方式，可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名。

<template>
  <div class="style-wrapper">
    <div :style="styleObj">内联动态style</div>
  </div>
</template>

<script>
import { defineComponent, ref, reactive } from "vue";

export default defineComponent({
  setup() {
    let styleObj = reactive({ "font-size": "18px", fontWeight: "bold" });

    return { styleObj };
  },
});
</script>

:style 的数组语法可以将多个样式对象应用到同一个元素上：

<div :style="[stylesObj1, stylesObj2]"></div>

在 :style 中使用需要一个 vendor prefix (浏览器引擎前缀) 的 CSS property 时，Vue 将自动侦测并添加相应的前缀。Vue 是通过运行时检测来确定哪些样式的 property 是被当前浏览器支持的。如果浏览器不支持某个 property，Vue 会进行多次测试以找到支持它的前缀。

React

在React中，内联动态样式只支持对象方式，并且浏览器前缀也不会自动加，需要自己补充对应的样式属性。

样式属性名只能用驼峰式 camelCase 来命名。

import { Component } from "react";

export class Style1 extends Component {
  constructor() {
    super();
    this.state = {
      styleObj: { fontSize: "18px", fontWeight: "bold" },
    };
  }

  render() {
    return (
      <div>
        <div style={this.state.styleObj}>内联动态style</div>
      </div>
    );
  }
}

export default Style1;

React 会自动添加 ”px” 后缀到内联样式为数字的属性后。如需使用 ”px” 以外的单位，请将此值设为数字与所需单位组成的字符串。例如：

// Result style: '10px'
<div style={{ height: 10 }}>
  Hello World!
</div>

// Result style: '10%'
<div style={{ height: '10%' }}>
  Hello World!
</div>

自动添加 ”px”这个在Vue中是不支持的。

例子渲染效果如下

静态class

静态class就是内联class，是不需要动态改变的。

Vue

在Vue中，可以直接在元素或子组件上定义class。

<template>
  <div class="style-wrapper">
    <div class="class1">静态class</div>
    <StyleChild class="class2"></StyleChild>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import StyleChild from "@/components/StyleChild";

export default defineComponent({
  components: {
    StyleChild,
  },
});
</script>
<style>
.class1 {
  color: blue;
}

.class2 {
  color: darkblue;
}
</style>

例子渲染效果如下

React

在React中，类名需要使用className来定义，并且不支持直接在子元素上定义className。

import "../style/style.css";

...

render() {
  return (
    <div>
      <div className="class1">静态class</div>
      <StyleChild className="class2"></StyleChild>
    </div>
  )
}

例子渲染效果如下

可以看到子组件上并没有我们添加的样式。

动态 class

动态class就是class能根据变量值动态改变。

Vue

在Vue中，动态class支持对象、数组、字符串三种方式。并且可以任意搭配三目运算符使用。

<template>
  <div class="style-wrapper">
    <div :class="classStr">动态class</div>
    <div :class="hasClass1 ? 'class1' : ''">动态class</div>
    <div :class="{ class1: hasClass1, class2: hasClass2 }">动态class</div>
    <div :class="[classStr, { class3: hasClass3 }, hasClass4 ? 'class4' : '']">
      动态class
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    let classStr = ref("str1 str2");

    let hasClass1 = ref(true);
    let hasClass2 = ref(false);
    let hasClass3 = ref(true);
    let hasClass4 = ref(true);

    return { classStr, hasClass1, hasClass2, hasClass3, hasClass4 };
  },
});
</script>
<style>
.class1 {
  color: blue;
}

.class2 {
  color: darkblue;
}

.class3 {
  font-size: 18px;
}

.class4 {
  font-weight: bold;
}
</style>

例子渲染效果如下

React

在React中，动态class只支持字符串的方式。

import { Component } from "react";

export class Style1 extends Component {
  constructor() {
    super();
    this.state = {
      classStr: "str1",
    };
  }

  render() {
    return (
      <div>
        <div className={this.state.classStr + " str2"}>动态class</div>
      </div>
    );
  }
}

export default Style1;

渲染效果如下

如果要使用对象或数组语法需要借助第三方插件classnames

import classNames from "classnames";
import "../style/style.css";

export class Style1 extends Component {

  render() {
    return (
      <div>
        {/* 动态多个class需要classnames */}
        <div className={classNames("c1 c2")}>classnames使用1 </div>
        <div className={classNames({ c1: true, c2: false })}>
          classnames使用2 渲染出 c1
        </div>
        <div className={classNames({ c1: true }, { c3: true })}>
          classnames使用3 渲染出 c1 c3
        </div>
      </div>
    );
  }
}

更多用法可以查看classnames文档，这里笔者就不细说了。

模块化css

模块化css有两个优点，一是能让样式代码复用，减少构建后代码体积。其次能避免样式污染，样式只在引入的文件生效，不会影响其他页面。

在React 并没有给我们提供与 Vue scoped 或 Vue module 类似的特性，需要通过其他方式来实现 CSS 模块化。

scoped

在Vue中我们只要在style标签内加上scoped属性，该style里面的样式只有在当前组件才会生效。

<template>
  <div class="div1">div1</div>
  <div class="div2">div2</div>
</template>

<style scoped>
.div1 {
  color: red;
}

.div2 {
  color: green;
}
</style>

其原理就是会在每个元素上加上该组件的唯一hash值，作为一个自定义属性，然后样式类会自动和该属性选择器结合。

由于每个组件的hash值是唯一的，所以样式就只会在当前组件生效。

那我们能使用/deep/来进行样式穿透的原理是什么呢？

我们把上面的例子作为一个子元素，再创建一个新的父元素，在父元素里面来修改子元素的样式。

请注意，父元素要想穿透，也必须设置成 scoped

<template>
  <div class="style-wrapper">
    <Style></Style>
  </div>
</template>

<style scoped>
/deep/ .div1 {
  color: yellow;
}
</style>

可以看到，其实就是把父元素的唯一hash值放到了子组件上。(这也印证了上面说的，要想穿透，父元素必须设置成scoped，因为开启了scoped才会有hash值)

然后父元素样式就是该hash值和子类名形成组合选择器。它会将子类样式直接覆盖。

module

还可以使用module，功能类似，但是使用方式稍有差别。

<template>
  <header :class="$style.class1">module 样式</header>
</template>

<style module>
.class1 {
  color: red;
}
</style>

Vue会默认会创建一个$style的计算属性，如果想修改计算属性名称，可以给module传递一个值。

<template>
  <header :class="customStyle.class1">module 样式</header>
</template>

<style module="customStyle">
.class1 {
  color: red;
}
</style>

module的原理很简单，其实就是生成一个唯一的class。比如我们上面的例子，实际类名如下

在React中最常用的模块化方案有 CSS Modules 和 styled-components 两种。

CSS Modules 与 styled-components 是两种截然不同的 CSS 模块化方案，它们最本质的区别是：前者是在外部管理 CSS，后者是在组件中管理 CSS。下面笔者详细介绍下。

CSS Modules

CSS Modules 允许我们像 import 一个 JS Module 一样去 import 一个 CSS Module。每一个 CSS 文件都是一个独立的模块，每一个类名都是该模块所导出对象的一个属性。通过这种方式，便可在使用时明确指定所引用的 CSS 样式。并且，CSS Modules 在打包时会自动将 id 和 class 混淆成全局唯一的 hash 值，从而避免发生命名冲突问题。

配置

以 webpack构建工具为例，我们需要 css-loader 中配置modules: true 来开启的 modules 特性：

// webpack.config.js -> module.rules
{
  test: /.(c|sa|sc)ss$/i,
  exclude: /node_modules/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        importLoaders: 2,
        // 开启 CSS Modules
        modules: true,
        // 借助 CSS Modules，可以很方便地自动生成 BEM 风格的命名
        localIdentName: '[path][name]__[local]--[hash:base64:5]',
      },
    },
    'postcss-loader',
    'sass-loader',
  ],
},

使用

当我们使用CSS Modules后，我们可以像引入js一样引入css然后使用。

/* style.css */
:global(.card) {
  padding: 20px;
}
.article {
  background-color: #fff;
}
.title {
  font-size: 16px;
}

// App.js
import React from 'react'
import styles from './style.css'

export default function App() {
  return (
    <article className={styles.article}>
      <h2 className={styles.title}>Hello World</h2>
      <div className="card">global style</div>
    </article>
  )
}

VSCode 扩展支持

在 VSCode 中写 CSS Modules 代码，默认是没有智能提示功能的。可以安装 CSS Modules 扩展，这样就会有智能提示啦。

CSS-in-JS

CSS-in-JS就是允许我们在js中写css。CSS-in-JS 库目前已有几十种实现，最流行的当属 styled-components。

使用

首先需要安装

npm i styled-components

它使用 ES6 提供的模版字符串功能来构造“样式组件”。

import styled from "styled-components";

// 这里面的样式跟css一样，不用小驼峰
// 定义一个<h3></h3> 样式如下
const Title = styled.h3`
  text-align: left;
  color: palevioletred;
`;

export class Style1 extends Component {

  render() {
    return (
      <div>
        <Title>styled-components 跟h3使用方式一样</Title>
      </div>
    );
  }
}

更多用法可以参看style-components，这里笔者就不细说了。

VsCode 扩展支持

在 VSCode 中写 CSS-in-JS 代码，默认是没有智能提示功能的。可以安装 vscode-styled-components 扩展，这样就会有智能提示啦。

对比总结

相同点

都支持静态动态style和静态动态class写法。
都有对应的模块化方案，vue有内置的scoped和module，react有比较常用的css modul和styled components。

不同点

静态style，在Vue中和书写普通html一样。但是在React中，需要以对象的形式书写，并且属性需要采用小驼峰命名。
动态style，在Vue中支持对象和数组的写法，而且属性名支持驼峰和横线分隔，并且浏览器前缀会自动补充。但是在React中，只支持对象写法，而且属性名只支持驼峰，并且不会自动补充浏览器前缀，但是它会自动加上px单位，这个是Vue不支持的。
静态class，在Vue中和书写普通html一样。但是在React中，需要以className来定义class。
动态class，在Vue中支持字符串、对象、数组的方式。但是在React中只支持字符串的写法，功能较弱，但是可以借助classnames插件来增强。
在React模块化主要通过CSS Modules 和 styled-components来实现。但是在Vue中都已经封装好了，直接使用即可。并且如果想要在Vue中使用CSS in Js可以借助第三方插件vue-styled-components来实现。

系列文章

Vue和React对比学习之生命周期函数(Vue2、Vue3、老版React、新版React)

Vue和React对比学习之组件传值(Vue2 12种、Vue3 9种、React 7种)

Vue和React对比学习之Style样式

Vue和React对比学习之Ref和Slot

Vue和React对比学习之Hooks

Vue和React对比学习之路由(Vue-Router、React-Router)

Vue和React对比学习之状态管理 (Vuex和Redux)

Vue和React对比学习之条件判断、循环、计算属性、属性监听

后记

感谢小伙伴们的耐心观看，本文为笔者个人学习笔记，如有谬误，还请告知，万分感谢！如果本文对你有所帮助，还请点个关注点个赞~，您的支持是笔者不断更新的动力！

Vue和React对比学习之css以及相应的模块化方案

简介

静态style

Vue

React

动态style

Vue

React

静态class

Vue

React

动态 class

Vue

React

模块化css

scoped

module

CSS Modules

配置

使用

VSCode 扩展支持

CSS-in-JS

使用

VsCode 扩展支持

对比总结

相同点

不同点

系列文章

后记

热门文章

最新文章

相关课程

相关电子书

相关实验场景