React 中的内联样式和外部样式表的区别

React 是一种广泛使用的 JavaScript 库，用于开发用户界面。React 支持一种特殊的语法，称为 JSX，它使得将 HTML 和 JavaScript 混合使用变得更加简单和直观。在 React 中，我们可以使用两种不同的方式来定义样式，即内联样式和外部样式表。本文将介绍这两种方式的区别。

内联样式

内联样式是指将样式直接写在 React 组件的 JSX 代码中的一种方式。每个样式属性都以 JavaScript 对象的键值对的形式表示，键是 CSS 样式属性名，值是对应属性值的字符串。将这个对象传给组件的 style 属性即可完成内联样式的定义。

下面是一个内联样式的示例：

function MyComponent() {
  const styles = {
    color: 'red',
    fontSize: '16px',
  };
  return <div style={styles}>Hello World</div>;
}

可以看到，在上面的代码中，我们定义了一个 styles 对象，其中包含了两个样式属性：color 和 fontSize。在组件的 JSX 代码中，我们将这个对象传给了 style 属性，使得 div 元素的文本颜色为红色，字体大小为 16 像素。

内联样式的优点是灵活性高，不需要像外部样式表一样先定义好样式再引入。此外，内联样式还支持 JavaScript 变量和表达式，因此可以根据组件的状态和属性来动态计算样式。

然而，内联样式也有一些缺点。它会增加组件代码的复杂度，尤其是当有多个样式属性时，代码会变得难以维护。此外，由于内联样式是以 JavaScript 对象的形式存在，因此样式属性名需要使用驼峰命名法，与传统的 CSS 不同，这增加了样式编写的难度。

外部样式表

除了使用内联样式，我们还可以将样式定义在外部样式表中，再通过 import 或 link 引入到 React 组件中。外部样式表是一种更加传统的样式定义方式，与 React 的 JSX 语法没有直接的关系。

下面是一个外部样式表的示例：

/* styles.css */
.my-component {
  color: red;
  font-size: 16px;
}

/* MyComponent.js */
import React from 'react';
import './styles.css';

function MyComponent() {
  return <div className="my-component">Hello World</div>;
}

可以看到，在上面的代码中，我们定义了一个名为 my-component 的 CSS 类，其中包含了两个样式属性：color 和 font-size。在组件的 JSX 代码中，我们将这个类名作为 div 元素的 className 属性值，使得组件的文本颜色为红色，字体大小为 16 像素。

外部样式表的优点是可重用性高，可以在多个组件中使用相同的样式定义。此外，外部样式表也更符合传统的 CSS 定义方式，对于有经验的前端开发者来说更容易上手。

然而，外部样式表也有一些缺点。它不能像内联样式那样灵活地动态计算样式，因此需要在编写样式表时就考虑好组件的各种状态和属性。此外，引入外部样式表也需要网络请求，可能会影响页面性能。

结论

在 React 中，内联样式和外部样式表都有各自的优缺点，需要根据具体的需求选择。如果需要灵活地根据组件状态和属性计算样式，可以使用内联样式；如果需要一种更加传统的样式定义方式，可以使用外部样式表。无论使用哪种方式，都需要注意样式的维护和代码可读性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f80521c5c563ced5b8cdd5