所学知识点
- 使用swiper来了解React项目中的第三方实例化
- 其他第三方库也是一样的道理 echarts
- react路由 【 王者 】
- 路由 - 》 实现单页面应用( SPA single page application )
- React router 市面上版本
- React router 3.x
- React router 4.x [ 5.x ]
- 不同之处: React router 3.x 是使用传统思想,统一配置路由,而4.x则不是统一配置了,它认为一切皆组件,也就是路由配置也是组件
- 作业:
- vue学习总结
- 做一下swiper / echarts
React 路由 - 4.x [ 5 ]
-
rem解决方案
- 淘宝解决方案: 使用淘宝封装库: flexible.js
- 如何来监听浏览器尺寸的变化
- window.onresize = function () {}
/* 通过js来动态添加rem */ ;(function(designWidth, maxWidth) { var doc = document, win = window, docEl = doc.documentElement, remStyle = document.createElement("style"), tid; function refreshRem() { var width = docEl.getBoundingClientRect().width; maxWidth = maxWidth || 540; width>maxWidth && (width=maxWidth); var rem = width * 100 / designWidth; remStyle.innerHTML = 'html{font-size:' + rem + 'px;}'; } if (docEl.firstElementChild) { docEl.firstElementChild.appendChild(remStyle); } else { var wrap = doc.createElement("div"); wrap.appendChild(remStyle); doc.write(wrap.innerHTML); wrap = null; } //要等 wiewport 设置好后才能执行 refreshRem,不然 refreshRem 会执行2次; refreshRem(); win.addEventListener("resize", function() { clearTimeout(tid); //防止执行两次 tid = setTimeout(refreshRem, 300); }, false); win.addEventListener("pageshow", function(e) { if (e.persisted) { // 浏览器后退的时候重新计算 clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false); if (doc.readyState === "complete") { doc.body.style.fontSize = "16px"; } else { doc.addEventListener("DOMContentLoaded", function(e) { doc.body.style.fontSize = "16px"; }, false); } })(375, 750); // 备注: 这里的375本身就应该写成750 ,但是写成750之后,我们设计稿的尺寸要/50,不好算,我就想,除以100更好算,所以我改成了375
-
网易方案
function font () { document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75 + 'px' } font() window.onresize = font
-
1px兼容问题
-
React路由基础
- Route 这里是路由配置组件
- path
- component
- 组件
- 函数
- exact 路径完全匹配 / /home /home
- render: 返回一个jsx结构
- 组件
- 函数
- Switch
- 一次只渲染一个组件
- 可以实现类似按需加载组件的作用,可以起到一定的性能优化作用
- Redirect 重定向组件
- from 当前路径
- to 目标路径
- exact
- Route 这里是路由配置组件
-
React 二级路由如何实现?
-
在你的以及路由对应的组件中写入导航和路由展示区域就行了
<MineContainer> Mine {/* login/register导航 */} <NavLink to = "/mine/login"> 登录 </NavLink> <NavLink to = "/mine/register"> 注册 </NavLink> {/* login/register 展示区域 */} <Route path = "/mine/login" component = { Login } /> <Route path = "/mine/register" component = { Register } /> </MineContainer>
-
Switch的作用是可以延续到二级路由中的
-
-
编程式导航
使用js来跳转页面
- push
- replace
-
常规跳转
- go
- goBack
-
问题: 发现只有使用了Route的组件身上才有路由属性、
- history
- location
- match
- 具有以上属性的组件我们称之为路由组件
-
动态路由
<Route path = “/list” component = { List }/>
<Route path = “/list/:id” component = { List }/>
以上两个形式都可以,但是如果写了/:id之后,路径必须全跟
举例: http://localhost:3000/list/001?a=1&b=2
-
路由传参
-
路由接参
-
案例: 分类/列表/详情
-
- 配置组件库
- ant design 蚂蚁金服团队做的组件库 https://ant.design/index-cn
- pc端: React后台管理系统
- 移动端: React类型项目
- 配置组件库
-
-
反向代理
-
src/setupProxy.js文件
const proxy = require( 'http-proxy-middleware' ) module.exports = function ( app ) { // app.use( proxy(标识符,options) ) // http://m.maoyan.com/ajax/movieOnInfoList?token= app.use( proxy('/ajax',{ target: 'http://m.maoyan.com', changeOrigin: true })) // app.use( proxy() ) }
-
通过第三方模块 http-proxy-middleware来进行跨域
-
易错点: setupProxy.js文件存放目录
-
-
-
-
-
实现长列表滚动
-
第三方插件: better-scroll
-
better-scroll
-
要求
-
布局要求
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fAueJcWS-1570870188047)(E:\1905\3-React\react高级\react-路由\note_img\scroll-4.png)]
-
实例化要求
-
-
-
- 移动端购物车实现
- 分类 - 列表 - 详情 - 购物车
-
-
路由监听
-
-
问题:我们想在LayOut组件中监听整个项目路由变化情况,但是LayOut组件不是路由组件
- 什么路由组件?
- 由Route组件处理的才是路由组件
- 分析: 如果能够将LayOut组件变成路由组件那就可以了 ?
- 解决: 使用 react-router-dom 提供的 高阶组件 withRouter , 将LayOut 组件变成伪路由组件
- 什么路由组件?
-
-
-
-