学习如何轻松构建可伸缩的 React 应用程序：典型反例和最佳实践。 # 反例 # 内联样式 或 CSS 内联样式使用起来非常简单，只需要在元素上添加一个 style 属性即可。.../* bad practice */ h1 { color: red; } 直接为 HTML 标签设置样式会导致样式冲突，因为它会影响整个应用程序中的所有标签。...当我们编写组件时，第一个在渲染中插入 div 元素的想法就会浮现，无论是在类组件的 render 方法中还是在函数式组件的返回语句中。虽然这种做法有效，但它并没有为浏览器提供足够的信息。...# 使用 CSS 模块 CSS 模块允许您在 CSS 文件中编写样式，但将它们作为 JavaScript 对象进行使用以进行其他处理和安全性 CSS 模块会自动使类名和动画名称唯一，不必担心选择器名称冲突...CSS 预处理器是一种程序，它可以让您从预处理器自己独特的语法中生成 CSS。 # 文件 / 文件夹结构 大多数时候，我们不确定如何设置文件夹和文件结构以最好地服务于我们正在开发的应用程序。
在样式中使用 JS 常量的能力在某些情况下可以降低重复，因为同一个常量不需要同时定义为CSS变量和 JS 常量。...使用 props 和 state 的能力可以创建具有高度可定制的样式的组件，而无需使用内联样式。(当相同的样式应用于许多元素时，内联样式的性能并不理想）。 中立 这是一项热门的新技术。...(Sass模块在构建时被编译成普通的CSS，所以使用它们几乎没有性能损失)。 我重复了上述同样的测试，前10次渲染的平均时间为27.7ms。这比原来的时间减少了48%!...实用类就是是在元素上设置一个单一的CSS属性的CSS类。通常情况下，结合多个实用类来获得所需的样式。对于上面的例子，可以这样写。...虽然我自己没有使用过任何编译时的CSS-in-JS库，但我仍然认为它们与Sass模块相比有缺点。
当我们在启动某个应用程序的时，就会创建一个进程来执行任务代码，同时会为该进程分配内存空间，该应用程序的状态都保存在该内存空间里。当应用关闭时，该内存空间就会被回收。...5 浏览器渲染原理 当我们在地址栏输入地址时，浏览器的UI线程会捕捉我们的输入内容， a....js）； 计算UI：在html解析完成后，就会得到一个DOM树，但此时还不知道DOM树的每一个节点的样式，主线程需要解析css并确定每个节点的就算样式，即使你没有提供自定义的css样式，浏览器也有默认的样式表...就是用户看到的效果了。 6. 渲染问题 当我们改变一个元素的位置尺寸时，会重新进行样式计算、布局、绘制、栅格化等流程（重排）。...当我们改变某个元素的颜色属性时，不会触发重新布局，但是会触发样式计算和绘制（重绘）。
当我将CSS重用为一个按钮时，我不会把它放在任何其他元素上，而是把它放在一个按钮上。输入字段、布局和我构建的任何自定义组件也是如此。我正在重用组件，而不是class。但这有什么不同呢？...我们没有定义单独的组件，而是再次伸手去寻找类，但这次它们不是语义的。我们使用速记样式来设置每个元素的样式。...边距、填充、字体大小 - 除非我跳到 CSS 文件，否则我不会知道它的作用。现在，当我看到另一个类时，我可以理解它有什么风格。...当我们以经典的方式编写CSS时，我们会想到用类描述内容的最佳方式。当我们需要改变一些东西时，如果它不再足够好，我们很少考虑更新类设计。...我希望能够以一种能够让我高效工作并专注于应用程序的关键方面的方式设置我的组件样式。
当你开始ReactJS的新项目时，你可能会选择像Webpack这样的绑定工具，尝试找出项目中需要绑定的模块。React-Native有你需要的一切，你很可能不再需要其他依赖。...要为您的React-Native组件设置样式，您必须在Javascript中创建样式表。...它看似CSS,但却不是真正的CSS.这可能一开始会令人困惑，你可能会碰到一个问题，比如你想知道如何使用SASS来创建混合，或者如何覆盖要重用的组件的样式。...然后你就会发现React-Native不是web元素所以不能够像那样设置样式。幸运地是，你很有可能找到可替代方案完成你所需。...发布 如果您为iOS和Android开发应用程序，则需要了解Xcode和Android Studio的工作原理，以确保在App Store或Google Play上首次部署应用程序之前正确设置所有内容。
为了防止这篇文章太长，我今天将主要讨论CSS代码。JavaScript代码是另一个完全不同的棘手问题。 这篇文章的目的不在于规则手册，而在于你正在编写CSS时的指南。...1.不要写不需要的样式定义 例如：编写display:block;时要注意，因为很多元素默认有这个样式。 另一个例子是在元素上定义字体大小，它将继承你正在定义的正文字体大小。...所以你试图为黑色的链接编写一个工具类： .link--black { color: black; } 此处.link–black链接将被CSS特殊性所覆盖，并且将无法压倒.my-form li a样式。...我在这里作出的假设是：某一天，此红色的链接将在应用程序的其他地方被使用。我不想把它嵌入到用户表单中，因为那样我就不得不在未来编写另外一个样式来说明需要红色链接的情况。...例如，我会使用立即可用的Foundation或Bootstrap模块，如果我正工作于依赖jQuery的项目，但是会在React中构建我自己的模块（只是因为编写组件以便通过引入jQuery插入到React
font-size: 16px; padding: 16px; border-left: 3px solid; margin-left: -6rem; align-self: center; } 当我们开始为突出显示的元素添加样式时...减少 CSS 特定性问题 我喜欢使用样式查询的原因是，它将减少 CSS 特定性，因为我们将不太依赖 CSS 变化类或 HTML 数据属性来对组件变化进行样式设置。...条件装饰样式 在某些情况下，我们可能需要根据文本元素在 HTML 中的位置为其添加条件装饰样式。 标题和段落下方有一个旋转的背景效果。...RTL 样式：卡片组件 写 RTL 样式时，第一步是在 元素中添加 dir=rtl。一旦添加，每个元素的 direction CSS 属性都会变为 direction: rtl。...因此，我在示例中使用了 CSS 变量。 新闻模块 这是我在 bbc.com 上发现的真实问题。最初，我们有以下新闻组件。 根据其容器，样式应略有改变。
前提条件 为了充分利用本文内容，您需要： 具备 React 的基本知识 熟悉 CSS 模块 熟悉 ES6 语法 安装了 Node.js 项目设置 我们将构建一个按钮组件，具有以下 props： variant...首先，删除 App.css 文件。我们不需要它，因为我们将使用 CSS 模块来为按钮组件设置样式。 接下来，在 src 目录内创建一个新的 components 目录。...我们使用 join() 方法而不是 toString() 方法，因为 toString() 方法返回的字符串使用逗号作为分隔符来连接数组中的 CSS 类。当应用于元素时，这无法生成预期的样式。...： 当我们在浏览器的开发者工具中检查该元素时： 这些类被逗号分隔，并作为单个类而不是单独的类应用于按钮上。...此外，使用 CSS 模块、像 Material UI (MUI) 这样的样式组件库或像 Tailwind CSS 这样的 CSS 框架来为组件设置样式，可以提高 React 项目的整体可维护性，因为这些样式选项保持样式的隔离
1.不要写不需要的样式定义 例如：编写时要注意，因为很多元素默认有这个样式。 另一个例子是在元素上定义字体大小，它将继承你正在定义的正文字体大小。 目标是双重的： 减少CSS文件的长度，以便浏览。...所以你试图为黑色的链接编写一个工具类： .link--black{color: black; } 此处.link–black链接将被CSS特殊性所覆盖，并且将无法压倒.my-form li a样式。...我在这里作出的假设是：某一天，此红色的链接将在应用程序的其他地方被使用。我不想把它嵌入到用户表单中，因为那样我就不得不在未来编写另外一个样式来说明需要红色链接的情况。...这对于移动设备也是一个痛苦的根源。例如，如果你希望手机屏幕显示某些内容，则必须使用另一个!important类来重写.hide类以显示它。 我一直找不到使用!...例如，我会使用立即可用的Foundation或Bootstrap模块，如果我正工作于依赖jQuery的项目，但是会在React中构建我自己的模块（只是因为编写组件以便通过引入jQuery插入到React
所以你试图写一个css类的将链接的颜色变成黑色： 这个.link--black将被CSS的特殊性所覆盖，并且无法覆盖.user-form li风格。...使用BEM的一个很好的例子就是当你有一个真正具体的样式的组件时，如果修改网页太麻烦或者太复杂。...important的定义是一种使你的代码被覆盖的痛苦的方法，特别是当你试图使用媒体查询时。 这是一个移动端的痛苦。例如，如果你先在手机屏幕显示某些内容，你必须使用另一个!...例如，如果我使用的是依赖于jQuery的项目，但是会在React中构建我自己的模块，那么我将使用基础模块或引导模块（仅仅是因为编写组件以便通过引入jQuery插入到React组件中）。...我认为这是具有长期可维护性的应用程序与难以处理的应用程序之间的最大因素之一。
「性能优化」：某些 CSS-in-JS 库会使用类似于「样式提取」（style extraction）的技术，将样式提取为单独的 CSS 文件，以提高性能。...当我们安装create-React-app时，React会为我们处理一切；因此，我们目前不需要为Webpack配置CSS模块。 在使用CSS模块时，不需要额外的代码或添加到CSS模块的第三方代码。...但是，我认为CSS模块是会在未来「大放异彩」，特别是「全局范围」和「可重用性」，这使得我们以后写样式时，不用如履薄冰。CSS模块越来越广泛地用于在特定组件中本地描述样式并避免全局作用域。...并且我们在浏览器中进行元素审查时，可以看到指定元素中的class使用从CSS模块获取的哈希值。 ---- 6. 全局 CSS ❝CSS模块并不禁止使用全局CSS。.../* 在CSS模块中 */ .button { /* 样式规则 */ } 在这里，.button 类名的样式也会在整个应用程序中全局生效。
下图中，我总结了一下 Web Vitals 给出的指标： 其中： FCP(First Contentful Paint)：测量应用程序在初次访问期间需要渲染 DOM 中的第一个元素的时间。...这是因为它们的使用方式不仅会影响页面速度（不同的字体有不同的大小），而且会对查看者在不查看页面时的查看方式产生深远影响。以下是一些需要注意的事项： 自托管：避免从无法控制的外部服务加载字体文件。...样式 CSS over CSS-in-JS 解决方案。在样式方面，您可能需要考虑一种更“老式”的方式。因为在 SSR 应用程序中，我们不想用更多的 JavaScript 占用主线程。...此外，Next.js 已经内置了很多 CSS 优化方案，比如类名和样式缩小、sass 支持、配置 postcss。 字体显示。...此外，我们可以控制模块的优先级。 删除重复的模块。有时在 monorepo 架构中工作时，我们可能会得到多次捆绑的包。同样，webpack config 带有一个可以合并我们重复的块的属性。 6.
一个成功的Web App必须有良好的用户体验。当我们谈及改善用户体验时，你会想到什么？ 其实，有一点是很容易被开发者忽视的，那就是CSS。...平滑滚动 当页面被#链接滚动时，默认效果是这样的。 这种突然的跳跃会让人感到不舒服。为了解决这个问题，我们可以使用这个CSS样式：sroll-behavior: smooth。...只有某些CSS属性可以和::selection一起使用。...Cursor 在不同的场景下使用不同的鼠标样式可以帮助读者感知页面的当前状态，从而改善用户的互动体验。 cursor CSS属性设置鼠标指针在一个元素上时要显示的鼠标指针（如果有的话）。...图片的排列与我们所期望的一样。 通常情况下是没有问题的。但是当我们写代码时，我们不能假设一切都会按照我们的预期发展。我们需要做好充分的准备。
/home 本文介绍了CSS（层叠样式表）的基本概念和作用，然后深入讨论了10个常用的CSS属性。...鼠标指针样式 在鼠标悬停在元素上时，改变鼠标指针的样式。...对于这个演示，我使用了一个SVG波浪图像，我是通过这个网站获取的。...如果支持，将执行第一个规则块中的样式规则；如果不支持，则执行第二个规则块中的备用样式规则。 这种方式可以用来检查任何CSS属性的支持情况，以便根据支持情况应用不同的样式规则。...Filter 我们可以使用CSS为图像添加惊人的滤镜效果。滤镜效果是我们在每个照片分享应用程序中都会看到的功能，现在让我们看看它们有多容易实现。
——《荀子·儒效》 ❞ 大家好，我是「柒八九」。 前言 在回望过去，展望未来- 2024 React 生态一览表中讲到CSS时，我们提到过Tailwind CSS，并且也说会有相关的文章。...这不，乘着上篇文章还没凉透的，我们来今天乘热打铁，来讲讲Tailwind CSS。 在使用 Tailwind CSS 时，由于它的原子特性，让我们写样式时，变得十分丝滑。...，当我们想要更改项目中的颜色方案时，我们只需在一个地方进行颜色替换：tailwind.config.js。...尽可能减少实用类的使用 当我们为 HTML 元素构建实用类列表时，每个新类都会为代码后继者增加阅读的复杂性，他们将稍后必须分析和处理代码（这也包括我们自己）。...使用更短的类列表，下次检查应用程序结构时，分析正在进行的操作将变得更加容易。 2.
诸如模块、组件、路由、状态管理、状态传播、异步代码、响应式、服务器端呈现之类的东西最终都会出现在图片中。但只有当他们的时间到来，只有当我准备好了他们！...简单项目的简单工具 当我开始一个新项目时，简单开始是至关重要的。这个职业的认知负担已经够重的了。我不需要更多了，除非真的需要。同样重要的是，只要应用程序保持简单，项目设置就保持简单。...当用户点击按钮时，消息会发生变化: ? 作为一个谨慎的程序员，我希望从一开始就正确地构造应用程序。...在用户界面中有以下元素: header main area footer 我希望将每个组件定义为一个单独的组件。我希望将他们的代码放在单独的模块中，以便于识别和使用。...自力更生 当浏览器加载 index. html 时，会发生以下情况: Vue JS 库是从 CDN 库中获取的https://unpkg.com/vue 获取组件样式 应用程序模块从 index.js
什么是ViewEncapsulation ViewEncapsulation 决定组件中定义的样式是否会影响整个应用程序。...19. ng-Class 和 ng-Style的区别 ng-Class: 加载css类 ng-Style:设置css样式 20. component和module的区别？...module声明了哪些模块可以被其他模块使用，依赖注入了哪些类，以及启动的component，模块来管理组件，使app实现模块化。 21. 怎样在组件中选择一个元素？...6）如果应用程序较大时，我会考虑延迟加载而不是完全捆绑的应用程序。 27. 使用Angular的好处 可以添加自定义的directive. 优秀的社区支持。 客户端和服务器的通讯非常便利。...|Function|string 类型的选择器 不同点 ContentChild 用来从通过 Content Projection 方式 (ng-content) 设置的视图中获取匹配的元素
于是又动手迁移到 Cloudflare Pages，顺便又修改了一些 css，目前博客样式比较顺我的意。这篇文章记录下折腾的过程，希望能给读者带来一些参考。...设置构建命令，接着只要 github 上的 blog repo 有更新，这边就会自动部署。...当我们访问 https://qcrao.com/2019/04/02/dive-into-go-slice 时，会自动跳转到： CSS 美化 很惭愧，我并不会 CSS，他们都说特别简单，下次我一定学。...一开始想要美化 CSS 的原因是在手机端看博客文章时，结尾部分的版权声明字体过于大，而文章正文的字体又显得特别小（我特地和曹大博客在手机端的效果做了对比）。...具体匹配哪些元素要用谷歌浏览器的『检查』功能。 问了几次 aofei 如何修改 CSS 后，我自己成功地将 cmd markdown 渲染出来的引用格式移植到了博客上。
，便可快速定位到改组件的路由： 5、在路由文件里便可清晰地看到组件定义的位置了： 4、关于CSS的模块化 在CSS中，模块化可以通过多种方式实现。...CSS模块（CSS Modules）：它是一种官方的CSS模块化解决方案，它利用Webpack、Vite等打包工具，将CSS样式表归档为模块，并自动管理CSS类名的作用域和命名。...使用CSS-in-JS，您可以将不同模块的样式定义在同一个文件或同一个组件内，并以动态方式根据组件状态或其他条件应用它们。...例如，在默认设置下，当 CSS 中出现 font-size: 16px; 的样式规则时，该插件将自动将其转换为 font-size: 1rem;，根据默认的转换比例（1px = 1/16rem）计算而得...在没有移动端的设计稿时，不失为一种防止在移动端上布局样式崩溃的方法。 如果没有设置宽度，元素的默认宽度是100%。这意味着元素会填充其父元素的整个宽度。
当然，从 less 切换到样式组件需要你克服比从经典 CSS 到 CSS 模块更大的学习曲线，但如果你是一名 javascript 开发人员，你会自然地适应它。...下面的论点并不是真正不选择样式组件的理由。这只是一个轻微的刺激，您必须习惯：包装组件可能会导致开销。 在重用大量组件的大型应用程序中，您经常需要对其他元素进行轻微调整。...其中一个红色按钮覆盖了已设置样式的按钮的样式。...这会对应用程序的初始加载时间产生负面影响。您也无法利用缓存所能带来的性能提升。经典 CSS 文件可以被缓存，但对于样式化组件则无法做到这一点，因为没有 CSS 文件。...结论 考虑到性能问题，您是否还应该迁移 React 应用程序？即使您已经使用 CSS 模块或任何其他解决方案（例如 Tailwind 或 PostCSS）构建了它？或许。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
