React路由与实践&组件库的使用与自定义组件|青训营笔记

草莓提提
132 阅读4分钟

React路由与实践&组件库的使用与自定义组件

React路由与实践

路由：是一种负责寻径的网络设备，它在互连网络中从多条路径中寻找通讯量最少的一条网络路径提供给用户通信。路由用于连接多个逻辑上分开的网络。对用户提供最佳的通信路径。（用户从一个视图（页面）导航到另一个视图（页面）前端路由是一套映射规则。）

发展历史

静态网站—动态网站—前后端分离—单页应用（sever+前端）—SSR/SSG/微前端

在React中，是URL路径与组件的对应关系 使用React路由简单来说，就是配置路径和组件（配对）

使用步骤

  1. 安装： react-router-dom

  2. 导入路由的三个核心组件：Router/Route/Link import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

  3. 使用Router 组件包裹整个应用

  4. 使用Link 组件作为导航菜单（路由入口） <Link to="/first">页面一</Link>

  5. 使用Route 组件配置路由规则和要展示的组件（路由出口）

常用组件

Router：MemoryRouter、HashRouter和BrowserRouter。 HsahRouter：使用URL的哈希值实现(localhost：3000/#/first)。 BrowserRouter：使用H5的history API实现(localhost：3000/first)，适用Web项目。 MemoryRouter：在内部使用数组存储其位置。与 BrowserHistory和 HashHistory不同，它不与外部源（如浏览器中的历史堆栈）绑定。这使得它非常适合需要完全控制历史堆栈的场景，适用于测试。

执行过程

  • 点击Link组件(a标签)，修改了浏览器地址栏中的url
  • React路由监听到地址栏url的变化。
  • React路由内部遍历所有Router组件，使用路由规则(path)与pathname进行匹配。
  • 当路由规则(path)能够匹配地址栏中的pathname时，就展示该Router组件的内容

路由项目实践

可能出现的问题：

  • js bundle资源超大，静态资源超多
  • —个SPA应用承载200＋页面,巨石应用,变更升级风险大
  • 海量数据接口请求

解决方案：

  • 应用开发，构建,交付粒度需要瘦身&切割

  • 解决数据加载，前端数据处理的耗时

解决技术：

组件库的使用与自定义组件

组件库介绍

软件组件：封装好的可复用的程序“零部件”

前端UI组件：“按钮”、“输入框”、“下拉选择”都是组件，组件和组件组合就变成了一个更复杂的组件。

常用组件库

image.png

组件库使用

引入组件库-npm

需要同时安装react >= 16.8和react-dom >= 16.8 ＞npm i @arco-design/web-react

基础使用

import React from " react" ;
import ReactDOM from " react-dom" ;
import { Button } from "@arco-design/web-react" ; import "@arco-design/web-react/dist/ css/arco.cSS" ;
ReactDOM.render(
<Button type="primary">Hello Arco</Button>document.querySelector( "#root")
);

引入组件库-cdn

开发环境:unpkg.com/@arco-desig…

生产环境:unpkg.com/@arco-desig…

图标:unpkg.com/@arco-desig…

主题定制

  • 通过css进行样式覆盖

  • 修改less变量，在less文件里修改

暗黑模式

arco可以切换

image.png 局部应用暗色模式

本质上是控制暗色颜色变量的挂载位置，提高我们所需要的颜色变量的优先级

国际化（语言）

组件库内置多种语言，若没有的话

自定义语言包文件custom-locale.ts，通过ConfigProvider 组件消费

[LTR]https : // www . visitsaudi.com/en VS[RTL]https : // www. visitsaudi.com/ ar

ConfigProvider -全局配置组件默认属性

通过ConfgProvider的 componentConfig 属性，传入定义好的配置文件，组件配置将会对ConfgPorvider 组件所包裹的所有组件生效

自定义组件

搭建业务组件库

架构设计——技术方案——对外文档

架构设计

单包架构：一个代码仓库里所有组件打包成一个整体，发布出去一个npm包

优点:

  • 公共代码易复用
  • 展示更聚合，便于维护
  • 引入一个包即可使用全部组件

缺点:

  • 修改一个组件需要更新整个库
  • 需要考虑按需加载

多包架构：

—个代码仓库包含多个组件代码，会发布出去多个npm包。

优点:

  • 单独发包，升级灵活。
  • 在同一仓库下，便于代码管理
  • 使用者无需考虑按需加载

缺点:

  • 组件间相互依赖时，需要通过npm包引入
  • 组合使用时需要安装每一个用到的npm包

技术方案 image.png 对外文档

image.png

好的组件特点

  • 高内聚，低耦合：职责清晰，高可维护性
  • 通用性，易扩展：基础组件适用广泛业务场景/业务组件适用于针对性平台

组件开发规范

  • 项目组织：语义化命名、包名与组件名一致、单独维护类型文件（保证代码清晰）
  • 组间设计：接口定义（避免属性遗漏或重复声明、类名前缀一致、避免行内样式、避免在js中的耦合、注意样式的按需加载

快速托管

Arco CLI＋物料平台

avatar
文章
阅读
粉丝