Post by account_disabled on Jan 28, 2024 0:01:57 GMT -5
虽然使用 React 构建应用程序的许多方面已经在某种程度上标准化，但样式是仍然存在许多竞争选项的领域。每种方法都有其优点和缺点，并且没有明确的最佳选择。 在本文中，我将简要概述与 React 组件相关的 Web 应用程序样式的进展。我还将简要介绍styled-components。 包含各种“风格组件”的化妆品套件 JavaScript 样式的演变 CSS 最初发布于 1996 年，此后没有发生太大变化。在其第三个主要版本以及即将发布的第四个版本中，它通过添加新功能继续发展，并保持了其作为基本 Web 技术的声誉。CSS 永远是 Web 组件样式的黄金标准，但它的使用方式每天都在变化。 从我们可以用切片图像构建网站的时代到自定义、手动滚动的 CSS 可以反映与图像相同的内容的时代，CSS 实现的发展随着 JavaScript 和 Web 作为平台的发展而不断发展。 Learn to Code with JavaScript 自 2013 年 React 发布以来，组件构建的 Web 应用程序已成为常态。
CSS 的实现反过来也受到了质疑。反对在 React 中使用 CSS 的主要论点是关注点分离 (SoC)。SoC是一种设计原则，描述了将程序划分为多个部分，每个部分解决不同的问题。这一原则主要在开发人员将三种主要 Web 技术保存在单独的文件 WhatsApp 号码数据 中时使用：样式 (CSS)、标记 (HTML) 和逻辑 (JavaScript)。 随着 React 中 JSX 的引入，这种情况发生了变化。开发团队认为，我们一直在做的其实是技术的分离，而不是关注点的分离。有人可能会问，既然 JSX 将标记移到了 JavaScript 代码中，为什么样式应该分开呢？ 与分离风格和逻辑相反，可以使用不同的方法将它们内联合并。下面是一个例子 内联样式从 CSS 文件中移动 CSS 定义。因此，无需导入文件并节省带宽，但会牺牲可读性、可维护性和样式继承。 CSS 模块 按钮如我们从上面的代码示例中看到的，CSS 仍然存在于它自己的文件中。但是，当CSS 模块与 Webpack 或其他现代捆绑器捆绑时，CSS 会作为脚本标签添加到 HTML 文件中。
类名也被散列以提供更细粒度的样式，解决级联样式表带来的问题。 散列的过程涉及生成唯一的字符串而不是类名。具有 的类名将btn产生一个哈希值，DhtEg该哈希值可防止样式级联并将样式应用于不需要的元素。 上面的示例中，我们可以看到 CSS 模块添加的样式标签元素，以及散列类名和使用散列的 DOM 元素。 魅力 Glamour是一个 CSS-in-JS 库，它允许我们在与 JavaScript 相同的文件中声明 CSS。Glamour 再次对类名进行哈希处理，但提供了一种干净的语法来通过 JavaScript 构建 CSS 样式表。 样式定义是通过 JavaScript 变量构建的，该变量使用驼峰式大小写语法描述每个属性。使用驼峰式大小写很重要，因为 CSS 定义了火车大小写中的所有属性。主要区别在于属性名称的变化。从应用程序的其他部分或 CSS 示例复制和粘贴 CSS 时，这可能会出现问题。结论 正如我们在这篇文章中所看到的，我们设计组件样式的方式差异很大——没有一种是明显的获胜方法。
CSS 的实现反过来也受到了质疑。反对在 React 中使用 CSS 的主要论点是关注点分离 (SoC)。SoC是一种设计原则，描述了将程序划分为多个部分，每个部分解决不同的问题。这一原则主要在开发人员将三种主要 Web 技术保存在单独的文件 WhatsApp 号码数据 中时使用：样式 (CSS)、标记 (HTML) 和逻辑 (JavaScript)。 随着 React 中 JSX 的引入，这种情况发生了变化。开发团队认为，我们一直在做的其实是技术的分离，而不是关注点的分离。有人可能会问，既然 JSX 将标记移到了 JavaScript 代码中，为什么样式应该分开呢？ 与分离风格和逻辑相反，可以使用不同的方法将它们内联合并。下面是一个例子 内联样式从 CSS 文件中移动 CSS 定义。因此，无需导入文件并节省带宽，但会牺牲可读性、可维护性和样式继承。 CSS 模块 按钮如我们从上面的代码示例中看到的，CSS 仍然存在于它自己的文件中。但是，当CSS 模块与 Webpack 或其他现代捆绑器捆绑时，CSS 会作为脚本标签添加到 HTML 文件中。
类名也被散列以提供更细粒度的样式，解决级联样式表带来的问题。 散列的过程涉及生成唯一的字符串而不是类名。具有 的类名将btn产生一个哈希值，DhtEg该哈希值可防止样式级联并将样式应用于不需要的元素。 上面的示例中，我们可以看到 CSS 模块添加的样式标签元素，以及散列类名和使用散列的 DOM 元素。 魅力 Glamour是一个 CSS-in-JS 库，它允许我们在与 JavaScript 相同的文件中声明 CSS。Glamour 再次对类名进行哈希处理，但提供了一种干净的语法来通过 JavaScript 构建 CSS 样式表。 样式定义是通过 JavaScript 变量构建的，该变量使用驼峰式大小写语法描述每个属性。使用驼峰式大小写很重要，因为 CSS 定义了火车大小写中的所有属性。主要区别在于属性名称的变化。从应用程序的其他部分或 CSS 示例复制和粘贴 CSS 时，这可能会出现问题。结论 正如我们在这篇文章中所看到的，我们设计组件样式的方式差异很大——没有一种是明显的获胜方法。