前端 | 管理系统UI框架React
UI指对软件的人机交互、操作逻辑、界面美观的整体设计。用户界面是介于用户与硬件而设计彼此之间交互沟通相关软件，目的在使得用户能够方便有效率地去操作硬件以达成双向之交互，完成所希望借助硬件完成之工作，用户界面定义广泛，包含了人机交互与图形用户接口，凡参与人类与机械的信息交流的领域都存在着用户界面。
1. Ant Design
Ant Design 是蚂蚁金服 团队推出的一款面向企业和开发者的高品质**
UI设计语言**。功能全面，设计风格十分优雅、精致。
- 🚀 官网地址：ant.design/index-cn
- 🚀 国内用户推荐访问国内镜像：ant-design.antgroup.com/index-cn
- 模块化和定制化 ：
Ant Design采用模块化设计方式，允许用户快速建立新的应用程序，并提供高可定制的UI组件，使得用户可以根据自己的需求进行个性化的设置。 - 跨端统一设计 ：
Ant Design支持跨端统一设计，适应不同技术栈的开发者的需求，有助于实现跨平台开发的融合，缩短项目的实施周期。 - 丰富的文档和支持 ：
Ant Design提供了详尽的文档和实践指南，包括概念引导和实践指南，帮助用户获得设计灵感，提升对软件设计、交互和用户体验的理解。 - 组件库的特点 ：
Ant Design包含了一系列高质量的React组件，这些组件适用于桌面端和移动端，覆盖了大部分产品交互界面，开箱即用，便于企业快速打造优秀产品。 - 适用范围 ：
Ant Design主要应用于中后台系统，基于React开发的，兼容JavaScript与TypeScript，更容易上手操作。
中后台架构Ant Design Pro
Ant Design Pro 是基于Ant Design和umi的封装的一整套企业级中后台前端/设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。随着『设计者』的不断反馈，我们将持续迭代，逐步沉淀和总结出更多设计模式和相应的代码实现，阐述中后台产品模板/组件/业务场景的最佳实践，也十分期待你的参与和共建。
- 中文官网说明地址 pro.ant.design/zh-CN/
- 快速构建命令
shell
$ npm i @ant-design/pro-cli -g
$ pro create my-app
$ cd my-app
$ yarn
$ yarn start # 打开浏览器访问 http://localhost:8000
2. Arco Design
ArcoDesign 基于字节跳动公司内部的 Byte Design 升级而来，通过字节内部大量业务沉淀和验证，不仅仅是一款
UI组件库，更是一个能力全面的企业级产品设计系统。
- 🚀 官网地址：arco.design/
ArcoDesign主要解决在打造中后台应用 时，提供系统且全面的设计规范 和资源，覆盖产品设计、UI 设计以及后期开发，让产品设计和开发无缝连接，提高质量和效率。同步支持React和Vue并提供了相应的组件库。提供Arco Pro，整理了常见的页面场景，帮助用户快速初始化项目和使用页面模板，从 0 到 1 搭建中后台应用。
中后台架构Arco Design Pro
Arco Design是由字节跳动GIP UED团队 和架构前端团队 联合推出的企业级设计系统。中后台最佳实践官方模板Pro 2. 0正式上线，此版本更新了Arco官方的中后台典型页面，包含工作台、列表、数据可视化、详情页等20+主要场景页面，设计风格也做了创新升级，React 及Vue两种前端框架开箱即用。
-
官方链接
- Arco：arco.design
- Pro：pro.arco.design
- Github：github.com/arco-design
- 用法
ruby
$ npm i @arco-design/arco-cli@latest yarn -g
$ arco init my-project
3. TDesign
TDesign是腾讯官方出品的产品研发解决方案，是腾讯各业务团队在服务业务过程中沉淀的一套企业级设计体系，汇集了腾讯众多优秀组件库能力和设计研发经验。
- 🚀 官网地址：tdesign.tencent.com/
和阿里的 Ant Design 类似
中后台框架 TDesign Starter
强大的主题定制、开箱即用的CLI工具以及适配手机屏幕，页面案例丰富。
- 使用
bash
# 安装 tdesign-starter-cli
npm i tdesign-starter-cli -g
# 执行命令创建项目
td-starter init
# 进入项目目录
cd ./tdesign-react
# 安装项目依赖
npm install
# 启动项目
npm run dev- 新建文件夹、新建页面
javascript
cd src/pages/ && mkdir HomePage
cd HomePage && touch index.tsx
# index.tsx
import React from "react";
const HomePage = () => (
<>
<div>...</div>
<div>...</div>
</>
);
export default React.memo(HomePage);- 配置新页面的路由，修改
src/config/router中的文件，注册新页面
javascript
import HomePage from "pages/HomePage";
export default [
// ...其他路由
{
path: "/home",
Component: HomePage,
},
];- 在
menu中增加该路由，修改src/config/menu新增该页面，如果不需要在菜单中展示这一步可以跳过
javascript
import HomePage from "pages/HomePage";
export default [
// ...其他菜单项
{
key: "pageKey",
path: "/home",
label: "新增测试首页",
Icon: ViewModuleIcon,
},
];- 针对开发组件
开发自定义组件，根据需求做一个新组件，推荐放置在src/component目录下。
javascript
// 在 src/components 下新增一个组件文件，component.tsx
import React, { useState } from "react";
export default function NewComponent() {
const [stateA, setStateA] = useState(1);
return <div>{stateA}</div>;
}
// 页面组件中去引入组件
import React, { useState } from "react";
// 引入组件
import NewComponent from "components/NewComponent";
const NewPage = () => (
<div>
<NewComponent />
</div>
);
export default React.memo(NewPage);扩展
React.memo是一个高阶组件，它可以用来包装一个函数组件并返回一个新的组件。新组件会对传入的props进行浅比较，如果传入的props没有发生变化，则直接返回上一次渲染的结果，从而避免不必要的重复渲染过程，提升了组件的渲染性能；否则重新渲染组件。 React.memo和React.PureComponent类似，都可以用于优化组件的性能。区别在于React.PureComponent只适用于class组件，而React.memo则适用于函数组件。
- 父组件中state改变，不受memo保护的子组件也会重新渲染
- 被memo函数包起来的组件只有本身的props被改变之后才会重新渲染
- memo只能进行浅比较来校验决定是否触发重新渲染。改变数组（对象）类型的props的时候记得返回一个全新的数组（对象），例如
setConfig([...config])或者setConfig({...config}) - memo不是项目中所有的组件都需要包一下。包的太多反而会起反效果，我们需要选择那些经常被重新渲染的组件有选择性的去缓存。
4. Next UI
NextUI是一个现代的 React UI 框架，可以在React 和 Nextjs 应用程序中创建漂亮的 UI, 只需在App.jsx中进行一些自定义即可加载 NextUI 提供程序。
- 官网地址 nextui.org/
-
使用
- 官网给出明确的使用方法
5. react-bootstrap
一个与 Bootstrap 框架集成的严肃的 React UI 库
-
使用
npm install react-bootstrap bootstrap
javascript
import Button from 'react-bootstrap/Button';
// or less ideally
import { Button } from 'react-bootstrap';6. Semantic UI React
Semantic UI React是一个基于React的 UI 组件库，它是 Semantic UI 官方提供的 React 实现版本。Semantic UI 是一个语义化的 UI 框架，提供了一系列易于记忆和易于使用的 CSS 类，可以帮助开发人员快速构建漂亮、一致的用户界面。
Semantic UI React继承了Semantic UI的语义化理念和设计风格，提供了一系列易于使用的 React 组件，包括按钮、表单、菜单、模态框、表格等等。这些组件都具有高度的可定制性，可以根据需要进行样式和行为上的调整；Semantic UI React还提供了一些实用的工具和辅助组件，例如 Grid（网格布局）、Icon（图标）、Menu（菜单）等等。Semantic UI React还提供了一些非常有用的功能，例如主题定制、国际化支持、响应式布局等等。此外，Semantic UI React还有一个活跃的社区，提供了大量的第三方组件和插件，可以扩展Semantic UI React的功能和样式。
-
使用
- Themes from Semantic UI >=2.3.x require Semantic UI React >=0.81.0.
ruby
$ yarn add semantic-ui-react semantic-ui-css
## Or NPM
$ npm install semantic-ui-react semantic-ui-css
import 'semantic-ui-css/semantic.min.css'
7. Material UI
Material-UI 是一个流行的 React UI 组件库，致力于为开发人员提供易于使用和高度可定制的 Material Design 风格的 UI 组件。
8. Chakra UI
Chakra UI 是一个现代的、可访问的 React UI 组件库。它由 JavaScript 和 CSS 的原生 API 组成，可以帮助开发人员快速地构建高质量的用户界面。
- 官网地址 chakra-ui.com/
Chakra UI的目标是提供一种简单、易用的设计语言，并让开发人员可以轻松地使用这些设计元素来创建出色的用户界面。它提供了丰富的组件和样式，包括按钮、表单、图标、提示框、菜单、模态框等等，以及全局的主题配置和 CSS 变量，可以方便地进行定制和扩展；同时Chakra UI 还注重可访问性和可维护性，采用了语义化的 HTML 标记和无障碍功能，使得使用屏幕阅读器等辅助技术的用户也可以轻松地使用这些组件。
9. Prime React
Prime React 是一个基于 React 的 UI 组件库，它由 PrimeTek 公司开发并开源。PrimeTek 公司是一个专注于 Web 开发的公司，致力于提供高质量的开源 UI 组件库和解决方案。
Prime React 提供了一系列丰富的 UI 组件，包括按钮、表单、数据展示、布局等等。这些组件都采用了现代化的设计风格，并且提供了丰富的功能和可定制性，可以满足各种 Web 应用程序的需求；提供一些非常有用的组件和功能，例如数据表格、图表、日历等等，可以帮助开发人员快速构建复杂的 Web 应用程序。此外，Prime React 还提供了一些基于 Web 组件的解决方案，例如 PrimeNG（基于 Angular 的 UI 组件库）和 PrimeFaces（基于 JavaServer Faces 的 UI 组件库），可以让开发人员在不同的技术栈之间进行无缝集成。
