QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

手机号码,快捷登录

手机号码,快捷登录

查看: 1491|回复: 0

[HTML/CSS/JS] 最值得推荐的8个顶级React库

[复制链接]

等级头衔

积分成就    金币 : 2857
   泡泡 : 1516
   精华 : 6
   在线时间 : 1315 小时
   最后登录 : 2025-1-28

丰功伟绩

优秀达人突出贡献荣誉管理论坛元老活跃会员

联系方式
发表于 2021-4-8 11:59:58 | 显示全部楼层 |阅读模式
       由于 React 生态系统变化得如此之快,跟进发生的一切事情是非常困难的。每天都会冒出新的库。你很有可能会错过一些非常棒的库。这就是为什么我要撰写本文,想将这些 React 库介绍给你。希望这些库能为你做一些繁重的工作,让你的生活更轻松一点!
. R$ `: [$ s) F4 r; M* I2 c2 c+ b2 D1. React Lazyload
$ w5 n7 H5 r8 N7 r) `4 R       当大多数开发人员想到懒加载时,他们通常想到图片。懒加载可以显著提高你的应用程序的性能。React Lazyload 库不仅在懒加载图片方面做的很好,而且在任何影响性能的方面也做的很好——例如,组件。8 b% `9 a' ^) V4 Q) J# Q" ~5 U
       这个库提供了许多选项来更改你的图片和组件的加载方式。这个库在 GitHub 上有 5K 个星星,是懒加载方面非常流行的一个选择。0 p1 o3 o, I6 v
2. React Responsive
( m- q1 d  g" ^3 G       React Responsive 库提供了一种方便的方法来在 React 中包含媒体查询。这个库同时提供了一个可以使用的钩子和一个组件——分别是 useMediaQuery 钩子和 MediaQuery 组件。0 Z0 I* B# x0 {! f) f$ f) a) f* t
       这个库允许你为你的应用程序创建可以轻松重用的特定断点。请看文档中的以下示例:
' i- s# o9 F& J- x 1.jpg
' J7 X1 K0 s- x( `       这个库可以在大多数现代浏览器上开箱即用。如果你想要支持比较老的浏览器版本,你需要添加兼容脚本(polyfills)。React Responsive 在 GitHub 上有 5K 多星星,如果你想要给你的应用程序添加响应式设计,你真应该试试这个库!0 J' a9 D$ L9 V# G0 \/ _
3. React Beautiful DnD( T- m( }4 {! b! s# w2 i5 V( l
       React Beautiful DnD(drag and drop,拖放)库是由 Atlassian 创建的,即 Jira 的开发商。这个库在 GitHub 上有 22K 多星星,是这个类目中最流行的库。4 Q4 ^6 [* ]4 F+ F! o/ [! t4 e+ L
       这个库不仅支持纵向和横向列表移动,还允许你在列表之间拖放列表项。这个库的特性清单几乎是无穷无尽的:它包括有条件的拖放,还支持鼠标、键盘和触摸屏。这是拖放领域目前为止最完善的库。
& V- [2 f7 z6 K' e" m8 F 2.jpg % u! ?: p5 m0 C5 e% l* P/ v" H
4. Styled Components
- \8 r3 C  `; h( `       Styled Components 库是这个类目中最流行的库,GitHub 上有超过 32K 的星星。这个库允许你在 React 组件中使用纯 CSS 设置你的组件样式。
0 J7 I1 q8 w0 U/ W$ e, {- @       这个库的优势之一是,它为你的样式生成唯一的类名。这样你就永远不需要担心类名重复、重叠或者拼写错误。除此之外,它还非常容易来创建动态样式。使用这个库,就再也不需要在文件之间切换,因为你在你的组件内部管理你的样式。
& ?" y# B1 J; H+ R; A1 o       下面是一个小例子,演示了创建你自己的样式化组件是多么简单:4 y+ w1 S4 n& _& Y6 Y/ e
3.jpg 9 b: Q0 d- _+ R) H
5. React Select
6 d. D' T2 |% t1 G4 `2 T       开箱即用,标准的 HTML 选择框的选项太局限,对用户并不友好。React Select 库解决了所有标准 HTML select 带来的问题。无论你是在寻找一个单选列表还是多选列表,这个库都能满足你!
8 f7 I9 L4 t2 }; [7 s* \8 C2 p6 G       我在自己的项目中经常使用这个库。这个库不仅允许你搜索列表项,还允许你动态添加选项。这个库另外非常棒的一点是它的可定制性。你可以彻底更改选择框的样式,也可以定制整个组件,如果你不喜欢开箱即用的组件的工作方式的话。
" S5 M2 a1 E# D9 {) J+ I1 `       这使得 React Select 库成为我的 React 选择框中的头号选择。
: ?* F- S9 Q  p2 _) M+ r0 ?4 D 4.jpg
* l8 n( n( Y1 D( N+ Q3 G6. React Helmet5 o: @5 O# {9 E) |
       React Helmet 库是目前为止你所得到的在修改网站 head 元素方面最好的库。这个库这么棒的原因之一是它对于经验较少的 React 开发者也非常容易理解。6 k) J# _* h: M) R- V1 u: b
       这个库支持所有合法 head 标签——从 title 标签到 meta 标签。其中一个非常棒的功能是,你可以覆盖嵌套组件中的重复的 head 更改。除此之外,React Helmet 还支持服务端渲染。
- T5 ]: G# }3 ^3 X9 A       在你的应用程序中集成 React Helmet 就是如此简单:
- l! `# |* c2 o' [& |6 m 5.jpg ; r; o6 p4 W) A, _
7. React Tooltip8 T' E  ^; J6 [
       如果你在 React 应用中需要工具提示,那么一定要看看 React Tooltip 库。它包含一系列选项,允许你更改你的工具提示的行为方式和样式。
8 l: b! q8 L7 Y# E4 ?6 v& S       React tooltip 允许在工具提示上显示纯文本和原始 HTML。注意,HTML 应该进行(sanitized)安全处理。这个库有一些钩子,例如 afterShow 和 afterHide 钩子,允许你自定义工具提示的行为。& C0 B' ^; d/ ]3 N9 n
       这个库有超过 25 个选项,几乎不可能满足不了你的需求。这个库在 GitHub 上有 2K 多一点星星。. p1 I5 v" z$ `% O9 \' j9 @' e
6.jpg - `/ u% Z2 F. N, f7 W
8. React Markdown, \2 `4 ]5 [- n& |2 E
       最后介绍的库是 React Markdown。这个库在 GitHub 上有 6.5K 星星,这绝对是一个非常受欢迎的库。这个库与其它库的区别之一是,其它库通常依赖 dangerouslySetInnerHTML 或者在处理 markdown 时有问题。
$ y4 }. d$ ^$ q( A7 M- F- g# e       你可以通过添加插件来扩展 React Markdown 的功能。例如,你可以使用提供表格、任务清单、删除线和 URL 功能的插件。4 s8 K. o7 D. G, r3 L% P
       React Markdown 就是这么方便使用:
/ A; p# J0 Z0 |$ e 7.jpg
& y  \, D- q$ q3 m: `4 o. s1 a3 X% |! w# P) a/ Q
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|paopaomj.COM ( 渝ICP备18007172号|渝公网安备50010502503914号 )

GMT+8, 2025-1-30 13:55

Powered by paopaomj X3.5 © 2016-2025 sitemap

快速回复 返回顶部 返回列表