React和Preact 这样处理className更优雅

最新推荐文章于 2024-07-23 22:00:09 发布
最新推荐文章于 2024-07-23 22:00:09 发布
阅读量558 收藏 9
点赞数 8
文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zshsats/article/details/134890948
版权

React和Preact写className，我不太习惯使用模板字符串，不好看，看起来也不直观，写了如下两个库： react-runtime-clsx 和 preact-runtime-clsx，来辅助开发，可以更方便的处理className的问题，下面就介绍一下如何使用他们，来达到更高效便捷的开发

使用这两个库的优点：

1. 像Vue的:class 指令一样，不需要模板字符串

2.不需要再头部引入react和preact

3.不需要外部在依赖clsx库，在ES中可以使用react-runtime-clsx 和 preact-runtime-clsx 的clsx方法

如何使用呢，详情可参考我的文章：React和Preact 这样处理className更优雅

优资园
关注
  • 8
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jsxstyle：用于React和Preact的内联样式系统
02-05
jsxstyle是用于React和Preact的内联样式系统。 它在不牺牲性能的情况下提供了一流的开发人员体验。 样式以内联方式编写在jsxstyle导出的一组特殊组件上。 这些组件上的内联样式将转换为CSS规则，并根据需要直接...
store-adapter:将商店和可变源连接到React和Preact的正确方法
04-06
在React和Preact这样的库中，管理状态是应用程序的核心部分。`store-adapter`是一个解决方案，旨在帮助开发者更有效地连接商店（通常是包含应用全局状态的数据存储）与组件，特别是考虑到可变源的需求。这个库提供了...
React-classnames库
热门推荐
多啦的博客
05-10 1万+
react原生动态添加多个className会报错
Preact 在TSX中优雅使用className
zshsats博客
10-02 818
# 背景简介 vue的class处理很方便，React中className中JSX却没有去很好的处理class，之后便出来了react-auto-classnames 可以像vue一样去写class，这样就大大提高了开发的效率，随着preact中不断的广泛应用，便编写了preact插件来自动取处理className。即preact-auto-clsx
React项目开发过程中需要注意避免re-render——React性能优化方案
winne雪
04-01 1837
1、PureComponent和shouldComponentUpdate 2、多挖掘能使用useRef的地方 3、正确使用useEffect的第二个参数 4、使用React.memo来控制整个函数组件的渲染时机 5、使用 useMemo() 进行细粒度性能优化 6、useCallback 7、避免更改你正用于 props 或 state 的值 8、合理拆分组件 9、其他非re-render的性能优化点
深入理解 react-router 路由系统
冰雪为融的博客
05-18 407
在 web 应用开发中，路由系统是不可或缺的一部分。在浏览器当前的 URL 发生变化时，路由系统会做出一些响应，用来保证用户界面与 URL 的同步。随着单页应用时代的到来，为之服务的前端路由系统也相继出现了。有一些独立的第三方路由系统，比如 director，代码库也比较轻量。当然，主流的前端框架也都有自己的路由，比如 Backbone、Ember、Angular、React 等等。那 react...
react-hint:用于React，Preact，Inferno的工具提示组件
05-01
React提示 React，提示是一个小的提示成分，其中考虑了简单和性能开发。 在和也可以很好地发挥作用。如何安装npm i -S react-hint如何汇入// Reactimport React from 'react'import ReactHintFactory from 'react-...
virtual-dom：关于Vue，React，Preact和Omi等框架源码的解读
02-06
这样可以在一个事件处理函数内多次改变状态，而只会触发一次DOM更新，进一步提高了性能。 总结起来，虚拟DOM是现代前端开发中的关键技术，它通过高效地计算并应用DOM变更，提高了用户界面的响应速度。React、Vue、...
merge-props:合并React元素的className，样式和事件处理程序道具
05-16
合并道具 通过以下规则合并React className ， style和事件处理程序（ onClick ， onFocus ， on{LiterallyEveryEvent} ）： className道具是串联的style道具浅层合并，之后的值优先函数从左到右依次运行。...
react中配置路径别名@
kanno的博客
07-23 197
react中配置路径别名@。在react项目中想要使用@代替“src/”需要在项目根目录下配置两个文件，craco.config.js和sconfig.json；
浏览器的卡顿与react的解决思路
weixin_45575944的博客
07-18 465
众所都周知，js是单线程，当react处理vdom相关工作的时候，会阻塞浏览器的渲染过程，阻塞了渲染过程，那么页面就卡着。结合上面所述，1秒60hz，相当于16.67ms至少需要渲染出1张新图，才不会觉的卡顿。我理解这里的卡顿，并不是说优化的怎么怎么好让总工作量少了，处理的快了，而是可能虽然每次渲染出来的新内容少，但是他仍然在生成，而不会在处理过程中一直不变，然后突然渲染出来，这种抖动的、掉帧的渲染方式，容易让人觉的他卡了，而一直在变化，虽然每次变化的不多，但总体是‘流畅的’
React--JavaScript 的模块导出和导入机制
weixin_46520767的博客
07-23 258
JavaScript 的模块导出和导入机制，尤其是在使用 ES6 模块语法时。让我们详细解释这个过程，并解决你关于导出和导入的疑问。
HOW - React 处理不紧急的更新和渲染
weixin_58540586的博客
07-21 730
在 React 中，有一些钩子函数可以帮助你处理不紧急的更新或渲染，从而优化性能和用户体验。
taro react写法
Z_Wonderful的博客
07-23 149
使用yarn:需要自己配置环境变量（为了在系统上全局使用）微信小程序编译命令。
React--Redux
weixin_46520767的博客
07-23 485
Redux 是一个用于 JavaScript 应用的状态管理库，特别是在 React 应用中非常流行。下面我将详细介绍一个使用 Redux 的简单案例，包括设置 Redux 环境、创建 store、定义 actions 和 reducers，以及如何连接 React 组件。
web前端 React 框架面试200题（三）
柯晓楠
07-21 490
纯组件是可以编写的最简单和最快的组件。它们可以替换任何只有 render() 的组件。这些组件增强了代码的简单性和应用程序的性能。Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性在JSX表达式中，一个开始标签(比如)和一个关闭标签(比如)之间的内容会作为一个特殊的属性props.children被自动传递给包含着它的组件。
React中引入使用本地图片
qq_39460057的博客
07-23 277
先安装插件:vite-plugin-require-transform。在vite.config.js中配置。，因为打包后，项目结构会变化。
react的合成事件
最新发布
feixin369的博客
07-23 452
React合成事件 在看之前先看一下这几个问题 原生事件和合成事件的执行顺序是什么？ 合成事件在什么阶段下会被执行？ 阻止原生事件的冒泡，会影响到合成事件的执行吗？ 阻止合成事件的冒泡，会影响到原生事件的执行吗？
react classname
07-27
在React中，你可以使用`className`属性来添加CSS类名到元素。以下是一个示例： ```jsx import React from 'react'; function MyComponent() { return ( <div className="my-classname"> Hello, World! ); } ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值