React前端开发_Day4

参考课程:

黑马程序员 React18入门到实战】

https://www.bilibili.com/video/BV1ZB4y1Z7o8

@ZZHow(ZZHow1024)

ReactRouter

  • 快速开始

    • 什么是前端路由:一个路径 path 对应一个组件 component 当我们在浏览器中访问一个 path 的时候,path 对应的组件会在页面中进行渲染
    • 创建路由开发环境:采用 CRA 创建项目的方式进行基础环境配置
      1. 创建项目并安装所有依赖:pnpm create react-app react-router-pro
      2. 安装最新的 ReactRouter 包:pnpm add react-router-dom
      3. 启动项目:pnpm start
    • 需求:创建一个可以切换登录页和文章页的路由系统
      • /login:登录
      • /article:文章
    • 步骤:
      1. 创建 router 实例对象并且配置路由对应关系

        jsx 复制代码
        const router = createBrowserRouter([
            {
                path: "/login",
                element: <div>登录页</div>
            },
            {
                path: "/article",
                element: <div>文章页</div>
            }
        ])
      2. 路由绑定

        jsx 复制代码
        <RouterProvider router={router}/>
  • 抽象路由模块

    • src/page/
      • Login
      • Article
    • src/router(引入组件配置 path-component)
    • 应用入口文件渲染 RouterProvider(注入 router 实例)
  • 路由导航

    • 路由系统中的多个路由之间需要进行路由跳转 ,并且在跳转的同时有可能需要传递参数进行通信

    • 声明式导航

      • 声明式导航是指通过在模版中通过 <Link/> 组件描述出要跳转到哪里,比如后台管理系统的左侧菜单通常使用这种方式进行

        jsx 复制代码
        <Link to='/article'>跳转到文章页</Link>
      • 语法说明:通过给组件的 to 属性指定要跳转到路由 path ,组件会被渲染为浏览器支持的 a 链接,如果需要传参直接通过字符串拼接的方式拼接参数即可

    • 编程式导航

      • 编程式导航是指通过 useNavigate 钩子得到导航方法,然后通过调用方法以命令式的形式进行路由跳转,比如想在登录请求完毕之后跳转就可以选择这种方式,更加灵活

        jsx 复制代码
        const navigate = useNavigate()
        
        <button onClick={() => navigate('/article')}>跳转到文章页</button>
      • 语法说明:通过调用 navigate 方法传入地址 path 实现跳转

  • 导航传参

    • searchParams 传参

      • 发送方
      jsx 复制代码
      const navigate = useNavigate()
      
      <button onClick={() => navigate('/article?id=111&name=Tom')}>跳转到文章页并传参</button>
      • 接收方
      jsx 复制代码
      const [params] = useSearchParams()
      
      <div>接收参数 id:{params.get('id')}</div>
      <div>接收参数 name:{params.get('name')}</div>
    • params 传参

      • 发送方
      jsx 复制代码
      const navigate = useNavigate()
      
      <button onClick={() => navigate('/article/111/Tom')}>跳转到文章页并 params 传参</button>
      • 接收方
      jsx 复制代码
      const params = useParams()
      
      <div>接收参数 id:{params.id}</div>
      <div>接收参数 name:{params.name}</div>
  • 嵌套路由配置

    • 在一级路由中又内嵌了其他路由,这种关系就叫做嵌套路由,嵌套至一级路由内的路由又称作二级路由
    • 实现步骤:
      1. 使用 children 属性配置路由嵌套关系

        jsx 复制代码
        const router = createBrowserRouter([
            {
                path: '/',
                element: <Layout/>,
                children: [
                    {
                        path: 'board',
                        element: <Board/>
                    },
                    {
                        path: 'about',
                        element: <About/>
                    }
                ]
            }
        ])
      2. 使用 <Outlet/> 组件配置二级路由渲染位置

        jsx 复制代码
        const Layout = () => {
            return (
                <div>
                    一级路由 Layout 组件
                    <br/>
                    <Link to='/board'>面板</Link>
                    &nbsp;
                    <Link to='/about'>关于</Link>
                    {/* 配置二级路由的出口 */}
                    <Outlet/>
                </div>
            )
        }
  • 默认二级路由

    • 当访问的是一级路由时,默认的二级路由组件可以得到渲染,只需要在二级路由的位置去掉 path设置 index 属性为 true
    jsx 复制代码
    children: [
        // 设置为默认二级路由
        {
            index: true,
            element: <Board/>
        }
    ]
  • 404 路由配置

    • 场景:当浏览器输入 url 的路径在整个路由配置中都找不到对应的 path,为了用户体验,可以使用 404 兜底组件进行渲染
    • 实现步骤:
      1. 准备一个 NotFound 组件
      2. 在路由表数组的末尾,以 * 号作为路由 path 配置路由
  • 两种路由模式

    • 各个主流框架的路由常用的路由模式有两种,history 模式和 hash 模式 ,ReactRouter 分别由 createBrowserRoutercreateHashRouter 函数负责创建
    路由模式 URL 中路径的表现 底层原理 部署时是否需要特殊配置
    history /xxx history 对象 + pushState 事件 需要
    hash /#/xxx 监听 hashChange 事件 不需要
  • 案例演示:react-router-pro

记账本案例

  • 环境搭建:使用 CRA 创建项目,并安装必要依赖,包括下列基础包

    1. Redux 状态管理:@reduxjs/toolkit、 react-redux
    2. 路由:react-router-dom
    3. 时间处理:dayjs
    4. class 类名处理:classnames
    5. 移动端组件库:antd-mobile
    6. 请求插件:axios
  • 配置别名路径@

    1. 路径解析配置(webpack),把 @/ 解析为 src/:使用 craco 插件
    2. 路径联想配置(VsCode),VS Code 在输入 @/ 时,自动联想出来对应的 src/ 下的子级目录:通过 jsconfig.json 配置
    • 路径解析配置

      • CRA 本身把 webpack 配置包装到了黑盒里无法直接修改,需要借助一个插件:craco
      • 配置步骤:
        1. 安装 craco:pnpm add -D @craco/craco

        2. 项目根目录下创建配置文件:craco.config.js

        3. 配置文件中添加路径解析配置

          jsx 复制代码
          // craco.config.js
          const path = require("path")
          
          module.exports = {
              webpack: {
                  alias: {
                      '@': path.resolve(__dirname, './src')
                  }
              }
          }
        4. 包文件中配置启动和打包命令

          json 复制代码
          // package.json
          "scripts": {
              "start": "craco start",
              "build": "craco build"
          }
    • 联想路径配置

      • VS Code 的联想配置,需要我们在项目目录下添加 jsconfig.json 文件,加入配置之后 VS Code 会自动联想提示
      • 配置步骤:
        1. 根目录下新增配置文件:jsconfig.json

        2. 添加路径提示配置

          json 复制代码
          // jsconfig.json
          {
            "compilerOptions": {
              "baseUrl": "./",
              "paths": {
                "@/*": [
                  "src/*"
                ]
              }
            }
          }
  • 数据 Mock 实现

    • 在前后端分类的开发模式下,前端可以在没有实际后端接口的支持下先进行接口数据的模拟,进行正常的业务功能开发
    • 市场常见的 Mock 方式
      1. 前端直接写假数据:纯静态,没有服务
      2. 自研 Mock 平台:成本太高
      3. json-server 等工具:有服务,成本低
    • json-server 实现数据 Mock
      • json-server 是一个 node 包,可以在不到 30 秒内获得零编码的完整的 Mock 服务
      • 实现步骤:
        1. 项目中安装 json-server:pnpm add -D json-server

        2. 准备一个 JSON 文件

        3. 添加启动命令

          json 复制代码
          // package.json
          "serve": "json-server ./server/data.json --port 8888"
        4. 访问接口进行测试

  • 整体路由设计

    • Layout(一级路由)
      • Month(二级路由)
      • Year(二级路由)
    • New(一级路由)
  • antD-mobile 主题定制

    • 定制方案:
      1. 全局定制:整个应用范围内的组件都生效

        css 复制代码
        :root:root {
        --adm-color-primary: #a062d4;
        }
      2. 局部定制:只在某些元素内部的组件生效

  • Redux 管理账目列表

    • 基于RTK管理账目列表
      • RTK
        • State:billList
        • reducer:setBillList
        • 异步 action
      • component
        • dispatch 异步 action
  • TabBar 功能实现

    • 需求:使用 antD 的 TabBar 标签栏组件进行布局以及路由的切换
    • 实现方式:看文档(找到相似 Demo → 复制代码跑通 → 定制化修改)
      1. 静态布局实现
      2. 切换路由实现
  • 案例演示:react-bill

相关推荐
RaidenLiu6 分钟前
告别陷阱:精通Flutter Signals的生命周期、高级API与调试之道
前端·flutter·前端框架
非凡ghost6 分钟前
HWiNFO(专业系统信息检测工具)
前端·javascript·后端
非凡ghost9 分钟前
FireAlpaca(免费数字绘图软件)
前端·javascript·后端
非凡ghost15 分钟前
Sucrose Wallpaper Engine(动态壁纸管理工具)
前端·javascript·后端
拉不动的猪17 分钟前
为什么不建议项目里用延时器作为规定时间内的业务操作
前端·javascript·vue.js
该用户已不存在24 分钟前
Gemini CLI 扩展,把Nano Banana 搬到终端
前端·后端·ai编程
地方地方25 分钟前
前端踩坑记:解决图片与 Div 换行间隙的隐藏元凶
前端·javascript
小猫由里香31 分钟前
小程序打开文件(文件流、地址链接)封装
前端
Tzarevich34 分钟前
使用n8n工作流自动化生成每日科技新闻速览:告别信息过载,拥抱智能阅读
前端
掘金一周1 小时前
一个前端工程师的年度作品:从零开发媲美商业级应用的后台管理系统 | 掘金一周 10.23
前端·人工智能·后端