Web前端-React学习

news2024/11/14 11:37:24

React基础

React 概述

React 是一个用于构建用户界面JavaScript库

用户界面: HTML页面(前端)
React主要用来写HTML页面, 或构建Web应用

如果从MVC的角度来看,React仅仅是视图层(V),也就是只负责视图的渲染,而并非提供了完整的M和C的功能。

React 有如下几个特点:

  1. 声明式:你只需要描述UI(HTML)看起来是什么样,就跟写HTML一样,React只负责渲染UI,并在数据变化时更新UI

在这里插入图片描述

  1. 基于组件: 组件是React最重要的内容;组件是页面中的部分内容;组合、复用多个组件,可以实现完整的页面功能
  2. 学习一次,随处使用: 使用React可以开发Web应用,也可以开发移动端内容(react-native),也可以开发VR(虚拟现实)应用(react-360)

React的基本使用

在我们安装React之前, 可以先安装yarn的安装参考链接

React的安装命令:npm install react react-dom

  • react包是核心,提供创建元素、组件等功能
  • react-dom包提供DOM相关功能等

在这里插入图片描述

React脚手架的使用

使用React脚手架初始化项目

  1. 初始化项目命令: npx create-react-app xxx(项目名称)
  2. 启动项目,在项目根目录执行命令: npm start或者yarn start
    在这里插入图片描述
  • npx命令介绍:

    • npm v5.2.0引入一条命令
    • 目的:提升包内提升的命令行工具的使用体验
    • 原来 : 先安装脚手架安装包,在使用这个包中提供的命令
    • 现在: 无需安装脚手架包,就可以直接使用这个包提供的命令
  • 使用React脚手架初始化项目

    • 推荐使用:npx create-react-app xxx(项目名称)
    • npm init react-app xxx
    • yarn create react-app xxx
      • yarn是Facebook发布的包管理器,可以看做是npm的替代品,功能与npm相同
      • yarn具有快速、可靠和安全的特点
      • 初始化新项目: yarn init
      • 安装包: yarn add 包名称
      • 其它命令请参考yarn文档

在脚手架中使用React

  1. 导入react和react-dom两个包:
import React from "react";
import { ReactDOM } from "react";
  1. 调用React.createElement()方法创建react元素
  2. 调用ReactDOM.render()方法渲染react元素到页面中
// // 导入react
import React from "react";
import ReactDOM from 'react-dom';

// 创建react元素
const title = React.createElement('h1', null, 'Hello React')

// 渲染react元素到页面中
ReactDOM.render(title, document.getElementById('root'))


目前创建项目是下面新的写法:
import React from "react";
import ReactDOM from 'react-dom/client';

// 创建react元素
const title = React.createElement('h1', null, 'Hello React')

// 渲染react元素到页面中
//  创建root对象
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(title)

JSX

JSX的基本使用

  • React.createElement()有如下问题:繁琐不简洁、不直观,无法一眼看出所描述的结构、不优雅,用户体验不爽 问题

在这里插入图片描述

JSX是JavaScript XML的描写,表示在JavaScript代码中写XML(HTML)格式的代码。

优势:声明式语法更加直观、与HTML结构相同,降低了学习成本、提升开发效率

在这里插入图片描述

JSX的基本使用步骤:
在这里插入图片描述

为什么脚手架中可以使用JSX语法?
JSX不是标准的ECMAScript语法,它是ECMAScript的语法扩展
需要使用babel编译处理后,才能再浏览器环境中使用
creat-react-app脚手架中以默认有该配置,无需手动配置
编译JSX语法的包为@babel/preset-react

JSX的使用注意点:

  1. React元素的属性名使用驼峰命名法
  2. 特殊属性名: class- className、for -htmlFor、tabindex- tabIndex
  3. 没有子节点的React元素可以用/>结束
  4. 推荐: 使用小括号包括JSX,从而避免JS中的自动插入分号陷阱

在这里插入图片描述

JSX中使用JavaScript表达式

数据都存储在JS中,语法:{ JavaScript表达式 }, 注意: 语法中是单大括号,不是双大括号
在这里插入图片描述

  • 注意点:
    • 单大括号中可以使用任意的JavaScript表达式
    • JSX 自身也是JS表达式
    • 注意: JS中的对象是一个例外,一般只会出现在style属性中
    • 注意:不能在{}中出现语句(比如:if/for 等)

在这里插入图片描述

JXS的条件渲染

根据条件渲染特定的JSX结构:
在这里插入图片描述

  • 可以使用if/else三元运算符逻辑运算符来实现

JXS的列表渲染

  • 如果我们要渲染一组数据,应该使用数组的map()方法
  • 注意:渲染列表时应该添加key属性,key属性的值要保证唯一
  • 原则:map()便利谁,就给谁添加key属性
  • 注意:尽量避免使用索引号作为key

如果我在循环的时候不加key, 会如下错误:
在这里插入图片描述

在这里插入图片描述

JXS的样式处理

JSX中关于行类样式和类名-className(推荐)
在这里插入图片描述

React 基础组件

React 组件介绍

  • 组件是React的一等共民,使用React就是在用组价
  • 组件表示页面中的部分功能
  • 组合多个组件实现完整的页面组合
  • 特点:可复用、独立、可组合

在这里插入图片描述

React 组件的两种创建方式

使用函数创建组件

  • 函数组件: 使用JS的函数(或箭头函数)创建组件
  • 约定1:函数名称必须以大写字母开头
  • 约定2:函数组件必须有返回值,表示该组件的结构
  • 如果返回值为null,表示不渲染任何内容

在这里插入图片描述

  • 渲染函数组件:用函数名作为组件标签名
  • 组件标签可以是单标签也可以是双标签
  • 函数必须有返回值
  • 组件名称必须大写字母开头,React据此区分 组件和 普通的React元素

使用类创建组件

  • 类组件: 使用ES6 的class创建的组件
  • 约定1: 类名称也必须以大写字母开头
  • 约定2:类组件应该继承ReactComponet父类,从而可以使用父类中提供的方法或属性
  • 约定3:类组件必须提供render()方法
  • 约定4:render()方法必须有返回值,表示该组件的结构

在这里插入图片描述

  • 思考: 项目中的组件多了之后,该如何组织这些组件呢?
  • 选择一: 将所有组件放在同一个JS文件中
  • 选择二:将每个组件放到单独的JS文件中
  • 组件作为一个独立的个体, 一般都会放到一个单独的JS文件中

抽离为独立JS文件:

  1. 创建Hello.js
  2. 在Hello.js 导入React
  3. 创建组件(函数或类)
  4. 在Hello.js中导出该组件
  5. 在index.js中导入Hello组件
  6. 渲染组件

在这里插入图片描述

React 事件处理

事件绑定

  • React事件绑定语法与DOM事语法相似
  • 语法:on + 事件名称 = (事件处理 程序),比如: onClick = { () => () }
  • 注意:React事件采集用驼峰命名法,比如:onMouseEnter、onFocus
  • 在函数组件中绑定事件:
    在这里插入图片描述

事件对象

  • 可以通过事件处理程序的参数获取到事件对象
  • React中的事件对象叫做:合成事件(对象)
  • 合成事件: 兼容所有浏览器,无需担心垮浏览器兼容性的问题
    在这里插入图片描述

有状态组件和无状态组件

  • 函数组件又叫做无状态组件, 类组件又叫做有状态组件
  • 状态(state)即数据
  • 函数组件没有自己的状态, 只负责数据展示(静)
  • 类组件有自己的状态, 负责更新UI,让页面起来

比如接下来我们想做一个计数器的案例,点击按钮然数值加1。0和1就是不同的状态,而由0变为1就表示状态发生了变化,状态变化后,UI也相应的更新。React想要实现该功能,就要使用状态组件来完成。

在这里插入图片描述

组件中的state 和 setState()

state

state的基本使用:

  • 状态(state)即数据,是组件内部的私有问题,只能在组件内部使用
  • state的值是对象,表示一个组件中可以有多个数据
    在这里插入图片描述
  • 获取状态是通过:this.state
  • 状态即数据
  • 状态是私有的,只能在组件内部使用

setState

  • 状态是可以改变的
  • 语法:this.setState({ 要修改的数据 })
  • 注意: 不要直接修改state的值,这是错误的!!!
  • setState()作用: 1修改state 2更新UI
  • 思想: 数据驱动视图

在这里插入图片描述

通过上面代码可知,JSX中掺杂过多的JS逻辑代码,会显得非常混乱, 推荐:将逻辑抽离到单独的方法中,保证JSX结构清晰

当我们将逻辑抽离 到一个方法之后,运行,发现报如下错误:
在这里插入图片描述

  • 原因: 事件处理程序中的this值为undefined
  • 希望:this指向组件实例(render方法中的this即为组价实例)

事件绑定只想this

如果解决处理上述程序中this的指向问题,有如下三种方法:

  1. 箭头函数
  2. Function.proottype.bind()
  3. class的实例方法
  • 箭头函数:
    • 利用箭头函数自身不绑定this的特点(箭头函数不会产生this,它会从作用域链的上一层继承this
    • render()方法中的this位组件实例,可以获取到setState()

在这里插入图片描述

  • Function.proottype.bind() : 利用ES6中的bind()方法,将事件处理程序中的this与组件实例绑定到一起

在这里插入图片描述

  • class的实例方法: 利用箭头函数形式的class实例方法, 注意:该语法是实验性语法,但是,由于babel的存在可以直接使用

在这里插入图片描述

总结: 推荐使用class的实例方法

表单处理

react-devtools 工具的安装

下载安装。react-devtools

在这里插入图片描述

下载完了之后将crx后缀改为zip,然后将这个zip拖到谷歌浏览器扩展程序那里就行了

受控组件

  • HTML中表单元素是可以输入的,也就是有自己的可变状态
  • 而,React中可变状态通常保存在state中,并且只能通过setState()方法来修改
  • React讲state与表单元素值value绑定到一起,由state的值来控制表单元素的值
  • 受控组件: 其值受到React控制的表单元素

在这里插入图片描述
在这里插入图片描述

非受控组件

  • 说明:借助于ref,使用原声DOM方式来获取表单元素值
  • ref的作用:获取DOM或组件
  1. 调用React.createRef()方法创建一个ref对象
  2. 将创建好的ref添加到文本框中
  3. 通过ref对象获取到文本框的值
    在这里插入图片描述

React 组件进阶

组件是独立且封闭的单元,默认情况下,只能使用组件自己的数据,在组件化过程中,我们将一个完整的功能拆分成多个组件,以更好的完成整个应用的功能。而这个过程中,多个组件之间不可避免的要共享某些数据。为了实现这些功能,就需要打破组件的独立封闭性,让其与外界沟通。这个过程就是组件通讯
在这里插入图片描述

组件的props

  • 组件是封闭的,要接收外部数据应该通过props来实现
  • props的作用: 接收传递给组件的数据
  • 传递数据:给组件标签添加属性
  • 接受数据: 函数组件通过参数props接受数据,类组件通过this.props接受数据
    在这里插入图片描述
    特点:
  1. 可以给组件传递任意类型的数据
  2. props是只读的对象,只能读取属性的值,无法修改对象
  3. 注意:使用类组件时,如果写了构造函数,应该将props传递给super(),否则,无法在构造中获取到props!

在这里插入图片描述

组件通讯的三种方式

父组件 -> 子组件

  1. 父组件提供要传递的state数据
  2. 给子组件白标签添加属性,值为state中的数据
  3. 子组件中通过props接受父组件中传递的数据
    在这里插入图片描述

子组件 -> 父组件

思路: 利用回调函数,父组件提供回调函数,子组件调用,将要传递的数据作为回调函数的参数。

  1. 父组件提供一个回调函数(用于接收数据)
  2. 将该函数作为属性的值,传递给子组件

在这里插入图片描述

兄弟组件

  • 共享状态提升到最近的公共组件中,由公共父组件管理这个状态
  • 思想: 状态提升
  • 公共父组件职责: 1.提升共享状态 2.提供操作共享状态的方法
  • 要通讯的子组件只需要通过props接受状态或操作状态的方法
    在这里插入图片描述
    在这里插入图片描述

Context

思考: App组件要传递数据给Child组件,该如何处理?
在这里插入图片描述
原始方法: 可以通过props属性,一层一层的往下传递,这种方式比较繁琐。
推荐: 使用Context, 其作用:跨组件传递数据(比如:主题、语言等)

  • 使用步骤
    • 调用React.creatContext()创建Provider(提供数据)和Consumer(消费数据)两个组件
    • 使用Provider组件作为父节点
    • 设置value属性,表示要传递的数据
    • 调用Consumer组件接收数据

在这里插入图片描述

总结:

  1. 如果两个组件是远方亲戚(比如,嵌套多层)可以使用Context实现组件通讯
  2. Context提供了两个组件: Provide和Consumer
  3. Provider组件:用来提供数据
  4. Consumer组件:用来消费数据

props深入

children属性

  • children属性:表示组件标签的子节点,当组件标签有子节点时,props就会有该属性
  • children属性与普通的props一样,值可以是任意值(文本、React元素、组件,甚至是函数)

在这里插入图片描述
注意: 只有组件标签有子节点的时候,才会有children属性

props校验

  • 对于组件来说,props是外来的,无法保证组件使用者传入什么格式的数据

  • 如果传入的数据格式不对,可能会导致组件内部报错

  • 关键问题:组件的使用者不知道明确的错误原因
    在这里插入图片描述

  • props校验:允许在创建组件的时候,就指定props的类型、格式等

  • 作用:捕获使用组件时因为props导致的错误,给出明确的错误提示,增加组价的健壮性
    在这里插入图片描述

  • props校验的使用步骤:

    1. 安装包prop-type(yarn add prop-types/npm i porp-types
    2. 导入prop-types包
    3. 使用组件名.propTypes={}来组件的props添加校验规则
    4. 校验规则通过PropTypes对象来指定

在这里插入图片描述

约束规则:

  1. 常见类型: array、bool、func、number、object、string
  2. React元素类型:element
  3. 必填项:isRequired
  4. 特定结构的对象:shape({})

在这里插入图片描述

相关规则参考地址:https://zh-hans.react.dev/reference/react/Component#static-proptypes

组件的默认值

props的默认值:

  • 场景: 分页组件 -> 每页显示条数
  • 作用: 给props设置默认值,在未传入props时生效
    组件的默认值::

在这里插入图片描述

注意:props的值,如果有默认值,在使用组件时没有传值时使用默认值,有传值则使用传递的值

组件的生命周期

  • 组件的生命周期概述:
    • 意义:组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等
    • 组件的生命周期:组件从被创建到挂载到页面中运行,在到组件不用时卸载的过程
    • 生命周期的每个阶段总是伴随着一些方法调用,这些方法就是生命周期的钩子函数
    • 钩子函数的作用:为开发人员在不同阶段操作组件提供了时机。
    • 只有 类组件 才有生命组件
      在这里插入图片描述

创建时(挂载阶段)

  • 执行时机:组件创建时(页面加载时)
  • 执行顺序:
    在这里插入图片描述
    在这里插入图片描述

更新时(更新阶段)

  • 执行时机:1.setState() 2.forceUpdate() 3.组件接收到新的props
  • 说明: 以上三者任意一种变化,组件就会更新渲染
  • 执行顺序:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

卸载时(卸载阶段)

  • 执行时机: 组件从页面中消失
    在这里插入图片描述

不常用钩子函数介绍

旧版生命周期图:
在这里插入图片描述

新版完整的生命周期图:
在这里插入图片描述

render-props和高阶组件

render-props

render props模式不是新的API,而是利用React自身特点的编码技巧,演化而成的固定模式(写法)

  • 思路: 将要复用的state和操作state的方法封装到一个组件中
  • 问题1: 如何拿到该组件中复用的state?
  • 在使用组件时,添加一个值为函数的prop,通过函数参数来获取(需要组件内部实现)
  • 问题2: 如何渲染任意的UI?
  • 使用该函数的返回值作为要渲染的UI内容(需要组件内部实现)

使用步骤:

  1. 创建Mouse组件,在组件中提供复用的状态逻辑代码(1.状态 2.操作状态的方法)
  2. 将要复用的状态作为props.render(state)方法的参数,暴露到组件的外部
  3. 使用props.render()的返回值作为要渲染的内容

在这里插入图片描述

  • 注意:并不是该模式叫做render props就必须使用名为render的prop,实际 商行可以使用任意的prop名称
  • 把prop是一个函数并且告诉组件要渲染什么内容的技术叫做:render props模式
  • 推荐: 使用children代替render属性

在这里插入图片描述

高阶组件

  • 高阶组件: 实现状态逻辑复用,采用包装(装饰)模式,高阶组件就是通过包装组件,增强组件功能
  • 思路分析: 高阶组件(HOC, Hight-Order Component)是一个函数,接受要包装的组件,返回增强后的组件
  • 高阶组件内部创建一个类组件,在这个类组件中提供复用的状态逻辑代码,通过prop将复用的状态传递给被包装组件WrappedComponent

高阶组件基本使用

  1. 创建一个函数,名称约定以with开头
  2. 指定函数参数,参数应该以大写字母开头(作为要渲染的组件)
  3. 在函数内部创建一个类组件,同时将状态通过prop传递给参数组件
  4. 在该组件中,渲染参数组件,同时将状态通过prop传递给参数组件
  5. 调用该高阶组件,传入要增强的组件,通过返回值拿到增强后的组件,并将其渲染到页面中

在这里插入图片描述

设置displayName

  • 设置displayName:
    • 使用高阶组件存在的问题:得到的两个组件名称相同
    • 原因:默认情况下, React使用组件名称作为displayName
    • 解决方式: 为高阶组件 设置displayName便于调试时区分不同的组件
    • displayName的作用:用于设置调试信息(ReactDevelop Tools信息)

设置方式如下:
在这里插入图片描述

调试信息如下:
在这里插入图片描述

传递props

在这里插入图片描述
拿不到传递过来的props
当我们给组件传递props时, 会发现一个问题, 发现组件并没有获得我们传递的props。

原因: 因为当我们传递props时,首先是传递给高阶组件的,但是高阶组件并没有往下传递props,所以导致我们的组件并没有获取到props。

解决方式: 渲染WrappedComponent时,将statethis.props一起传递给组件
在这里插入图片描述

React原理揭秘

setState()的说明

  • setState()异步更新数据的
  • 注意: 使用该语法时,后面的setState()不要依赖于前面的setState()
  • 可以多次调用setState(),只会出发一次重新渲染

在这里插入图片描述

由上图可以看到, setState()方法是异步执行的。我们打印结果都显示1, 但是实际上count的值已经是2。
在这里插入图片描述

如果我们有需要连续调用setState()的需求, 并且调用存在依赖关系, 那么我们如何实现了?

  • 推荐: 使用setState((state, props) => {} )语法, 这种语法 也是异步更新state的
  • 参数state: 表示最新的state
  • 参数props: 表示最新的props

在这里插入图片描述
第二次调用setState,拿到第一次调用setState的结果, 参数state和props 都是最新状态的

在这里插入图片描述
如果想要在状态更新完成,则使用第二个参数
在这里插入图片描述

JSX语法的转化过程

  • JSX仅仅是createElement()方法的语法糖(简化语法)
  • JSX语法被@babel/preset-react插件编译为createElemnt()方法
  • React元素:是一个对象,用来描述你希望在屏幕上看到的内容

在这里插入图片描述

组件更新机制

  • setState() 的两个作用:
    • 修改state
    • 更新组件
  • 过程:父组件重新渲染时,也会重新渲染子组件,但只会渲染当前组件子树(当前组件以其所有子组件)
    在这里插入图片描述

在这里插入图片描述

组件性能优化

减轻state

  • 减轻state: 只存储组件渲染相关的数据(比如:count/列表数据/loading等)
  • 注意:不用做渲染的数据不要放在state中,比如定时器id等
  • 对于这种需要再多个方法中用到的数据,应该放在this中
    请添加图片描述

避免不必要的重新渲染

  • 组件更新机制:父组件更新会引起子组件也被更新,这种思路很清晰
  • 问题:子组件没有任何变化时也会重新渲染
  • 如果避免不必要的重新渲染?
  • 解决方式:使用钩子函数 shouldComponentUpdate(nextProps, nextState)
    • 在这个函数中,nextProps和nextState是最新的状态以及属性
  • 作用:这个函数有返回值,如果返回true,代表需要重新渲染,如果返回false,代表不需要重新渲染
  • 触发时机:更新阶段的钩子函数,组件重新渲染前执行(shouldComponentUpdate => render)

在这里插入图片描述

在这里插入图片描述

随机数案例

需求:随机生成数字,显示在页面,如果生成的数字与当前显示的数字相同,那么就不需要更新UI,反之更新UI。

  • 利用nextState参数来判断当前组件是否需要更新:
class App extends React.Component {
    state = {
        number: 0
    }
    // 点击事件,每次点击生成一个随机数
    hanldeBtn = () => {
        this.setState({
            number: Math.floor(Math.random() * 3)
        })
    }
    // 将要更新UI的时候会执行这个钩子函数
    shouldComponentUpdate(nextProps,nextState) {
         // 判断一下当前生成的 值是否与页面的值相等
         if(nextState.number !== this.state.number){
             return true
         }
         return false
    }
    render() {
        return (
            <div>
                随机数:{this.state.number} <br />
                <button onClick={this.hanldeBtn}>生成随机数</button>
            </div>
        )
    }
}
  • 利用props参数来判断是否需要进行更新:
class App extends React.Component {
    state = {
        number: 0
    }
    // 点击事件,每次点击生成一个随机数
    hanldeBtn = () => {
        this.setState({
            number: Math.floor(Math.random() * 3)
        })
    }

    render() {
        return (
            <div>
                <NumberBox number={this.state.number} />
                <button onClick={this.hanldeBtn}>生成随机数</button>
            </div>
        )
    }
}
class NumberBox extends React.Component {
    // 将要更新UI的时候会执行这个钩子函数
    shouldComponentUpdate(nextProps, nextState) {
        // 判断一下当前生成的 值是否与页面的值相等
        if (nextProps.number !== this.props.number) {
            return true
        }
        return false
    }
    render() {
        return (
            <h1>随机数:{this.props.number} </h1>
        )
    }
}

纯组件

作用以及使用

  • 纯组件: PureComponent 与 React.Component 功能相似
  • 区别: PureComponent 内部自动实现了 shouldComponentUpdate钩子,不需要手动比较
  • 原理:纯组件内部通过分别比对前后两次 props和state的值,来决定是否重新渲染组件

在这里插入图片描述

实现原理

  • 说明:纯组件内部的对比是 shallow compare(浅层对比)
  • 对于值类型来说:比较两个值是否相同

在这里插入图片描述

  • 引用类型:只比对对象的引用地址是否相同:
    在这里插入图片描述
  • 注意:state 或 props 中属性值为引用类型时,应该创建新数据,不要直接修改原数据
    在这里插入图片描述

虚拟DOM 和 Diff算法

  • React更新视图的思想是:只要state变化就重新渲染视图
  • 特点:思路非常清晰
  • 问题:组件中只有一个DOM元素需要更新时,也得把整个组件的内容重新渲染吗? 不是这样的
  • 理想状态:部分更新,只更新变化的地方
  • React运用的核心点就是 虚拟DOM 配合 Diff 算法

虚拟DOM

本质上就是一个JS对象,用来描述你希望在屏幕上看到的内容
请添加图片描述

Diff算法

  • 初次渲染时,React会根据初始化的state(model),创建一个虚拟DOM对象(树)
  • 根据虚拟DOM生成真正的DOM,渲染到页面
  • 当数据变化后(setState()),会重新根据新的数据,创建新的虚拟DOM对象(树)
  • 与上一次得到的虚拟DOM对象,使用Diff算法比对(找不同),得到需要更新的内容
  • 最终,React只将变化的内容更新(patch)到DOM中,重新渲染到页面
    请添加图片描述

代码演示

  • 组件render()调用后,根据状态和JSX结构生成虚拟DOM对象(render()方法的调用并不意味着浏览器进行渲染,render方法调用时意味着Diff算法开始比对了)
  • 示例中,只更新p元素的文本节点内容
  • 初次渲染的DOM对象

在这里插入图片描述

  • 总结:
    • 工作角度:应用第一,原理第二
    • 原理有助于更好的理解React的自身运行机制
    • setState() 异步更新数据
    • 父组件更新导致子组件更新,纯组件提升性能
    • 思路清晰简单为前提,虚拟DOM和Diff保效率(渲染变化的组件)
    • 虚拟DOM -> state + JSX
    • 虚拟DOM最大的特点是 脱离了浏览器的束缚,也就是意味着只要是能支持js的地方都可以用到react,所以为什么说react是可以进行跨平台的开发

React路由

react-router-dom最新版本官方文档 建议参照最新文档编程

现代的前端应用大多数是SPA(单页应用程序),也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器压力更小,所以更受欢迎。为了有效的使用单个页面来管理多页面的功能,前端路由应运而生。

  • 前端路由功能:让用户从一个视图(页面)导航到另一个视图(页面)
  • 前端路由是一套映射规则,在React中,是URL路径与组件的对应关系
  • 使用React路由简单来说,就是配置路径和组件

路由的基本使用

使用步骤

  • 安装:yarn add react-router-dom
  • 导入路由的三个核心组件 :Router / Route / Link
  • 使用Router组件包括整个应用(重要)
  • 使用Link组件作为导航菜单(路由入口)
  • 使用Route组件配置路由规则和要展示的组件(路由出口)

在这里插入图片描述
这里在使用react-router-dom时有个注意点, 6.0以下版本和6.0以上版本 route的使用方式不一样,具体使用差异如下:
在这里插入图片描述

常用组件说明

  • Router组件 :包裹整个应用,一个React应用只需要使用一次
  • 两种常用的Router: HashRouter和BrowserRouter
  • HashRouter: 使用URL的哈希值实现 (localhost:3000/#/home)
  • 推荐 BrowserRouter:使用H5的history API实现(localhost3000/home)
  • Link组件:用于指定导航链接(a标签)
  • 最终Link会编译成a标签,而to属性会被编译成 a标签的href属性
  • Route组件 :指定路由展示组件相关信息
    • path属性:路由规则,这里需要跟Link组件里面to属性的值一致
    • component/element 属性:展示的组件
    • Route写在哪,渲染出来的组件就在哪
      在这里插入图片描述

路由的执行过程

  • 当我们点击Link组件的时候,修改了浏览器地址栏中的url
  • React路由监听地址栏url的变化
  • React路由内部遍历所有的Route组件,拿着Route里面path规则与pathname进行匹配
  • 当路由规则(path)能够匹配地址栏中的pathname时,就展示该Route组件的内容
    在这里插入图片描述

编程式导航

  • 场景: 点击登录按钮,登录成功后,通过代码跳转到后台首页,如何实现?
  • 编程式导航: 通过JS代码来来实现页面跳转
  • history是React路由提供的,用于获取浏览器历史记录的相关信息
  • push(path):跳转到某个页面,参数path表示要跳转的路径
  • go(n):前进或后退功能,参数n表示前进或后退页面数量

在这里插入图片描述

默认路由

  • 现在的路由都是通过点击导航菜单后展示的,如果进入页面的时候就主动触发路由呢
  • 默认路由:表示进入页面时就会匹配的路由
  • 默认路由:只需要把path设置为 '/'

在这里插入图片描述

匹配模式

模糊匹配模式

  • 当Link组件的to属性值为 ‘/login’ 时候,为什么默认路由也被匹配成功?
  • 默认情况下,React路由是模糊匹配模式
  • 模糊匹配规则:只要pathname以path开头就会匹配成功

在这里插入图片描述
在这里插入图片描述

精确匹配

  • 默认路由认可情况下都会展示,如果避免这种问题?
  • 给Route组件添加exact属性,让其变为精准匹配模式
  • 精确匹配:只有当path和pathname完全匹配时才会展示改路由

在这里插入图片描述
以上是v6.0版本以下的精准匹配,V6版本内部算法改变,它默认就是匹配完整路径,先后顺序不再重要,它能够自动找出最优匹配路径

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

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

相关文章

多目标建模loss为什么最好同时收敛?

多目标的多个loss是否同时收敛最好&#xff1f; 假设 task A的独有参数 W a W_a Wa​task B的独有参数 W b W_b Wb​task A和 task B的共享的参数 W s W_s Ws​ 那么 l o s s l o s s a l o s s b loss loss_a loss_b losslossa​lossb​ 假设损失函数为 f f f&…

【DepthFilter】深度滤波器

14讲P326-327 函数实现一个深度滤波器&#xff0c;用于计算图像中某个像素点的深度值。算法步骤的含义和含义&#xff1a; 将当前帧的像素点和参考帧的像素点通过三角化计算深度。将参考帧到当前帧的变换矩阵 T_C_R 转换为当前帧到参考帧的变换矩阵 T_R_C。将参考帧像素点 pt_…

Docker超详细基础使用(带图)

目录 安装ubuntu 基本使用命令 docker run 容器名 延伸命令 启动ubuntu 查看所有正在运行的容器 指定容器别名启动 doker ps 延伸命令 退出容器 重新进入正在运行的容器 启动容器 删除已停止的容器 强制删除容器 查看容器日志 查看容器内部运行的进程 ​编辑 查看容…

Axure教程—分段滑动条

本文将教大家如何用AXURE中动态面板制作单分段滑动条 一、效果 预览地址&#xff1a;https://c00qrq.axshare.com 下载地址&#xff1a;https://download.csdn.net/download/weixin_43516258/87881401?spm1001.2014.3001.5503 二、功能 滑块滑动到相应的浮点&#xff0c;显示…

【SVN】SVN查看日志时报错:联系服务器时出现问题,条目不可读

目录 0.背景介绍 1.问题原因 2.解决步骤 0.背景介绍 环境&#xff1a;SVN服务器在ubuntu下&#xff0c;SVN客户端在windows下。 最近在搭ubuntu下的SVN的服务器&#xff0c;然后再windows下用SVN客户端将文件上传至服务器保管。 windows下想查看日志时&#xff0c;报错【…

React学习7 redux

redux的三个核心概念 1. action 动作的对象包含2个属性 type&#xff1a;标识属性, 值为字符串, 唯一, 必要属性data&#xff1a;数据属性, 值类型任意, 可选属性例子&#xff1a;{ type: ADD_STUDENT,data:{name: tom,age:18} } 2. reducer 用于初始化状态、加工状态。加工…

健身器材开发方案,带有12位ADC检测、LED屏显的语音IC-N9300

身体锻炼过程中所使用到的所有物品&#xff0c;健身器材类体育用品则主要涉及健身领域&#xff0c;包括室外健身器材和室内健身器材。 每天清晨或傍晚跑跑步&#xff0c;不仅能提高身体素质同时能得到很好的瘦身效果。然而大部分人觉得慢跑等运动过于无聊没有给予运动者本身进行…

【Redis编译安装】---redis-4.0.8

【Redis编译安装】---redis-4.0.8 &#x1f53b; 一、Redis 编译安装1.1 ⛳ 上传解压1.2 ⛳ 升级gcc环境1.3 ⛳ 编译安装1.3.1 &#x1f341;cd 到redis解压目录1.3.2 &#x1f341;编译1.3.3 &#x1f341; make test1.3.4 &#x1f341; 安装tcl-8.51.3.5 &#x1f341; 安装…

shell 第十一章

1.写一个库函数&#xff0c;用定时任务调用这个库函数&#xff0c;每月1号执行 1.sh: 1.1.sh: 2.以免交互的方式实现 ssh 远程登录&#xff0c;密码错误也直接退出&#xff0c;不用人干预 3.以免交互的方式&#xff0c;实现磁盘分区、格式化、挂载

Keysight 34970A数据采集记录仪产品介绍

Keysight 34970A数据采集记录仪 Keysight 34970A数据采集记录仪开关单元由一个 3 插槽主机和一个内置的 6 1/2 位数字万用表组成。每个通道可以单独配置&#xff0c;以测量 11 种不同功能之一&#xff0c;这样既不会增加成本&#xff0c;也不必使用复杂的信号调理附件。您可用…

【干货】PCB材料选择与性能比较

PCB板被广泛应用于电子行业&#xff0c;作为电子设备的重要组成部分之一&#xff0c;负责连接各种电子元件。PCB板的性能直接影响着电子设备的质量和稳定性。而PCB板的材料选择则是影响PCB板性能的关键因素之一。本文将对常见PCB材料进行比较分析&#xff0c;以便于选择适合的材…

直线模组的应用案例

直线模组最早是在德国开发使用的&#xff0c;因其具有单体运动速度快、重复定位精度高、本体质量轻、占设备空间小、寿命长等特点&#xff0c;被广泛应用在各种各样的机械设备中&#xff0c;尤其是自动化领域&#xff0c;基本上都能看到直线模组的身影&#xff0c;那么&#xf…

Target DVS EDI项目开源介绍

近期为了帮助广大用户更好地使用 EDI 系统&#xff0c;我们根据以往的项目实施经验&#xff0c;将成熟的 EDI 项目进行开源。用户安装好知行之桥EDI系统之后&#xff0c;只需要下载我们整理好的示例代码&#xff0c;并放置在知行之桥指定的工作区中&#xff0c;即可开始使用。 …

小程序项目结构与组件基础

文章和代码已经归档至【Github仓库&#xff1a;https://github.com/timerring/front-end-tutorial 】或者公众号【AIShareLab】回复 小程序 也可获取。 文章目录 项目结构了解项目的基本组成结构小程序页面的组成部分json配置文件的作用全局配置文件app.jsonproject.config.jso…

数据仓库基础知识

数据仓库 企业信息应用现状企业对应用集成的需求1. 什么是BI1.1 BI的定义1.2 BI要做的事情1.3 BI的智能1.4 BI应用架构1.5 BI系统架构1.6 BI应用带来的关键效益 2. 什么是数据仓库2.1 数据仓库的概念2.2 数据仓库的特性 3. 数据仓库设计中的几个重要概念3.1 ETL3.2 数据集市&am…

vue2vue3 el-table实现整行拖拽排序功能(使用sortablejs插件)

1、此功能已集成到[TTable组件中]—Vue2TTable组件 、Vue3TTable组件 2、最终效果 3、安装sortablejs npm install sortablejs --save4、Vue2实现方式 <template><el-tableref"el-table":data"tableData":class"{cursor:isCopy,row_sort:…

探究JavaScript:Array方法、原型链继承和JSON

目录 Array对象 构造函数 静态方法 Array.isArray() 实例方法 valueOf&#xff08;&#xff09; toString&#xff08;&#xff09; 对象的继承 构造函数的缺点 prototype属性作用 原型链 读取对象的某个属性的过程&#xff1a; constructor属性 instanceof运算符…

Linux防火墙学习笔记5

iptables规则匹配及动作&#xff1a; 规则&#xff1a;根据规定的匹配条件来尝试匹配每个流经此处的数据包&#xff0c;匹配成功&#xff0c;则由规则指定的处理动作进行处理。规则是由匹配条件和动作组成的。 iptables的规则匹配条件分类&#xff1a; 基本匹配条件&#xff…

STM32 EC200N-CN MQTT链接服务器开发实录

开发环境 硬件&#xff1a;STM32F091CBT6 、EC200N-CN模块板 、USB-TTL串口助手 软件&#xff1a;VS CODE 、 STM32CUBEMX、IAR 8.32 1.硬件设计 连接好EC200N-CN模块和单片机主板。 EC200N-CN模块设计时注意供电和IO电平转换。 EC200N-CN是低功耗的&#xff0c;其主串口…

宝藏达人 | 10年运营支招,一文看懂运营全套技能!

本期介绍的ProcessOn宝藏达人是爱吃小麦馒头&#xff0c;他在互联网领域担任运营官十年以上&#xff0c;有着丰富的业务实操经验和运营方法论。职场风雨历练中他接触过一些“会省钱”的老板&#xff0c;发现有的企业对运营这一职业并未足够重视&#xff0c;随便调个HR做运营经理…