![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
无聊人_
俺把俺的学习笔记竟都分享出来咧
展开
-
react 使用context方式向后代组件进行传值(react组件传值——context)
今天介绍一种在react种进行组件传值的方式——context需求有三个组件ABC,A为B父,B为C父。A中有一个数据username,要将它传给C组件。完整代码与效果首先看如下完整代码,我们再逐渐分析import React, { Component } from 'react'const MyContext = React.createContext()const {Provider} = MyContextexport default class A extends C原创 2021-02-24 18:05:24 · 484 阅读 · 0 评论 -
react实现路由懒加载 【lazy | Suspense | BrowserRouter】
react实现路由懒加载一般我们引入路由像import World from '../World' 这样引入而路由懒加载要使用lazy函数1、懒加载方式引入路由const World = lazy(() => import('../World'))2、使用Suspense只是像第一步那样还不够,系统会报错。首先明白一点:使用了懒加载之后加载路由的时机是点击对应的路由链接时开始发送请求引入路由组件。假如网速慢就要等待很长的时间,这时候需要显示正在加载中的文字或效果以提升.原创 2021-02-24 02:01:25 · 1264 阅读 · 1 评论 -
react初始化项目——如何初始化一个纯净、精简的react项目
react 默认创建出来的项目文件一大堆,默写文件我们从头到尾都不会用到,而且这些文件会干扰我们项目的开发,所以本文章将讲解怎样创建一个精简版的初始化项目1、创建项目在指定路径下执行如下命令创建react项目create-react-app demo2、删除部分文件刚创建完的项目结构如图所示可以选择性删除git和readme等文件清空public和src文件夹,即删除两者下的所有文件清理完的结构目录如下:3、添加index.html文件在public文.原创 2021-02-24 00:25:30 · 2818 阅读 · 0 评论 -
react BrowserRouter和HashRouter的区别
react中有两种路由模式,即BrowserRouter和HashRouterBrowserRouter 借用了H5的history APIHashRouter借用了url的hash值两者有何不同点呢?1、表现形式不同 hash地址栏带#2、兼容性不同。 browser由于h5的history API,不兼容IE9及以下 而hash使用的是url的哈希值兼容性好3、刷新对路由state参数的影响 browser没有影响,state...原创 2021-02-23 12:25:27 · 533 阅读 · 2 评论 -
react 向路由组件传递参数的三种方式
路由的基本使用let obj = {id:'001', name='gailun'}<Link to={`/home/${obj.id}/${obj.name}`}>{obj.name}</Link><Route path='home/:id/:name' component={Home}/>原创 2021-02-22 12:24:29 · 1863 阅读 · 5 评论 -
react 路由模糊匹配与严格匹配
我们一般使用react路由时,链接要与组件相匹配,如下使用<NavLink to='/home'>Home</NavLink><Route path='/home' component={Home}/>模糊匹配如下所示,当链接第一级路径能匹配上相应的组件,而链接后面再多几级路径也不会产生影响,依旧能正常匹配(当然链接路径少于组件路径时不能匹配,像to='/a/home/b'这样也无法匹配)<NavLink to='/home/a/b'>.原创 2021-02-22 11:27:49 · 1055 阅读 · 0 评论 -
react 路由导致的刷新页面样式丢失问题
如下是引入样式的代码<link rel='stylesheet' href='./css/bootstrap.css'>使用路由情况<NavLink to='/one/other'>other</NavLink><Route path='/one/other' component={Other}/>原因分析使用了类似多级路由的路由'/one/other',请求样式时把前面的路径one也加入请求地址,而文件找不到,react默认会返原创 2021-02-22 11:00:31 · 953 阅读 · 5 评论