前端 | 管理系统UI框架React

前端 | 管理系统`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

预览地址 preview.pro.ant.design/dashboard/a...

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

预览 react-pro.arco.design/login

3. TDesign

TDesign是腾讯官方出品的产品研发解决方案，是腾讯各业务团队在服务业务过程中沉淀的一套企业级设计体系，汇集了腾讯众多优秀组件库能力和设计研发经验。

🚀 官网地址：tdesign.tencent.com/

和阿里的 Ant Design 类似

中后台框架 `TDesign Starter`

强大的主题定制、开箱即用的CLI工具以及适配手机屏幕，页面案例丰富。

官网地址 tdesign.tencent.com/starter/rea...

使用

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 库

官网地址 www.react-bootstrap.cn/docs/gettin...

使用

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 类，可以帮助开发人员快速构建漂亮、一致的用户界面。

官网地址 react.semantic-ui.com/

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 组件。

官网地址 mui.com/material-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 组件库和解决方案。

官网地址 primereact.org/installatio...

Prime React 提供了一系列丰富的 UI 组件，包括按钮、表单、数据展示、布局等等。这些组件都采用了现代化的设计风格，并且提供了丰富的功能和可定制性，可以满足各种 Web 应用程序的需求；提供一些非常有用的组件和功能，例如数据表格、图表、日历等等，可以帮助开发人员快速构建复杂的 Web 应用程序。此外，Prime React 还提供了一些基于 Web 组件的解决方案，例如 PrimeNG（基于 Angular 的 UI 组件库）和 PrimeFaces（基于 JavaServer Faces 的 UI 组件库），可以让开发人员在不同的技术栈之间进行无缝集成。

前端 | 管理系统UI框架React