Javascript

React入门(八)

本文主要是介绍React入门(八),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

路由

  • 一、路由
    • 1.1、路由传参
    • 1.2、路由上下文
    • 1.3、非路由跳转的组件获取路由上下文
    • 1.4、exact属性
    • 1.5、404
    • 1.6、Switch
    • 1.7、Redirect
  • 二、选择器冲突解决方案
    • 2.1、命名空间 BEM
    • 2.2、模块化
    • 2.3、scss
  • 三、async和await

一、路由

路由的基本使用我们已经讲过了,现在讲讲路由传参。

1.1、路由传参

路由传参完成的是组件之间的数据传递(组件传值)

1)、params

  • ​ 路由配置
<Route path='/Inbox/:id' component={Inbox} />
  • 路由跳转(传值)
//声明式导航:
<NavLink to={'/Inbox/01008'} >铅笔</NavLink>
//编程式导航:
this.props.history.push( '/Inbox/'+'01008' )
  • 取值
this.props.match.params.id 

优缺点:

优势 : 刷新,参数依然存在。

缺点 : 只能传字符串,并且,如果传的值太多的话,url会变的很长。

2)、query

  • 路由配置

​ 不用改变路由配置(类似于vue路由中的query)

<Route path='/Inbox' component={Inbox} />
  • 路由跳转(传值)
//声明式导航:
<Link to={{pathname:'/Inbox',query:{id:'01009'}}} >铅笔</Link>
//编程式导航:
this.props.history.push( {pathname:'/Inbox',query:{id:'01009'}} )
  • 取值
this.props.location.query.id

优缺点:

优势:参数不显示在地址栏,美观;

缺点:刷新地址栏,参数丢失

3)、state

​ 类似于query,只是state传的参数是加密的,query传的参数是公开的,使用方法只需要把query改为state即可

  • 路由配置

​ 不用改变路由配置。

<Route path='/Inbox' component={Inbox} />
  • 路由跳转(传值)
//声明式导航
<Link to={{pathname:'/Inbox',state:{id:'01009'}}} >铅笔</Link>
//编程式导航
this.props.history.push({pathname:'/Inbox',state:{id:"01"}});
  • 取值
this.props.location.state.id

优缺点:

优势:参数不显示在地址栏,美观;

缺点:刷新地址栏,(hash方式会丢失参数,Browser模式不会丢失参数)。

4)、search

  • 路由配置

​ 不用改变路由配置。

<Route path='/Inbox' component={Inbox} />
  • 传值
//声明式导航
<Link to='/Inbox?a=1&b=2' >铅笔</Link>
//编程式导航
this.props.history.push({pathname:'/Inbox',search:'?a=1&b=2'})
  • 取值
this.props.location.search

注意:

用location.search所获取的是查询字符串,所以,还需要进一步的解析,也可以使用第三方模块:qs,或者nodejs里的query-string

1.2、路由上下文

在react-router里面,如果组件是通过路由跳转的,那么它会把路由相关的API挂在了组件的props上(vue-Router使用的 r o u t e r 和 router和 router和route),并且分为history,location,match。

history: 历史,用来跳转的,并做历史记录。
location:  地址,地址栏上路径,并保存着query,state,search等数据。
match: 匹配,匹配到的路径

1.3、非路由跳转的组件获取路由上下文

在这之前,我们先看看组件在页面上展示的两种情况下,props对象的内容

1)、标签名的方式直接展示的组件(没有属性),值为空

2)、路由跳转的方式展示的组件,props会自动增加属性:history,match,location。

那么, 如果用标签名的方式,如何获取到路由上下文?往下看。

  • 通过属性传递

    首先当前组件是路由跳转过来的,然后把路由上下文通过属性的方式传递给子组件。

     <AboutSub02 {...this.props} />
    
  • 通过withRouter包装

    接收路由上下文的组件用withRouter函数(高阶组件)进行包裹

如:

import {withRouter} from 'react-router-dom'

class 组件 extends Component{
    
}

export default withRouter(组件)

1.4、exact属性

react的路由匹配默认是模糊的,包容的,如果想使用严格匹配,那么,把Route组件的exact属性设置为true。

<Route exact={true} path="/" component={App} />

1.5、404

在路由配置里不设置path属性,那么,就总是会匹配上。404页面可以用(结合Switch)

<Route component={Error}/> 总是会匹配

1.6、Switch

​ 排他性匹配

​简单理解:匹配到第一个就不再匹配,除非地址改变。


区分:exact和switch

excat:表示匹配规则,exact={true} 表示地址栏的路径和路由配置中path必须完全相等才能匹配到。

switch:表示排他性,即:一旦匹配成功后,就不再匹配其它路由匹配。

1.7、Redirect

类似于vue中的重定向。(这里是一个组件)

<Redirect exact={true} from="/" to="/Home" />

react路由的一些扩展(了解)

组件及其作用:

组件作用
路由模式BrowserRouter约定模式 为 history,使用 HTML5 提供的 history API 来保持 UI 和 URL 的同步
路由模式HashRouter约定模式 为 hash,使用 URL 的 hash 来保持 UI 和URL 的同步
声明式跳转NavLink声明式跳转 还可以约定 路由激活状态
声明式跳转Link声明式跳转 无激活状态
重定向Redirect重定向 ~~ replace
匹配并展示Route匹配组件,并展示组件。即匹配成功后,组件立即被替换成匹配的组件
排他性匹配Switch排他性匹配。如果不想使用包容性,那么使用Switch。
高阶组件withRouter把不是通过路由切换过来的组件中,将 history、location、match 三个对象传入props对象上(高阶组件)

结构

  • BrowserRouter|HashRouter

    App(或其它组件)

    • NavLink|Link
    • Route
    • Redirect
      • 子组件
        • NavLink|Link
        • Route

BrowserRouter

属性类型作用
basenamestring所有位置的基本URL。如果您的应用是从服务器上的子目录提供的,则需要将其设置为子目录。格式正确的基本名称应以斜杠开头,但不能以斜杠结尾
getUserConfirmationFunction用于确认导航的功能。默认使用window.confirm

Route

属性类型作用
pathstring |object路由匹配路径。没有path属性的Route 总是会 匹配
exactboolean为true时,要求全路径匹配(/home)。路由默认为“包含”的(/和/home都匹配),这意味着多个 Route 可以同时进行匹配和渲染
componentFunction |component在地址匹配的时候React的组件才会被渲染,route props也会随着一起被渲染
renderFunction内联渲染和包装组件,要求要返回目标组件的调用

Link

属性类型作用
tostring | 对象{pathname:,search:,hash:}要跳转的路径或地址
replaceboolean是否替换历史记录

NavLink

属性类型作用
tostring|对象{pathname:,search:,hash:}要跳转的路径或地址
replaceboolean是否替换历史记录
activeClassNamestring当元素被选中时,设置选中样式,默认值为 active
activeStyleobject当元素被选中时,设置选中样式

Switch

该组件用来渲染匹配地址的第一个Route或者Redirect,仅渲染一个路由,排他性路由,默认全匹配(场景:侧边栏,引导选项卡等)

属性类型作用
locationstring object
childrennode

Redirect

该组件用来渲染匹配地址的第一个Route或者Redirect,仅渲染一个路由,排他性路由,默认全匹配(场景:侧边栏和面包屑,引导选项卡等

属性类型作用
fromstring来自
tostring object去向
pushboolean添加历史记录
exactboolean严格匹配
sensitiveboolean区分大小写

二、选择器冲突解决方案

2.1、命名空间 BEM

BEM(Block, Element, Modifier)是由Yandex团队提出的一种前端命名规范。其核心思想是将页面拆分成一个个独立的富有语义的块(blocks),十分有利于代码复用。

    Block:代表块(Block):也是模块的意思
    Element:元素(Element):
    Modifier: 修饰符(Modifier)

2.2、模块化

import 变量  from './css/xx.module.css' 
<jsx className={变量.类名|id}

//step1 (脚手架默认配置了)
webpack配置 "style-loader!css-loader?modules" | module:true


//step2 模块化时
改名xx.css -> xx.module.css 

2.3、scss

  • 安装: node-sass
npm i node-sass -S
  • 引入sass
//1)、普通引入
import 'xx/xx.scss'

   <jsx className="box" />



//2)、模块化
import style form xx.module.scss

   <jsx className={style.box}

  • 引入全局的(公共的)scss
 - 局部scss文件内部: @import './全局.scss'

 - webpack配置一次,局部scss内部直接使用
//1. 安装插件 : sass-resources-loader
//2. 配置修改webpack.config.js

{
  test:sassRegex,
  ...
  use: [
    {loader:'style-loader'},
    {loader:'css-loader'}, 
    {loader:'sass-loader'},
    {
      loader: 'sass-resources-loader',
      options:{
        resources:'./src/xx/全局主题.scss'
      }
    }
  ]
}

注意:

loader:'css-loader?modules'    ?modules 模块化时需要添加
resources 指向作用域在项目环境下

三、async和await

es7用来彻底解决回调地狱的问题。

具体的可以参考

async await

这篇关于React入门(八)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!