• npm i react-router-dom -S 为--save 缩写 --save 一直依赖 react-router-dom@7 7 版本 --save-dev -D 开发阶段依赖

• 项目阶段

  • 开发阶段 development vite
  • 测试阶段 test 其他同事的电脑上 没有环境 npx
  • 上线阶段 production 打包 -> 项目的部署？-> dns -> 上线

• 编程风格

  • react 组件 由函数组件 jsx 文件 + 样式文件 css 组成
    • 组件目录大写
    • 组件声明文件小写 名字叫 index.jsx 引入的时候 直接引入组件目录文件夹即可，起到组件类的作用，同时不用去引入 index.jsx 文件
  • return (JSX) dom 树的对齐，优雅

• 页面级别组件 views

  • 首页 Home.vue

• es6 module 语法 import React ,{ useState ,useEffect} from 'react' impoet React.useState from 'react' import * as React from'react' default 解构的引入

  as 起别名

• key 的用法 循环输出组件，需有给唯一的 key 值需要唯一 update 需要性能

• 选择框架

  • zarm 移动 react ui 组件库 指定 3.1.2 版本 npm i zarm@3.1.2
  • 引入组件 button
  • 引入样式
  • 引入配置 ConfigProvider theme primaryColor
  • 主题定制 theme primaryColor

• npm run build

  • 上线之前先打包
  • dist/结果目录
    • src/开发目录
    • 不需要注释、换行等，只要浏览器能运行 文件小，压缩，传输更快
    • 组件打包成 js 文件，css 打包成一个 css 文件 性能优化 http 并发数 一个 js 文件
      • 依赖关系 一层套一层 将所有组件打包
    • vite 很快
  • 截图 size gzip 大小 http 主动启动 gzip 压缩传输的 底层是 tcp/ip

• vite

  • 按需加载 vite-plugin-style-import

• less stylus css 预编译

  • 快
  • less
  • 变量、嵌套、混合函数
  • module css 模块化样式
    • style.module.less
    • 支持 css 模块
      • vite 申明 less -> 解析
      • 类名 {s.index}

• 移动端适配 rem 10rem = 宽度

  • lib-flexible 阿里 自动进行 rem 适配
  • postcss-pxtorem 包 自动将 px 转 rem 提高开发效率
    • postcss 插件

• axios 配置

  • baseURL
    • 前后端分离，前端访问的是后端的接口，一般都会以 /api 开头 方便，baseURL 统一配置
  • axios vite+proxy 跨域问题 新解决方案 让前端误以为是自己访问后端接口，而不是跨域访问

• 请求、响应拦截器

  • 统一的 token 设置
  • 统一的 错误处理 401 404 500 !200
  • res 丰富的 状态码 config res ... 库的功能
  • return res.data 直接返回数据 api 一样简单

• cookie http 1.0

  • http 协议本身是无状态的 method url 返回结果一定一样
  • 小饼干 字符串
  • key=value; key2=value
  • 4kb 关键 用户身份 等关键信息
  • 请求时都会默认带上，太大的化会影响 http 性能
  • expires 过期时间
  • domain cookie 属于域名的 只能访问到当下域名的 cookie
  • path 限制 cookie 只属于某个路径/api
  • httponly 如果为 true 只会在请求时带上 通过 js 没有办法获取 更加安全 XSS 跨站脚本攻击 黑客通过发文，评论等 js 注入恶意代码注入 获取 cookie 的代码 并执行 黑客使用 cookie 访问某网站，
  <script> < < - secure 安全的 cookie 只能在 https 协议下才会访问

业务开发

使用了 zarm 自己封装了一些页面组件和可复用组件 components 目录下 公共组件 基于 zarm TabBar.item activeKay itemKey

• change setActiveKey

• icon

  • iconfont 定制
  • CustomIcon 的组件 Icon.createFromIconfont

• react-router-dom useNavigate hook navigateTo('/user') 必须放进 router 组件中被包裹

• NavBar 组件

• react props 类型的约束

  • 安装 prop-types
  • 函数组件做为对象 proptypes 属性
  • propTypes.bool

• 单页应用 single page application 看过去像一个页面

  • 传统的 a 标签 刷新页面 重新到服务器 重新渲染所有的 html 会白屏 慢 体验不好
  • vue/react 优化体验
    • 不能白屏 不要去刷新整个的页面 NavBar 导航可能在
    • HashRouter HistoryRouter 支持 hashChange pushState 历史站 不用 a 标签，由 router 统一管理
    • Routes router-view 一副牌 看到最上面那一张