React 学习笔记总结(四)

news2024/11/19 17:50:09

文章目录

  • 1. 创建组件流程(以及脚手架环境流程)
  • 2. 样式 的模块化
  • 3. 常用快捷生成
  • 4. 通用性 组件编码流程
  • 5. React脚手架 配置代理
    • 5.1 React 引入 ajax库
    • 5.2 第一种配置代理方式(package.json)
    • 5.3 第二种代理方式(setupProxy.js)
  • 6. React List列表效果实现
  • 7. React 消息订阅与发布(兄弟组件之间的传值 )
  • 8. fetch 的 使用
  • 9. React 路由
    • 9.1 前端的 history模式
    • 9.2 react-router-dom React插件库
    • 9.3 路由组件的props
    • 9.4 React路由 NavLink
  • 10. 封装NavLink组件 (开发必备，方便使用)
  • 11. React路由 Switch用法
  • 12. React 多级路由刷新后，页面样式丢失的问题
  • 13. React 路由的 模糊匹配 与 严格匹配
  • 14. React路由组件 Recirect(重定向)

1. 创建组件流程(以及脚手架环境流程)

src下的index.js的入口文件：

// 引入React核心库
import React from 'react'
// 引入ReactDOM
import ReactDOM from 'react-dom'
// 引入App组件(提示：.js和.jsx都可以省略，像.css都不可以)
import App from "./App";

// 渲染App到页面
ReactDOM.render(<App/>,document.getElementById('root'))

创建 外壳组件 App：(所有组件都要放到App组件下面。)

// 创建 外壳组件 App

// 引入react库
import React from 'react'

// 引入hello组件
import Hello from "./components/Hello/hello";

import Welcome from "./components/Welcome/Welcome";

// 简化写法：class App extends React.Component{...}
const {Component} = React
// 创建App类组件并暴露
export default class App extends Component{
    render() {
        return (
            <div>
                <Hello/>
                <Welcome/>
            </div>
        )
    }
}

// 可以单独：默认暴露app组件
// export default App

一般一个React的正常组件效果如下：(以Welcome组件为例)
在这里插入图片描述

2. 样式 的模块化

样式为什么要有模块化，因为每个组件都对应一个样式，这样就会造成冲突。

步骤如下：

第一步：将xxx.css文件，改为xxx.module.css。

第二步：通过from引入的方式来操作。

在这里插入图片描述

3. 常用快捷生成

快速生成组件基础结构，直接 rcc + 回车 进行操作就行了。

  • rcc：react + class + component 类式组件。
  • rfc：react + funcation + componet 函数式组件。
    在这里插入图片描述

还有一些插件之类的：
在这里插入图片描述

4. 通用性 组件编码流程

在这里插入图片描述

tips: React的jsx写法，用的不是class，而是className。style用的是{{}}来定义。

5. React脚手架 配置代理

5.1 React 引入 ajax库

React本身只关注于界面，不包含发送ajax请求的代码。

因此，要么集成第三方ajax库或者自己封装发送请求。

常用的ajax请求库：jq 或者 axios。

  • jquery的ajax是通过回调函数的形式获取数据的,而axios是通过Promise对象来获取数据的,而这也是axios最大的优点。

在这里插入图片描述

安装axios：
在这里插入图片描述

5.2 第一种配置代理方式(package.json)

第一种配置代理方式：

  • package.json中配置代理服务器：(缺点：只能一一对应，React开启后是3000，那么url为3000的时候请求也只会发送给对应服务5000的端口。)
    在这里插入图片描述

优缺点总结：
在这里插入图片描述

5.3 第二种代理方式(setupProxy.js)

第二种代理方式：通过创建setupProxy.js文件 以及 使用http-proxy-middleware来进行操作。

  • 在src下面创建setupProxy.js文件，并且配置：(注意：此文件要用CJS形式，因为该文件供webpack使用。)
// 不能用ES6形式，要用CJS的形式，因为这个文件并不是给前端使用的，
// 而是给webpack使用。webpack里面都是node语法也就是CJS。

// fixme 要用CJS语法
// fixme http-proxy-middleware（一般脚手架自带）
// http-proxy-middleware 1.0.0版本以上有些变化，变成了要使用函数createProxyMiddleware才行。
const proxy = require('http-proxy-middleware')

module.exports = function (app) {
    app.use(
        // fixme 通过前缀进行区分
        // 第一个代理：
        proxy.createProxyMiddleware('/api1',{
            // fixme target：请求转发给谁
            target:'https://api.uixsj.cn/',
            // fixme changeOrigin：让服务器知道从哪发出去的，专业术语：控制服务器收到的响应头中的Host字段的值。
            // 如果为false,那么默认后台服务器拿到的host值就是前端3000端口的url地址。
            // 如果为为true,就是当前target的url为host值也就是后台服务器本身。
            changeOrigin:true,
            // fixme 重写请求路径
            pathRewrite:{
                '^/api1':'' // 将api1替换掉
            }
        }),
        // 第二个代理：
        proxy.createProxyMiddleware('/api2',{
            target:'https://sp0.baidu.com/',
            changeOrigin:true, // 让服务器知道从哪发出去的
            pathRewrite:{
                '^/api2':'' // 将api2替换掉
            }
        })
    )
}
  • App.jsx发起请求如下：
import React, {Component} from 'react';
import axios from "axios";

export default class App extends Component {

    getStudentData = ()=>{
        axios.get('http://localhost:3000/api1/hitokoto/get?type=social').then(result => {
            console.log('成功了！',result.data)
        },err => {
            console.log('报错了',err)
        })
    }

    getCarData = ()=>{
        axios.get('http://localhost:3000/api2/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=java&cb=haha').then(result => {
            console.log('成功了！',result.data)
        },err => {
            console.log('报错了',err)
        })
    }

    render() {
        return (
            <div>
                <button onClick={this.getStudentData}>点我获取一段励志名言</button>
                <button onClick={this.getCarData}>点我获取百度java搜索</button>
            </div>
        );
    }
}

总结：(第二种方式比较常用！)
在这里插入图片描述

注意：

  • http-proxy-middleware 1.0.0版本与0.x.x版本有所不同。
    在这里插入图片描述
    1.0.0版本以上，就用变成了createProxyMiddleware进行操作代理。

6. React List列表效果实现

在这里插入图片描述

7. React 消息订阅与发布(兄弟组件之间的传值 )

工具库：PubSubJS

**安装： **

# 命令引入
npm install pubsub-js --save
# package.json依赖引入
"pubsub-js": "^1.9.4"

就是一个订阅，一个发布。
PubSub.subscribe('topic',this.mySub)

8. fetch 的 使用

fetch的使用：
在这里插入图片描述

fetch 能体现出关注分离的效果(相比较xhr)：

  • 先联系服务是否成功，再关注获取的数据。
    在这里插入图片描述

优化代码：
在这里插入图片描述

再配合await进行优化等待效果：

  • 两个都必须使用await才行，因为response.json()也是一个promies。
    在这里插入图片描述

总结：

  • fetch原生函数，不再使用XmlHttpRequest对象提交ajax请求。

在这里插入图片描述

9. React 路由

9.1 前端的 history模式

SPA：single page web application 单页面Web应用。

了解，history模式：
在这里插入图片描述
两种history模式：browserHistory 和 hashHistory。

9.2 react-router-dom React插件库

react-router-dom是react的一个插件库。

抓门用来实现一个SPA应用。

基于react项目都会用到路由，也就是这个插件库。

react-router官方：https://react-router.docschina.org/

在这里插入图片描述

安装React：

# 添加依赖 当前默认最新版本6版本。
yarn add react-router-dom
# 依赖添加
"react-router-dom": "^5.3.4"

路由的基本使用步骤：
1.明确好界面中的导航区、展示区。
2.导航区的a标签改为Link标签。<Link to=“/xxx”>Demo</Link>
3.展示区写Route标签进行路径的匹配 <Route path=“/xxx” component={Demo}/>
4.<App>的最外侧包裹一个Router。例如：<BrowserRouter>或<HashRouter>

React的Link标签最终转换成了a标签：
在这里插入图片描述

注意：要共用一个Router：
在这里插入图片描述tips: 因此，一般路由直接定义在App的组件外侧。

案例：

App.jsx

import React, {Component} from 'react';
// 引入react-router-dom
import {Link,Route} from 'react-router-dom'

import Home from './components/Home'
import About from './components/About'

export default class App extends Component {
    render() {
        return (
            <div style={{textAlign:"center"}}>
                <div style={{textAlign:"center"}}>
                    <h1>React Router Demo</h1>
                </div>
                <div style={{textAlign:"center"}}>
                    {/*{React靠路由跳转}*/}
                    <Link to="/about">
                        About
                    </Link>
                    <br/>
                    <Link to="/home">
                        Home
                    </Link>
                </div>
                <div style={{textAlign:"center"}}>
                    {/* 注册路由: 注意route和Router区分 */}
                    <Route path="/about" component={About}/>
                    <Route path="/home" component={Home}/>
                </div>
            </div>
        );
    }
}

index.js：

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import {BrowserRouter} from "react-router-dom";

// 使用BrowserRouter组件包裹App组件。
ReactDOM.render(
    <BrowserRouter>
        <App/>
    </BrowserRouter>
    ,document.getElementById('root'))

9.3 路由组件的props

路由发送过来的props对应如下三者：
在这里插入图片描述
在这里插入图片描述

路由组件与一般组件：
在这里插入图片描述

9.4 React路由 NavLink

Link是没有高亮效果的，因此可以使用Link的升级版NavLink。

需要注意activeClassName的使用：
在这里插入图片描述

!important的使用：
在这里插入图片描述

10. 封装NavLink组件 (开发必备，方便使用)

如何传递标签体到组件中：

  • react组件的props属性中有个 children属性就附带了标签体的内容。
    在这里插入图片描述

代码案例可以精简为下面：
在这里插入图片描述
在这里插入图片描述

11. React路由 Switch用法

Switch就是用来包裹路由Route的，防止重复匹配，提高效率的效果。
在这里插入图片描述

12. React 多级路由刷新后，页面样式丢失的问题

原因：有些时候用相对路径，是根据url的相对路径来的；因而，路由变化导致去查询路径时也变化。解决办法：用 绝对路径 或者 %PUBLIC_URL% 再或者 使用HashRouter来解决 就可以。
在这里插入图片描述

总结：
在这里插入图片描述

13. React 路由的 模糊匹配 与 严格匹配

模糊匹配的效果：
在这里插入图片描述

路由添加exact属性，达到精准匹配的效果：
在这里插入图片描述

总结：
在这里插入图片描述

14. React路由组件 Recirect(重定向)

Redirect重定向组件：

import {Redirect} from 'react-router-dom

Redirect是一个兜底效果，如果谁也匹配不上，就走Redirect的to匹配的路径。

总结：
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/112422.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

“内卷之王”vivo：成败即将见分晓

“内卷之王”vivo：成败即将见分晓

文丨熔财经 作者|XL 12月22日&#xff0c;随着年底收官之作S16系列正式发布&#xff0c;vivo完成了自己的年度答卷。2022年&#xff0c;vivo总体风头正盛&#xff0c;尤其在第三季度一马当先稳居国内出货量榜首&#xff0c;市占比提升到20.0%&#xff0c;领先第二名3%。这是一…
阅读更多...
elementUI中el-table每行异常高度原因排查，累死

elementUI中el-table每行异常高度原因排查，累死

理论上不单独设置高度的话&#xff0c;表格每一个应该是默认的高度才对&#xff0c;我说的没错吧&#xff0c; 但是请看实际情况&#xff1a; 这是默认情况下的高度为48 还有两外一个表格&#xff0c;我也没有设置高度&#xff0c;但是但是&#xff1a;这个高度竟然达到了71&…
阅读更多...
深入理解蓝牙BLE之“无线通信的调制解调”

深入理解蓝牙BLE之“无线通信的调制解调”

FSK&#xff1a; Frequency Shift Keying&#xff0c;频移键控&#xff0c;即一种允许根据数字调制信号改变载波频率而进行数据传输的数字调制技术&#xff0c;比如在BFSK中&#xff0c;二进制1和二进制0期间传输不同频率的载波信号。由于这种调制解调方式容易实现&#xff0c…
阅读更多...
我国水产养殖行业现状及趋势分析：不断推进产业机械化高质量发展

我国水产养殖行业现状及趋势分析：不断推进产业机械化高质量发展

水产养殖业主要是人类利用适宜水域养殖水产经济动植物的生产事业&#xff0c;是渔业的重要组成部分。按养殖水域&#xff0c;水产养殖可分为淡水养殖、海水养殖、浅海滩涂养殖&#xff1b;按养殖对象&#xff0c;可分为鱼类养殖、贝类养殖、虾类养殖、蟹类养殖、藻类栽培&#…
阅读更多...
AndroidR兼容性适配指南

AndroidR兼容性适配指南

AndroidR Android 11 基于 Android 早期版本构建&#xff0c;增加了多种功能和更新&#xff0c;以保障用户安全并提高透明度和可控性。所有开发者都应查看隐私功能并测试他们的应用。具体影响可能会因每个应用的核心功能、目标平台和其他因素而异。 Android 11介绍 Android 1…
阅读更多...
day 10 模拟和高精度

day 10 模拟和高精度

P1328 [NOIP2014 提高组] 生活大爆炸版石头剪刀布 #include<bits/stdc.h> using namespace std; int n, na, nb, fa, fb;//f:得分 int a[205], b[205];void fun(int ta, int tb){if(ta 0 && tb 1) fb;if(ta 1 && tb 0) fa;if(ta 0 && tb …
阅读更多...
学习记录-mybatis+vue+elementUi实现分页条件查询

学习记录-mybatis+vue+elementUi实现分页条件查询

因为前端并不难&#xff0c;这里前后端就一起实现。一共分为四个步骤 步骤一 ① SQL部分 分页条件查询其实就是在分页的基础上增加条件&#xff0c;这里有两个主要的函数需要去实现&#xff0c;一个是根据分页以及条件去查询数据&#xff0c;另一个是根据条件去统计数据。 明显…
阅读更多...
结构体嵌套函数指针

结构体嵌套函数指针

这次来记录一下结构体嵌套函数指针 这个知识点想了2天终于搞懂了。 先看代码&#xff0c;试着理解一下&#xff0c;不理解再看我后面的解释。 解释&#xff1a; 首先&#xff0c;和平常创建一个结构体一样&#xff0c;唯独不同的就是里面的变量是一个函数指针&#xff0c;关…
阅读更多...
Spring Bean作用域

Spring Bean作用域

目录 什么是作用域呢 ? 那什么又是Spring Bean的作用域呢 ? Spring框架默认Bean作用域是什么呢 ? Spring Bean的作用域都有哪些呢 ? 如何设置Bean作用域 什么是作用域呢 ? 在JavaSE中,作用域就是指一个变量可生效的范围. 就比如一个变量的作用域是方法的代码块的范围…
阅读更多...
fpga实操训练（signal tap调试）

fpga实操训练（signal tap调试）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 编写软件的同学都知道&#xff0c;如果需要调试软件的话&#xff0c;除了要学会打印信息日志之外&#xff0c;另外一个很重要的方面&#xff0c;就…
阅读更多...
http 库的服务端实现

http 库的服务端实现

前言 net/http 库的客户端实现(上) net/http 库的客户端实现(下) net/http 库的服务端实现 上两篇文章介绍了 http 客户端的实现&#xff0c;这篇文章看一下服务端的实现 服务端 使用 net/http 库可以快速搭建HTTP服务&#xff0c;HTTP服务端主要包含两部分&#xff1a; …
阅读更多...
5G无线技术基础自学系列 | 5G网络切换问题分析

5G无线技术基础自学系列 | 5G网络切换问题分析

素材来源&#xff1a;《5G无线网络规划与优化》 一边学习一边整理内容&#xff0c;并与大家分享&#xff0c;侵权即删&#xff0c;谢谢支持&#xff01; 附上汇总贴&#xff1a;5G无线技术基础自学系列 | 汇总_COCOgsta的博客-CSDN博客 无线通信的最大特点在于其具有移动性&a…
阅读更多...
提高搜狗PR最好的方法与搜狗PR权重在线查询

提高搜狗PR最好的方法与搜狗PR权重在线查询

搜狗PR是什么? 搜狗PR值全称为搜狗PageRank(网页级别)&#xff0c;是搜狗用于用来标识网页的等级、重要性的一种方法&#xff0c;是搜狗用来衡量一个网站的好坏的重要标准之一。 搜狗在揉合了诸如Title标识和Keywords标识等所有其它因素之后&#xff0c;通过PageRank来…
阅读更多...
react学习

react学习

1. React概述 1.1 什么是react&#xff1f; React 是一个用于构建用户界面的 JavaScript 库 用户界面:HTML页面(前端) React 主要用来写HTML页面&#xff0c;或构建Web应用如果从 MVC 的角度来看&#xff0c;React 仅仅是视图层(V)&#xff0c;也就是只负责视图的染&#xff0…
阅读更多...
Day44——Dp专题

Day44——Dp专题

文章目录子序列问题27.最长递增子序列28、最长连续递增序列29、最长重复子数组30、最长公共子序列31、不相交的线32、最大子序和33、判断子序列34、不同的子序列35、两个字符串的删除操作36、编辑距离37、回文子串38、最长回文子序列动态规划总结篇背包问题系列股票系列子序列系…
阅读更多...
java论坛贴子网站ssm论坛项目发帖子网站论坛系统论坛源码

java论坛贴子网站ssm论坛项目发帖子网站论坛系统论坛源码

ssm开发的论坛系统&#xff0c;用户注册后可以发布帖子&#xff0c;其他人可以评论回复点赞评论和点赞回复&#xff0c;用户可以在个人中心管理自己的帖子&#xff0c;以及查看自己对他人的回复&#xff0c;和他人对自己的回复。 演示视频&#xff1a; https://www.bilibili.c…
阅读更多...
图(Graph)的定义

图(Graph)的定义

图(Graph)的定义 文章目录图(Graph)的定义●图的形式化定义:G (V,E)●无向图和有向图的表示形式:● 有向图和无向图的定义●抽象数据类型定义ADT●图形结构属于复杂的非线性结构● 图由顶点的集合和边的集合构成 ●图的形式化定义:G (V,E) • 集合V(vertex):顶点的有限集合,…
阅读更多...
多线程基础入门

多线程基础入门

文章目录前言一、认识线程&#xff08;一&#xff09;概念1.线程是什么2.为啥要有线程&#xff08;轻量级进程&#xff09;为什么线程比进程更轻量经典面试题&#xff1a;谈谈进程和线程的区别和联系3.线程的结构&#xff08;二&#xff09;第一个多线程程序&#xff08;三&…
阅读更多...
Java中的自旋锁，手动实现一个自旋锁

Java中的自旋锁，手动实现一个自旋锁

自旋锁 CAS是实现自旋锁的基础&#xff0c;CAS利用CPU指令保证了操作的原子性&#xff0c;已达到锁的效果。自旋是指尝试获取锁的线程不会立即阻塞&#xff0c;而是采用循环的方式去尝试获取锁&#xff0c; 当线程发现锁被占用时&#xff0c;会不断循环判断锁的状态&#xff0…
阅读更多...
计算机网络最新复习【太原理工大学】

计算机网络最新复习【太原理工大学】

课后题 Word 版&#xff0c;提取码&#xff1a;5201https://pan.baidu.com/s/13xzx8qr8Mnh4TWTS_dEYxA 目录 一、题型 二、考点 一、题型 1. 选择题 40 个&#xff0c;每个 1 分&#xff0c;共 40 分。&#xff08;大部分可一眼看出答案&#xff09; 2. 填空题 15 个&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023