设为首页收藏本站
立即注册 找回密码

QQ登录

只需要一步，快速开始

APP扫码登录

只需要一步，快速开始

手机号码，快捷登录

手机号码，快捷登录

快捷导航
  • 优惠福利
  • 美食天下
  • 旅游户外
  • 亲子乐园
  • 编程源码
  • 金典软件
  • 视频教学
  • 文档资料
  • 修改头像
  • 我的积分
  • 修改密码
  • 个人资料
  • 推广奖励
  • 改用户名
    • 泡泡马甲»泡泡马甲 › 分类导航 › 编程源码 › 最值得推荐的8个顶级React库
    返回列表 发新帖
    查看: 1424|回复: 0

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

    [复制链接]
    admin

    等级头衔

    积分成就    金币 : 2841
       泡泡 : 1516
       精华 : 6 篇
       在线时间 : 1294 小时
       最后登录 : 2024-11-21

    丰功伟绩

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

    联系方式
    发表于 2021-4-8 11:59:58 | 显示全部楼层 |阅读模式
    ⏹ 阅读停止中
           由于 React 生态系统变化得如此之快，跟进发生的一切事情是非常困难的。每天都会冒出新的库。你很有可能会错过一些非常棒的库。这就是为什么我要撰写本文，想将这些 React 库介绍给你。希望这些库能为你做一些繁重的工作，让你的生活更轻松一点！  }, S# @% X* g5 ?9 D8 Q; ~! f  r
    1. React Lazyload
    ' T+ y$ y  A2 t  j7 Q       当大多数开发人员想到懒加载时，他们通常想到图片。懒加载可以显著提高你的应用程序的性能。React Lazyload 库不仅在懒加载图片方面做的很好，而且在任何影响性能的方面也做的很好——例如，组件。
    8 U1 ?: @; H% p- M" D) |) A9 u3 a       这个库提供了许多选项来更改你的图片和组件的加载方式。这个库在 GitHub 上有 5K 个星星，是懒加载方面非常流行的一个选择。* ~3 I% R* s- f* H" b- t" g3 n& C" A
    2. React Responsive
    7 f3 H! u; a6 \+ ?) B2 K- y       React Responsive 库提供了一种方便的方法来在 React 中包含媒体查询。这个库同时提供了一个可以使用的钩子和一个组件——分别是 useMediaQuery 钩子和 MediaQuery 组件。
    ) `6 a% t2 J# o9 t1 i+ z       这个库允许你为你的应用程序创建可以轻松重用的特定断点。请看文档中的以下示例：
    1 u4 V: L+ p; J) @8 @1 | 1.jpg
    % i$ E* Y0 J# k; F0 B/ E. Q8 }+ S6 G0 k       这个库可以在大多数现代浏览器上开箱即用。如果你想要支持比较老的浏览器版本，你需要添加兼容脚本（polyfills）。React Responsive 在 GitHub 上有 5K 多星星，如果你想要给你的应用程序添加响应式设计，你真应该试试这个库！9 D# ?0 g1 @* i  I1 ]( p
    3. React Beautiful DnD9 a" X/ L4 M  z
           React Beautiful DnD（drag and drop，拖放）库是由 Atlassian 创建的，即 Jira 的开发商。这个库在 GitHub 上有 22K 多星星，是这个类目中最流行的库。
    & f/ r% g2 P  y( Q& D       这个库不仅支持纵向和横向列表移动，还允许你在列表之间拖放列表项。这个库的特性清单几乎是无穷无尽的：它包括有条件的拖放，还支持鼠标、键盘和触摸屏。这是拖放领域目前为止最完善的库。: B! x; Z( B7 {( k) }
    2.jpg + }! R$ l/ C9 Q; s
    4. Styled Components. O8 |' Q7 Z4 Q0 I; H' t  U
           Styled Components 库是这个类目中最流行的库，GitHub 上有超过 32K 的星星。这个库允许你在 React 组件中使用纯 CSS 设置你的组件样式。
    4 N/ e" P% u' y/ G( Z       这个库的优势之一是，它为你的样式生成唯一的类名。这样你就永远不需要担心类名重复、重叠或者拼写错误。除此之外，它还非常容易来创建动态样式。使用这个库，就再也不需要在文件之间切换，因为你在你的组件内部管理你的样式。, |8 h0 d3 X+ q5 c8 u* F9 f
           下面是一个小例子，演示了创建你自己的样式化组件是多么简单：& I7 ]3 [7 Z. d/ @- |& {
    3.jpg / O* E% M5 q$ q: @1 F7 H
    5. React Select  F9 R2 \; `3 F. [- a
           开箱即用，标准的 HTML 选择框的选项太局限，对用户并不友好。React Select 库解决了所有标准 HTML select 带来的问题。无论你是在寻找一个单选列表还是多选列表，这个库都能满足你！
    9 E- J- j! m' j$ i" v* C" [5 a       我在自己的项目中经常使用这个库。这个库不仅允许你搜索列表项，还允许你动态添加选项。这个库另外非常棒的一点是它的可定制性。你可以彻底更改选择框的样式，也可以定制整个组件，如果你不喜欢开箱即用的组件的工作方式的话。  s4 @. O: o8 G% i3 e
           这使得 React Select 库成为我的 React 选择框中的头号选择。, P0 ?$ f' n* ~4 ^: r. v
    4.jpg
    0 W6 \: R% Q" \" L1 y+ B) w6. React Helmet" b' O+ L/ N- w, D# w( S5 m1 K
           React Helmet 库是目前为止你所得到的在修改网站 head 元素方面最好的库。这个库这么棒的原因之一是它对于经验较少的 React 开发者也非常容易理解。
    ! F, q( a# g$ G  m9 ^3 H       这个库支持所有合法 head 标签——从 title 标签到 meta 标签。其中一个非常棒的功能是，你可以覆盖嵌套组件中的重复的 head 更改。除此之外，React Helmet 还支持服务端渲染。* V1 N6 ^1 ?; r" d2 ^. l* Q5 m" L
           在你的应用程序中集成 React Helmet 就是如此简单：
    9 Z" V1 i( m6 W# I 5.jpg
    4 l  s0 v$ }7 X4 D5 c9 |% Q7. React Tooltip0 l; D$ `0 y5 t2 k+ e
           如果你在 React 应用中需要工具提示，那么一定要看看 React Tooltip 库。它包含一系列选项，允许你更改你的工具提示的行为方式和样式。
    ( y/ U9 {6 n, W( l! q       React tooltip 允许在工具提示上显示纯文本和原始 HTML。注意，HTML 应该进行（sanitized）安全处理。这个库有一些钩子，例如 afterShow 和 afterHide 钩子，允许你自定义工具提示的行为。# C/ x4 l* r4 g% t' P+ t# c/ ^$ A
           这个库有超过 25 个选项，几乎不可能满足不了你的需求。这个库在 GitHub 上有 2K 多一点星星。
    6 |7 U( I! k6 q; p) ] 6.jpg
    5 [1 Q0 W+ g9 b' c8. React Markdown
    * B- U% c" v  c# S       最后介绍的库是 React Markdown。这个库在 GitHub 上有 6.5K 星星，这绝对是一个非常受欢迎的库。这个库与其它库的区别之一是，其它库通常依赖 dangerouslySetInnerHTML 或者在处理 markdown 时有问题。
    / {& ], X9 f9 V- x% u       你可以通过添加插件来扩展 React Markdown 的功能。例如，你可以使用提供表格、任务清单、删除线和 URL 功能的插件。
    - S+ O) ]' z4 ~       React Markdown 就是这么方便使用：6 }0 H  h. S% X: o
    7.jpg # }$ ~8 \2 }# W8 i

    % Y: D0 ], W& @6 G6 u
    推荐, 应用, 库, 系统, 加载

    相关帖子
    回复

    举报

    返回列表 发新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

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

    GMT+8, 2024-11-22 02:03

    Powered by paopaomj X3.5 © 2016-2025 sitemap

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