React总结

React：一切皆组件

事件传参

箭头函数传参

非箭头函数传参

受控组件与非受控组件

第三方实例化

react路由 【 王者 】

• 路由 - 》 实现单页面应用（ SPA single page application ）
• React router 市面上版本
  • React router 3.x
  • React router 4.x [ 5.x ]
    • 不同之处： React router 3.x 是使用传统思想，统一配置路由,而4.x则不是统一配置了，它认为一切皆组件，也就是路由配置也是组件

配置样式

React 路由 -rem.js

1. 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
     

React路由基础

• Route 这里是路由配置组件
  • path
  • component
    • 组件
    • 函数
  • exact 路径完全匹配 / /home /home
  • render： 返回一个jsx结构
    • 组件
    • 函数
• Switch
  • 一次只渲染一个组件
• Redirect 重定向组件
  • from 当前路径
  • to 目标路径
  • exact

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的作用是可以延续到二级路由中的

  4. 编程式导航

  5. 编程式导航–返回首页

     1. push：放入历史记录
     2. replace：不放历史记录

  6. 常规跳转

     1. go
     2. goBack

  7. 只有使用了Router的组件身上才有路由属性：

     1. history
     2. location
     3. match
     4. 只有具有以上属性的组件才被称之为路由组件

  8. 动态路由

     1. 路由传参

     2. 路由接参

     3. 案例：分类-列表-详情

​

​

        按需引入配置：

​ 在根目录下创建 config-overrides.js文件

再安装： cnpm install babel-plugin-import --save-dev

一像素兼容：

https://www.cnblogs.com/katydids/p/9948546.html

页面滚动