我将JSS样式放在一个自定义的React钩子中。这是不是很糟糕？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

5件你可能不知道可以使用 CSS-in-JS 来做的事情

在这篇文章中，我将讨论在 CSS-in-JS 中你可以用上面的库来做的五件事，而我打赌这是你不知道的。...，作为另一个例子，你也可以使用 react-with-styles，它有实现 Aphrodite 或 JSS 接口，这样在定义样式时就可以访问主题信息了。...结论 CSS-in-JS 是一种使用 JavaScript为应用程序设置样式的技术，你可以使用实现它的库来做有趣的事情。在这篇文章中，我向你展示了5件你可能不知道可以使用这些库来做的事情。...当然，并不是所有的库都是对等的，有些情况只适用于特定的库。在这个页面中，您可以测试和比较许多 CSS-in-JS 的库。...其中一个库是 stylable，一个基于组件的库，带有一个预处理器，可以将 stylable 的 CSS 转换成最小的跨浏览器的 vanilla CSS。

1.4K3 0

5件您可能不知道可以使用 CSS-in-JS 来做的事情

在这篇文章中，我将讨论在 CSS-in-JS 中你可以用上面的库来做的五件事，而我打赌这是你不知道的。...，作为另一个例子，你也可以使用 react-with-styles，它有实现 Aphrodite 或 JSS 接口，这样在定义样式时就可以访问主题信息了。...结论 CSS-in-JS 是一种使用 JavaScript为应用程序设置样式的技术，您可以使用实现它的库来做有趣的事情。在这篇文章中，我向您展示了5件您可能不知道可以使用这些库来做的事情。...当然，并不是所有的库都是对等的，有些情况只适用于特定的库。在这个页面中，您可以测试和比较许多 CSS-in-JS 的库。...其中一个库是 stylable，一个基于组件的库，带有一个预处理器，可以将 stylable 的 CSS 转换成最小的跨浏览器的 vanilla CSS。

1K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

构建一套最佳的React 组件文件结构

注意：有一个论点是，只有默认的导出应该是公共的，其余的应该保持私有。 Test 测试为什么将测试放在这里而不是放在单独的tests目录中？两个字-代管！属于一起的文件应该放在一起。...出于上述所有相同的原因，将每个story及其相应的组件并置在一起很重要。 Styles 样式文件使用CSS-in-JS时，可以直接在组件文件中创建样式化的组件。...保留在组件目录之外的内容这是一个很好的规则：如果你曾经想使用除已从组件索引中显式导出的内容以外的其他内容，则明确表明此特定代码段应放置在其他位置。让我给你举个例子：让我们回到菜单组件。...为此，我们创建了一个自定义钩子useClickOutside并将其放置在utils中。一段时间后，很明显，我们这次需要Dialog组件使用完全相同的行为。...我们想重用我们的钩子，但与此同时，它不再是特定于组件的。我们应该将其从Menu组件中取出，然后将其放在更高的位置，也许放在我们的常规utils文件夹中。

1.1K1 0

前端-在2018年你应该知道的9个关于CSS组件化的JS库

可以根据需要将CSS属性添加到组件中，就像通常使用CSS一样。解析JS时，样式组件将生成唯一的类名，并将CSS注入DOM。您可以在Max Stoiber的精彩演讲中了解更多信息。...Radium提供标准接口和抽象，用于处理内联样式无法轻松容纳的CSS功能。 Radium允许您将样式与React组件捆绑在一起，将javascript，html和样式结合在一起。...这是一篇简短的 API docs 介绍，Glamour中CSS技术的比较和Gatsby Glamby的有用教程。还可以看看：Glam（仍在工作中） 7.... )} /> Fela是一个为JavaScript中的状态驱动样式构建的项目，强调了三件事：默认情况下使样式动态化，带来框架无关（React的绑定）和高性能。...这是一个很好的转换SCSS（Sass）的教程。还可以查看React-JSS，它是React的JSS集成。

2.6K4 0

6个常用的React组件库

轻松自定义；它已经流行了足够长的时间了，因此不必担心错误 / 问题；快速上手；没有 jQuery 依赖，因为它已在 React 中完全重新实现。...缺点：这是 Bootstrap：如果你不做自定义，则你的网站将与其他网站没什么区别。 Bulma ? Bulma 与本文介绍的其他库不太一样，因为 Bulma 是纯 CSS 框架，不需要 JS。...过去，你只能通过编写 JSS 来自定义 MaterialUI 的样式，但值得庆幸的是，现在可以使用 styled-components 和 Emotion 覆盖样式。...fork： https://github.com/fomantic/Fomantic-UI 荣誉奖 Reach UI ReachUI 是一个底层组件库，允许开发人员在其设计系统中构建可访问的 React...我还特意省略了 CSS-in-JS（如 styled-components 和 Emotion）以及实用工具 CSS 系统（如 Tailwind），因为它们不是明确的“React 组件库”，而是用来制作组件的工具

2.1K1 0

css-in-js 探讨

在这个由两部分组成的系列中，我想将CSS放在聚光灯下，并探索弥合它与JavaScript之间的差距。在本系列中，我将假设您正在使用像webpack这样的模块解析器。...但是我仍然想在这个系列中再次提起它。我将列出一些处理这些挑战的技术以及它们在本系列的两个部分中的局限性。...CSS-in-JS库通过在中插入标签在运行时创建样式。使用这个概念的第一个库是JSS。...以下是使用其语法的示例： import React from 'react' import injectSheet from 'react-jss' import { getSrc, getSrcSet...这个库以及许多其他库允许我们在一个动作中创建和设置它们。我最喜欢这种语法的好处是它就像常规的CSS，减去插值。

5.4K2 0

useTransition真的无所不能吗？🤔

理论上来说，渲染100个组件对React来说小菜一碟，但架不住每个组件需要10毫秒。那就得到一个糟糕的结果，渲染B页面将需要1秒钟。...但是，你思来想去，发现你的「武器库」中缺失了这种利器。你不好去做优化处理。这是因为，虽然React状态更新并不是异步的(我们之前的文章有讲过，有兴趣的可以翻找一下)。...这里的问题在于， ❝如果我们将状态更新包装在一个过渡中，React并不只是在"后台"触发状态更新。实际上，这是一个「两步过程」。...其中有一个结论是：「Memo很容易被破坏」，所以如果在useTransition处理过程中没很好处理Memo的话，会使我们的应用比使用useTransition之前显然更糟糕。得不偿失。...通常，我们会使用类似lodash中的防抖函数（或等效函数）来实现：或者我们可以使用在美丽的公主和它的27个React 自定义 Hook中的自定义hookuseDebounce。

3881 0

亲手打造属于你的 React Hooks

在这个循序渐进的指南中，我将通过分解我为自己的应用程序创建的三个钩子，以及创建这些钩子是为了解决什么问题，向您展示如何创建自己的自定义React钩子。...对于我创建的每个自定义 react 钩子，我都把它放在一个专门的文件夹中，通常称为 utils 或 lib，专门用于我可以在应用程序中重用的函数。...为此，我们可以使用一个媒体查询(CSS)，或者使用一个自定义的React钩子来提供当前页面的大小，并隐藏或显示JSX中的链接。以前，我使用的是一个名为react-use的库中的钩子。...useWindowSize 首先，我们将在utils文件夹中创建一个新的.js文件，与钩子useWindowSize同名。我将在导出自定义钩子的同时导入React(以使用钩子)。...在我的例子中，这是500px标记。

10.1K6 0

「前端架构」使用React进行应用程序状态管理

有一个状态管理解决方案，我个人一直在使用React，随着React钩子的发布（以及对React上下文的大量改进），这种状态管理方法已经大大简化。...很明显，对于真正全局的状态来说，这是很好的，但是对于简单状态（比如模态是开放的还是表单输入值状态），这是一个大问题。更糟糕的是，它的规模并不是很好。应用程序越大，这个问题就越难解决。...将所有应用程序状态都放在一个对象中也会导致其他问题，即使您没有使用Redux。当一个反应获取一个新值，使用该值的所有组件都将更新并必须呈现，即使它是只关心部分数据的函数组件。...这个问题的答案和反应本身一样古老（旧？）在我记事的时候，我就在文档里写了很久：提升状态 “提升国家”合法地回答了React中的国家管理问题，这是一个坚如磐石的答案。...这种方法的酷之处在于，我们可以将更新状态的常用方法的所有逻辑放在useCount钩子中： function useCount() { const context = React.useContext(CountContext

2.9K3 0

成为一名高级 React 需要具备哪些习惯，他们都习以为常

你可以尝试编写同步两个state 的代码，但这是一个容易出错的地方，而不是解决方案。这是一个在我们的待办事项列表应用程序上下文中重复状态的例子。...在对抗糟糕的渲染性能时，你最强大的武器是React.memo，它只在组件的道具更改时才重新呈现组件。这里的挑战是确保道具不会在每次渲染中改变，在这种情况下React。备忘录不起作用。...如果你没有使用React Hooks ESLint插件，你会很容易错过你的效果的一个依赖项，导致一个效果不能像它应该的那样经常运行。这个很容易修复——只需使用ESLint插件并修复警告。...Sass和其他CSS预处理器添加了一些非常棒的功能，但在很大程度上仍然存在与普通CSS相同的问题。我认为样式应该被定义为单独的React组件，CSS应该和React代码放在一起。...将CSS的范围限定在单个组件上，可以将组件重用为共享样式的主要方法，并防止样式意外应用到错误元素上的问题。

4.7K4 0

CSS + JS = JSS , 这个库你知道吗？

这样的结果就是，除了框架的 CSS，自己还要补充或覆盖很多样式。 CSS 通常就是单文件加上模板页面的标签，你覆盖我、我覆盖你，写到后面其实也就没有太多逻辑，就是堆叠。...是简单了，但也复杂了；即写起来简单了，但理解起来需要点基础：比如：rounded-lg 意味着☞ border-radius: 0.5rem; 言而总之，现在的样式表在前端开发中还是相对独立的，我们又试图找到一种合适的代码样式组织方式...这也就是 JSS 最大的好处，将 CSS 也纳入到组件化中。...同时，这个库也不大，压缩后才 6 KB；这个库，不是没人用，著名的 Material UI 框架就用过；只不过现在从 JSS 升级为了 TSS，原理是一样的。...：样式表通常很长，这样一加进组件的写法中，组件的代码量肯定会增加，如果 JSX 的代码有比较长的代码是样式，会不会也同样增加阅读负担？

7412 0

如何在React Native中添加自定义字体

在这篇指南中，我们将探索使用 Google Fonts 在 React Native 应用中添加自定义字体的方法。...将Google字体集成到项目中在你的项目根目录中创建一个名为 assets 的文件夹，并在其中创建一个名为 fonts 的子文件夹。...然后，将你之前从静态文件夹中复制的所有TTF文件粘贴到你的项目的 fonts 文件夹中：接下来，在根目录中创建一个 react-native.config.js 文件，并将下面的代码粘贴到其中：将字体链接到要在项目文件中使用...在我们的模拟器中看看这是什么样子：使用自定义字体假设你正在构建一个个人的 React Native 项目，并且你得到了一些自定义字体，这些字体并不在 Expo 支持的 Google 字体库中。...如果 fontsLoaded 不为真，即 useFonts 钩子中指定的字体没有成功加载，我们将返回一个 Loading… 文本。否则，我们渲染应用组件并使用已加载的自定义字体。

4991 0

husky 7 + lint-staged 11+ prettier 2 + eslint 7 配置

；不管是eslint还是commitizen，不过此处我们直接说一个全新没有任何沉淀的；下面的devDependencies涵盖了我们这次教程的所有依赖，这是最重要的一步～ { "name"...", }, 成功执行的化，功能根目录会存在一个.husky的目录；最新版的husky走的是标准的shell脚本（推荐姿势） commit-msg和pre-commit都是对应的钩子； commit-msg...', // eslint-config-prettier的标准用法，必须放在最后一个，用于关闭和eslint冲突规则 ], plugins: ['simple-import-sort', 'prettier...aspects: ['invalidHref', 'preferButton'], }, ], }, }; prettier配置（.prettierrc.json）哇哈哈，是不是很简陋...，就是暂存区内所有符合对应后缀的走对应的规则；比如代码的走了eslint和prettier，先规范，后格式化～比如样式的只走格式化～～比如其他prettier支持的必要文件也走一下格式化～ {

1.5K4 0

探索React Hooks：原来它们是这样诞生的！

所以请耐心听我从头说起... 2013：第一个React API： React 开发者不喜欢 mixins，这是共享逻辑的第一个 API。...无状态函数组件在同一时期，React 团队宣布了一种使用函数而不是类来创建组件的新方法。当时的主要想法是拥有一个仅接受属性并可以返回 JSX 的组件。...下面是一个使用自定义钩子共享数据获取逻辑的示例。你不必完全了解如何使用 useState 和 useEffect ，只需要了解它们为组件执行一些逻辑，我想共享它。...如果另一个组件也想根据 productId 获取产品，那么需要重新编写下面高亮的代码：这里是相同的逻辑移至自定义钩子。...如果你想要一个获取数据的自定义 Hook，推荐来自 React Query 的自定义钩子，名为 useQuery() 。如今，如果你愿意，你仍然可以使用类。如果你觉得它们更容易使用，那完全取决于你。

1.5K2 0

校招前端一面必会vue面试题指南3

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令// 指令使用的几种方式：//会实例化一个指令，但这个指令没有参数 `v-xxx`// -- 将值传到指令中...属性通过 genDirectives 生成指令代码在 patch 前将指令的钩子提取到 cbs 中,在 patch 过程中调用对应的钩子当执行指令对应钩子函数时，调用对应指令定义的方法说一下Vue的生命周期...Vue宣称可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。...这七种，只要这些方法执行改了数组内容，我就更新内容就好了，是不是很好理解。...o vnode 虚拟节点 o oldVnode：上一个虚拟节点（更新钩子函数中才有用）（2）使用场景普通DOM元素进行底层操作的时候，可以使用自定义指令自定义指令是用来操作DOM的。

3.2K3 0

如何学习 React - 有效的方法

什么是React？ React 是一个免费的开源前端 JavaScript 库，用于通过将您的应用程序划分为更小的组件来构建复杂的用户界面。它由 Facebook 和开发者社区维护。...在我学习 JavaScript 的时候，我认为我必须成为JavaScript的绝对高手才能编写 React 代码（这是无稽之谈）。我开始学习高级概念（作为初学者），失败了，我认为我不够好。...React router 是一个用于 React 的路由库，它将帮助您在 React 应用程序中浏览不同的页面。了解加载特定页面的内容、在 URL 中传递参数、重定向等。...API、React 路由器、自定义钩子 The Net Ninja 的完整现代 React 播放列表一些有用的提示不要试图一次学习所有内容，理解并接受您是初学者并花费足够的时间来学习这些概念的事实...不要害怕编写糟糕的代码。就像我之前提到的，你是一个初学者，在某些时候每个人都是。明白Progress >>>> Perfection 避免教程地狱。

5.4K2 0

一杯茶的时间，上手 Gatsby 搭建个人博客

我在修改 starter 时踩到一个坑是复制组件时忘了修改 static query 查询语句的名称，导致重名报错。避免错误最好方式是在 GraphiQL 编辑器中写好运行无误再复制到组件中。...Netlify CMS 的优点是开源免费，文章跟项目源码在一起，界面可以高度自定义，甚至可以自行扩充 React 组件，基本满足简单的博客编写需求。...配置预览 CMS 中提供了文章预览界面，如果需要自定义只需修改 /src/cms/ 下相应的文件即可，就是简单的 React 组件。...Gatsby 在生成 GraphQL 节点时提供了钩子 onCreateNode，我们利用这个钩子往 fields 中放自定义的数据。...这是[27]我的例子。通过实现这几个功能我们了解了 Gatsby 页面生成的方式以及其 Node APIs 的基本使用。

3.2K2 0

现代 React 开发必备的 13 个神库，路由、UI 组件库、拖拽、虚拟列表都齐了

Hi，大家好我 ssh，成为一个现代的 React 开发者，不仅需要理解 React 的核心概念，还需要对整个 React 生态系统了如指掌。...它有很多神奇的特性，可以让 React 中的数据 Fetch 和开发体验很丝滑。这些功能包括自动缓存、自动重新 Fetch、滚动恢复、Render-as-you-fetch 等。 2....MUI MUI Core 是一个 React 样式库，可以帮助你很快构建漂亮的 UI。...如果你的应用中使用了大量数据，这个库将非常有用。 12. React Suite React Suite是一个企业系统产品的 React 组件库集合。这是一个设计缜密并且对开发者友好的 UI 框架。...它不是一个 React 库，而是一个 CSS 样式框架，在 React 开发者中用于样式化应用程序的最受欢迎选项之一。

2.9K3 0

科普 | 一文详解 CSS-in-JS

现在 CSS-in-JS 确实也有点像当年的味道，虽然并不是唯一的解决方案，却提供了一个很大胆的想法和尝试。...在 React 和 Vue 日益吞噬的 Web 开发界中，组件化的思想和工程化日渐成熟，Atomic CSS 也算是比较早推出的一个设计思想，笔者觉得 Atomic CSS 能做的事情，在 CSS-in-JS...使用 CSS-in-JS 的优点组件化思考模式，不再需要维护一堆样式表。CSS-in-JS 将 CSS 模型抽象到组件级别，而不是文档级别（模块化）。...当 JSS 将 JSON 表示形式编译为 CSS 时，默认情况下会生成唯一的类名。动态浏览器私有化前缀，使用 CSS-in-JS 可以避免臃肿的 CSS 代码。...笔者因早前开发过自己的一套 React UI 库 React-UWP，也基于这套 UI 库做了 CSS-in-JS 的方案，在过去两年中在开发中虽然用的组件不是很多，但是用了 CSS-in-JS 来做整体的样式解决方案

3K2 0

阿里前端二面必会react面试题总结1

state、各种组件生命周期钩子等，但是在函数定义中，我们却无能为力，因此 React 16.8 版本推出了一个新功能 (React Hooks)，通过它，可以更好的在函数定义组件中使用 React...；自定义钩子(useXxxxx): 基于 Hooks 可以引用其它 Hooks 这个特性，我们可以编写自定义钩子，如上面的useMounted。...（5）都可以放在单独的HTML文件中，或者放在 Webpack设置的一个更复杂的模块中。（6）都有独立但常用的路由器和状态管理库。...对于异步请求，最好放在componentDidMount中去操作，对于同步的状态改变，可以放在componentWillMount中，一般用的比较少。...，这是React背后在做的事情，对于我们开发者来说，是透明的，具体是什么样的效果呢？

2.7K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭