讯享网

                <p class="f_center"> <img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0918%2Fbbf37b5ej00qzm702000wd200u000gwg01hc00u0.jpg&thumbnail=660x2147483647&quality=80&type=jpg"/><br/></p><p id="095IMHFN"> <strong>导读：</strong>如果你正在用 React.js 或 React Native 来开发用户界面的话，试试这些框架。　 　</p><p id="095IMHFO"> 本文字数：7739，阅读时长大约： 9分钟</p><p id="095IMHFS"> https://linux.cn/article-13796-1.html<br/>作者：Amit Dua<br/>译者：zpl1025<br/></p><p id="095IMHFT">React.js 和 React Native 都是用来开发用户界面（UI）的很受欢迎的开源平台。在 StackOverflow 2019 年度开发者调查里，两个框架的可取性和使用情况都排名靠前。React.js 是 Facebook 在 2011 年开发的一个 JavaScript 库，来实现跨平台，动态以及高性能的 UI 设计需求；而 React Native 则是 Facebook 在 2015 年发布的框架，目的是使用 JavaScript 构建原生应用。</p><p id="095IMHFU">下面介绍 13 个最好的 React JavaScript 框架，都是开源项目。前 11 个（和 React 一样）都使用 MIT 许可证授权，后面两个使用 Apache 2.0 许可证。</p><p id="095IMHFV">1、Create React App</p><p id="095IMHG0">这个 Facebook 开发的命令行工具是 React Native 项目一定要用的。因为 github.com 使用很简单，还可以避免你自己手动设定和配置应用，因此能节省大量的时间和精力。仅仅使用给一个简单的命令，就可以为你准备好创建 React 原生项目所需的一切。你可以用它来创建分类和文件，而且该框架还自带了工具用来构建，测试和启动应用。</p><p><ol><li id="095IMI3G"></p><p id="095IMHG1"> </p><p></li><li id="095IMI3H"></p><p id="095IMHG2"> </p><p></li><li id="095IMI3I"></p><p></li><li id="095IMI3J"></p><p id="095IMHG4"> </p><p></li><li id="095IMI3K"></p><p id="095IMHG5"> </p><p></li><li id="095IMI3L"></p><p></li><li id="095IMI3M"></p><p id="095IMHG7"> </p><p></li><li id="095IMI3N"></p><p id="095IMHG8"> </p><p></li><li id="095IMI3O"></p><p></li><li id="095IMI3P"></p><p id="095IMHGA"> </p><p></li><li id="095IMI3Q"></p><p id="095IMHGB"> </p><p></li><li id="095IMI3R"></p><p id="095IMHGC"> </p><p></li><li id="095IMI3S"></p><p></li><li id="095IMI3T"></p><p id="095IMHGE"> </p><p></li><li id="095IMI3U"></p><p id="095IMHGF"> </p><p></li><li id="095IMI3V"></p><p></li><li id="095IMI40"></p><p id="095IMHGH"> </p><p></li><li id="095IMI41"></p><p id="095IMHGI"> </p><p></li></ol></p><p id="095IMHGJ">为什么选择 Create React App</p><p id="095IMHGK"> 1. 使用配置包、转码器，以及测试运行器进行开发的一流工具</p><p id="095IMHGL"> 2. 在应用架构里不需要配置以及没有额外文件</p><p id="095IMHGM"> 3. 确定的开发栈</p><p id="095IMHGN"> 4. 高效快速的开发工具</p><p id="095IMHGO">2、Material Kit React</p><p id="095IMHGP"> github.com 是受谷歌的 Material Design 系统启发开发的，很适合用来创建 React UI 组件。这个库最大的优点是提供了大量的组件，可以互相搭配做出非常好的效果。有超过一千个完全编码的组件，每一个都有用文件夹组织起来的独立层。这样你就可以有上千个选项可以选择。它同时也包含一些示例页面，方便你从中寻找灵感，或者向别人分享你的点子或创意。</p><p id="095IMHGQ">安装 Material Kit</p><p><ol><li id="095IMI42"></p><p id="095IMHGR"> </p><p></li></ol></p><p id="095IMHGS">使用</p><p><ol><li id="095IMI43"></p><p id="095IMHGT"> </p><p></li><li id="095IMI44"></p><p id="095IMHGU"> </p><p></li><li id="095IMI45"></p><p></li><li id="095IMI46"></p><p id="095IMHH0"> </p><p></li><li id="095IMI47"></p><p></li><li id="095IMI48"></p><p id="095IMHH4"> </p><p></li><li id="095IMI49"></p><p id="095IMHH5"> </p><p></li><li id="095IMI4A"></p><p id="095IMHH6"> </p><p></li></ol></p><p id="095IMHH7">Material-UI 组件不需要其他额外设置，也不会干扰全局变量空间。</p><p id="095IMHH8">优点</p><p id="095IMHH9">这个 React 组件支持简易快速的网页开发。你可以用它创建自己的设计系统，或者直接开始 Material Design。</p><p id="095IMHHA">3、Shards React</p><p id="095IMHHB">这个现代的 React UI 工具为了追求高效率，是从最底层开始构建的。它拥有现代的设计系统，可以让你按自己的想法任意定制。你甚至可以下载源文件，然后从代码级别定制。另外，它用来设计样式的 SCSS 语法提高了开发体验。</p><p id="095IMHHC"> github.com 基于 Shards，使用了 React Datepicker、React Popper（一个定位引擎）和 noUISlider。还带有非常优秀的 Material Design 图标。还有很多设计好的版本，可以帮你寻找灵感或上手。</p><p id="095IMHHD">用 Yarn 或 NPM 安装 Shards</p><p><ol><li id="095IMI4B"></p><p id="095IMHHE"> </p><p></li><li id="095IMI4C"></p><p id="095IMHHF"> </p><p></li><li id="095IMI4D"></p><p></li><li id="095IMI4E"></p><p id="095IMHHH"> </p><p></li><li id="095IMI4F"></p><p id="095IMHHI"> </p><p></li></ol></p><p id="095IMHHJ">优点</p><p id="095IMHHK"> 1. Shards 是一个轻量级的脚本，压缩后大概 13kb</p><p id="095IMHHL"> 2. Shards 默认支持响应式，图层可以适配任意大小屏幕</p><p id="095IMHHM"> 3. Shards 有完整的文档，可以快速开始构建漂亮的界面</p><p id="095IMHHN">4、Styled Components</p><p id="095IMHHO">这个高效的 CSS 工具可以用来为应用的可视界面创建小型可重用的组件。使用传统的 CSS，你可能会不小心覆盖掉网站其他位置的选择器，但 github.com 通过使用直接内嵌到组件里的 CSS 语法，可以完全避免这个问题。</p><p id="095IMHHP">安装</p><p><ol><li id="095IMI4G"></p><p id="095IMHHQ"> </p><p></li></ol></p><p id="095IMHHR">使用</p><p><ol><li id="095IMI4H"></p><p id="095IMHHS"> </p><p></li><li id="095IMI4I"></p><p id="095IMHHT"> </p><p></li><li id="095IMI4J"></p><p id="095IMHHU"> </p><p></li><li id="095IMI4K"></p><p id="095IMHHV"> </p><p></li><li id="095IMI4L"></p><p id="095IMHI0"> </p><p></li><li id="095IMI4M"></p><p id="095IMHI1"> </p><p></li><li id="095IMI4N"></p><p id="095IMHI2"> </p><p></li></ol></p><p id="095IMHI3">优点</p><p id="095IMHI4"> 1. 让组件有更好的可读性</p><p id="095IMHI5"> 2. 组件样式依赖 JavaScript</p><p id="095IMHI6"> 3. 创建定制 CSS 组件</p><p id="095IMHI7"> 4. 内嵌样式</p><p id="095IMHI8"> 5. 简单地调用  可以将组件甚至是自定义组件转换成样式组件</p><p id="095IMHI9">5、Redux</p><p id="095IMHIA"> github.com 是一个为 JavaScript 应用提供状态管理的方案。常用于 React.js，也可以用在其他类 React 框架里。</p><p id="095IMHIB">安装</p><p><ol><li id="095IMI4O"></p><p id="095IMHIC"> </p><p></li><li id="095IMI4P"></p><p id="095IMHID"> </p><p></li></ol></p><p id="095IMHIE">使用</p><p><ol><li id="095IMI4Q"></p><p id="095IMHIF"> </p><p></li><li id="095IMI4R"></p><p id="095IMHIG"> </p><p></li><li id="095IMI4S"></p><p></li><li id="095IMI4T"></p><p id="095IMHII"> </p><p></li><li id="095IMI4U"></p><p id="095IMHIJ"> </p><p></li><li id="095IMI4V"></p><p id="095IMHIK"> </p><p></li><li id="095IMI50"></p><p></li><li id="095IMI51"></p><p id="095IMHIM"> </p><p></li></ol></p><p id="095IMHIN">优点</p><p id="095IMHIO"> 1. 可预计的状态更新有助于定义应用里的数据流</p><p id="095IMHIP"> 2. 逻辑上测试更简单，使用 reducer 函数进行时间旅行调试也更容易</p><p id="095IMHIQ"> 3. 统一管理状态</p><p id="095IMHIR">6、React Virtualized</p><p id="095IMHIS">这个 React Native JavaScript 框架帮助渲染 large-list 和 tabular-data。使用 github.com，你可以限制请求和文档对象模型（DOM）元素的数量，从而提高 React 应用的性能。</p><p id="095IMHIT">安装</p><p><ol><li id="095IMI52"></p><p id="095IMHIU"> </p><p></li></ol></p><p id="095IMHIV">使用</p><p><ol><li id="095IMI53"></p><p id="095IMHJ0"> </p><p></li><li id="095IMI54"></p><p id="095IMHJ1"> </p><p></li><li id="095IMI55"></p><p id="095IMHJ2"> </p><p></li><li id="095IMI56"></p><p id="095IMHJ3"> </p><p></li><li id="095IMI57"></p><p id="095IMHJ4"> </p><p></li><li id="095IMI58"></p><p id="095IMHJ5"> </p><p></li><li id="095IMI59"></p><p id="095IMHJ6"> </p><p></li><li id="095IMI5A"></p><p id="095IMHJ7"> </p><p></li><li id="095IMI5B"></p><p id="095IMHJ8"> </p><p></li><li id="095IMI5C"></p><p id="095IMHJ9"> </p><p></li></ol></p><p id="095IMHJA">优点</p><p id="095IMHJB"> 1. 高效展示大量数据</p><p id="095IMHJC"> 2. 渲染超大数据集</p><p id="095IMHJD"> 3. 使用一系列组件实现虚拟渲染</p><p id="095IMHJE">7、React DnD</p><p id="095IMHJF"> github.com 用来创建复杂的拖放界面。拖放控件库有很多，选用 React DnD 是因为它是基于 HTML5 的拖放 API 的，创建界面更简单。</p><p id="095IMHJG">安装</p><p><ol><li id="095IMI5D"></p><p id="095IMHJH"> </p><p></li></ol></p><p id="095IMHJI">使用</p><p><ol><li id="095IMI5E"></p><p id="095IMHJJ"> </p><p></li><li id="095IMI5F"></p><p></li><li id="095IMI5G"></p><p id="095IMHJL"> </p><p></li><li id="095IMI5H"></p><p id="095IMHJM"> </p><p id="095IMI3F"></p><p></li><li id="095IMI5I"></p><p id="095IMHJO"> </p><p></li><li id="095IMI5J"></p><p></li><li id="095IMI5K"></p><p id="095IMHJQ"> </p><p></li><li id="095IMI5L"></p><p id="095IMHJR"> </p><p></li><li id="095IMI5M"></p><p id="095IMHJS"> </p><p></li><li id="095IMI5N"></p><p id="095IMHJT"> </p><p></li><li id="095IMI5O"></p><p></li><li id="095IMI5P"></p><p></li><li id="095IMI5Q"></p><p></li><li id="095IMI5R"></p><p id="095IMHK1"> </p><p></li><li id="095IMI5S"></p><p id="095IMHK2"> </p><p></li><li id="095IMI5T"></p><p id="095IMHK3"> </p><p></li><li id="095IMI5U"></p><p id="095IMHK4"> </p><p></li><li id="095IMI5V"></p><p id="095IMHK5"> </p><p></li><li id="095IMI60"></p><p id="095IMHK6"> </p><p></li></ol></p><p id="095IMHK7">优点</p><p id="095IMHK8"> 1. 漂亮自然的控件移动</p><p id="095IMHK9"> 2. 强大的键盘和屏幕阅读支持</p><p id="095IMHKA"> 3. 极限性能</p><p id="095IMHKB"> 4. 强大整洁的接口</p><p id="095IMHKC"> 5. 标准浏览器支持非常好</p><p id="095IMHKD"> 6. 中性样式</p><p id="095IMHKE"> 7. 没有额外创建 DOM 节点</p><p id="095IMHKF">8、React Bootstrap</p><p id="095IMHKG">这个 UI 库将 Bootstrap 的 JavaScript 替换成了 React，可以更好地控制每个组件的功能。每个组件都构建成能轻易访问，因此 github.com 有利于构建前端框架。有上千种 bootstrap 主题可以选择。</p><p id="095IMHKH">安装</p><p><ol><li id="095IMI61"></p><p id="095IMHKI"> </p><p></li></ol></p><p id="095IMHKJ">使用</p><p><ol><li id="095IMI62"></p><p id="095IMHKK"> </p><p></li><li id="095IMI63"></p><p id="095IMHKL"> </p><p></li><li id="095IMI64"></p><p id="095IMHKM"> </p><p></li><li id="095IMI65"></p><p id="095IMHKN"> </p><p></li><li id="095IMI66"></p><p id="095IMHKO"> </p><p></li><li id="095IMI67"></p><p id="095IMHKP"> </p><p></li><li id="095IMI68"></p><p></li><li id="095IMI69"></p><p id="095IMHKR"> </p><p></li><li id="095IMI6A"></p><p id="095IMHKS"> </p><p></li></ol></p><p id="095IMHKT">优点</p><p id="095IMHKU"> 1. 可以简单导入所需的代码/组件</p><p id="095IMHKV"> 2. 通过压缩 Bootstrap 节省了输入和问题</p><p id="095IMHL0"> 3. 通过压缩 Bootstrap 减少了输入工作和冲突</p><p id="095IMHL1"> 4. 使用简单</p><p id="095IMHL2"> 5. 使用元素封装</p><p id="095IMHL3">9、React Suite</p><p id="095IMHL4"> github.com 是另一个高效的 React.js 框架，包含了大量组件库，方便开发企业级产品。支持所有主流浏览器和平台，适用于任何系统。还支持服务器端渲染。</p><p id="095IMHL5">安装</p><p><ol><li id="095IMI6B"></p><p id="095IMHL6"> </p><p></li></ol></p><p id="095IMHL7">使用</p><p><ol><li id="095IMI6C"></p><p id="095IMHL8"> </p><p></li><li id="095IMI6D"></p><p id="095IMHL9"> </p><p></li><li id="095IMI6E"></p><p id="095IMHLA"> </p><p></li></ol></p><p id="095IMHLD">优点</p><p id="095IMHLE"> 1. 通过全局访问特性轻松管理应用</p><p id="095IMHLF"> 2. 使用 Redux 库集中管理系统状态</p><p id="095IMHLG"> 3. Redux 库有灵活的 UI 层，以及广泛的生态</p><p id="095IMHLH"> 4. Redux 库减少系统复杂度，并提供了全局访问特性</p><p id="095IMHLI">10、PrimeReact</p><p id="095IMHLJ"> github.com 最值得推荐的是它提供了几乎覆盖所有基本 UI 需求的组件，比如输入选项，菜单，数据展示，消息，等等。这个框架还优化了移动体验，帮助你设计触摸优化的元素。</p><p id="095IMHLK">安装</p><p><ol><li id="095IMI6F"></p><p id="095IMHLL"> </p><p></li><li id="095IMI6G"></p><p id="095IMHLM"> </p><p></li></ol></p><p id="095IMHLN">使用</p><p><ol><li id="095IMI6H"></p><p id="095IMHLO"> </p><p></li><li id="095IMI6I"></p><p id="095IMHLP"> </p><p></li><li id="095IMI6J"></p><p id="095IMHLQ"> </p><p></li><li id="095IMI6K"></p><p id="095IMHLR"> </p><p></li><li id="095IMI6L"></p><p id="095IMHLS"> </p><p></li><li id="095IMI6M"></p><p id="095IMHLT"> </p><p></li><li id="095IMI6N"></p><p id="095IMHLU"> </p><p></li><li id="095IMI6O"></p><p id="095IMHLV"> </p><p></li><li id="095IMI6P"></p><p id="095IMHM0"> </p><p></li></ol></p><p id="095IMHM1">优点</p><p id="095IMHM2"> 1. 简单而高效</p><p id="095IMHM3"> 2. 容易使用</p><p id="095IMHM4"> 3. Spring 应用</p><p id="095IMHM5"> 4. 创建复杂用户界面</p><p id="095IMHM6"> 5. 好用而简单</p><p id="095IMHM7">11、React Router</p><p id="095IMHM8"> github.com 在 React Native 开发社区很受欢迎，因为它上手很容易。只需要你在电脑上安装 Git 和 npm 包管理工具，有 React 的基础知识，以及好学的意愿。没什么特别难的地方。</p><p id="095IMHM9">安装</p><p><ol><li id="095IMI6Q"></p><p id="095IMHMA"> </p><p></li></ol></p><p id="095IMHMB">使用</p><p><ol><li id="095IMI6R"></p><p id="095IMHMC"> </p><p></li><li id="095IMI6S"></p><p></li><li id="095IMI6T"></p><p id="095IMHME"> </p><p></li><li id="095IMI6U"></p><p id="095IMHMF"> </p><p></li><li id="095IMI6V"></p><p id="095IMHMG"> </p><p></li><li id="095IMI70"></p><p id="095IMHMH"> </p><p></li></ol></p><p id="095IMHMI">优点</p><p id="095IMHMJ"> 1. 动态路由匹配</p><p id="095IMHMK"> 2. 在导航时支持不同页面的 CSS 切换</p><p id="095IMHML"> 3. 统一的应用结构和行为</p><p id="095IMHMM">12、Grommet</p><p id="095IMHMN"> github.com 常用于开发响应式、可访问的移动网页应用。这个用 Apache 2.0 许可证授权的 JavaScript 框架最大的优点是用很小的包提供了可访问性、模块化、响应式以及主题功能。这可能是它被一些公司广泛使用的主要原因，比如奈飞、通用电气、优步以及波音。</p><p id="095IMHMO">安装 for yarn and npm</p><p><ol><li id="095IMI71"></p><p id="095IMHMP"> </p><p></li></ol></p><p id="095IMHMQ">使用</p><p><ol><li id="095IMI72"></p><p id="095IMHMR"> </p><p></li><li id="095IMI73"></p><p id="095IMHMS"> </p><p></li><li id="095IMI74"></p><p id="095IMHMT"> </p><p></li><li id="095IMI75"></p><p id="095IMHMU"> </p><p></li></ol></p><p id="095IMHMV">优点</p><p id="095IMHN0"> 1. 创建一个工具包来打包</p><p id="095IMHN1"> 2. 把开放政策发挥到极致</p><p id="095IMHN2"> 3. 重构有助于影响已成立的组织</p><p id="095IMHN3">13、Onsen UI</p><p id="095IMHN4"> github.com 另一个使用 HTML5 和 JavaScript 的手机应用开发框架，集成了 Angular、Vue 和 React，使用 Apache 2.0 许可证授权。</p><p id="095IMHN5">Onsen 提供了标签、侧边栏、堆栈导航以及其他组件。这个框架最好的地方是，它所有的组件都支持 iOS 和安卓 Material Design 自动适配，会根据不同的平台切换应用的外观。</p><p id="095IMHN6">安装</p><p><ol><li id="095IMI76"></p><p id="095IMHN7"> </p><p></li></ol></p><p id="095IMHN8">使用</p><p><ol><li id="095IMI77"></p><p id="095IMHN9"> </p><p></li><li id="095IMI78"></p><p id="095IMHNA"> </p><p></li><li id="095IMI79"></p><p id="095IMHNB"> </p><p></li><li id="095IMI7A"></p><p></li><li id="095IMI7B"></p><p id="095IMHND"> </p><p></li><li id="095IMI7C"></p><p id="095IMHNE"> </p><p></li><li id="095IMI7D"></p><p id="095IMHNF"> </p><p></li><li id="095IMI7E"></p><p></li><li id="095IMI7F"></p><p id="095IMHNH"> </p><p></li></ol></p><p id="095IMHNI">优点</p><p id="095IMHNJ"> 1. Onsen UI 基于自由而开源代码</p><p id="095IMHNK"> 2. 不强制基于它开发的应用使用任何形式的 DRM</p><p id="095IMHNL"> 3. 内置了 JavaScript 和 HTML5 代码</p><p id="095IMHNM"> 4. 给最终用户带来原生体验</p><p id="095IMHNN">你最喜欢哪个 React JavaScript 框架？请在评论区分享。</p><p id="095IMHNO">via:</p><p id="095IMHNP">作者： 选题： 译者： 校对：</p><p id="095IMHNQ">本文由 原创编译， 荣誉推出</p><p id="095IMHNU"> 欢迎遵照 CC-BY-NC-SA 协议规定转载，</p><p id="095IMHNV"> 如需转载，请在文章下留言 “ 转载：公众号名称”，</p><p id="095IMHO0"> 我们将为您添加白名单，授权“ 转载文章时可以修改”。</p>