react-总结9-反向代理-路径别名-react滚动-路由传参

最新推荐文章于 2024-01-04 18:04:23 发布

站好我去买橘子

最新推荐文章于 2024-01-04 18:04:23 发布

阅读量339

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/weixin_45413276/article/details/102737809

版权

react 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

反向代理

1.在src目录创建文件setupProxy.js文件这是反向代理的配置文件
2.安装 http-proxy-middleware

/* 反向代理的配置文件 */
const proxy = require('http-proxy-middleware');

module.exports = function( app ){
    //app.use(proxy('标识符',配置))
   
    
    app.use( proxy('/ajax',{
        target:'http://m.maoyan.com',
        changeOrigin: true,
    }))

}

路径别名

在config-overrides.js中配置
使用第三方模块 customize-cra配置

function joinUrl(url){
    return path.join(__dirname,url)
}

addWebpackAlias({
        //路径别名  ：对应的绝对路径
        '@': joinUrl('./src'),
        'pages': joinUrl('./src/pages'),
        'utils': joinUrl('./src/utils'),
        'style': joinUrl('./src/style'),
        'assets': joinUrl('./src/assets'),

    })

react滚动

better-scroll
布局要求外层盒子套一个长列表

import BS from 'better-scroll'

在得到数据的钩子函数里实例化  放进异步队列
setTimeout(()=>{
	new BS('外层盒子类名')
},0)

路由传参

<Link
  to={{
    pathname: "/courses",
    search: "?sort=name",//可以通过 search携带参数
    state: { fromDashboard: true }//也可以通过state携带数据
  }}
/>

在这里插入图片描述

接参

通过目标路由的location对象来接收
如果 location里的search是

search:"?aid=20002&a=a"

可以使用 nodejs的内置模块处理得到json对象
nodejs使用的是commonjs规范  但是高版本的node 可以使用es6的引入规范
import qs from 'querystring'

qs.parse(search.slice(1))// {aid:'20002',a:'a'}

rem解决

阿里

(function(doc, win) {
  const docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
      const clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      let max = 24;
      let min = 9.3125;
      let size = 20 * (clientWidth / 320);

      size = Math.min(size, max);
      size = Math.max(size, min);
      docEl.style.fontSize = size + 'px';
      console.log(docEl.style.fontSize, 'em= =====')
    };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

淘宝

;(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);

网易

function font () {
  document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75 + 'px'
  /* 750/dpi/100 */
  /* dip = 物理像素【 750 】/逻辑像素 【 375 】 */
}


font()


window.onresize = font