Umi、React框架学习笔记

一、Css样式隔离

• Umi脚手架自带Less+Css Modules 实现样式隔离。
• 原理：基于less中的className生成唯一Hash串。
• 类似Scoped，一个基于标签(v-xx)，一个基于className。
• 推荐写法

// less
.wrap-box {
  background: pink;
  .cont-text-box{
    border:1px solid #ccc;
    padding: 4px;
    .cont-text{
      font-size: 16px;
      color: #2b2b2b;
    }
  }
}

// Component
import styles from './index.less';
export default function TestCompoent() {
  return (
    <div className={styles['wrap-box']}>
      <div className={styles['cont-text-box']}>
        <div className={styles['cont-text']}>这是一段描述文字！</div>
      </div>
    </div>
  );
}

原理

{
 "wrap-box":"wrap-box___3XsTJ",
 "cont-text-box":"cont-text-box___2ScBT",
 "cont-text":"cont-text___3comu
}

二、路由配置

• 官方路由配置文档
• 路由配置文件 => /.umirc.ts，可以抽离为单独配置文件。
• 类似VueRouter配置方式，避免频繁操作ReactRouterDom。

// 配置案例
[
  { exact: true, path: '/index', component: './Index/index' },
  {
    path: '/user',
    component: './User/index',
    routes: [{ path: '/user/detail', component: './UserDetail/index' }],
  },
  { exact: true, path: '/', redirect: '/index' },
]

• component参数为字符串，Umi会做自动导入。
• • exact 严格匹配
  • routes 子路由
  • redirect 重定向
  • …
• wrappers 可以结合hooks实现路由拦截。

三、子路由配置

• 子路配置与VueRouter相同，通过将子路由组件注入到当前组件的props.children实现。
• 官方推荐使用layout组件控制路由渲染，也可以采用类似router-view的方式。
• 通过注入的props.route可以获得当前的路由信息。
• 注意子路由也为’路径全匹配’，上级路由不可省略，如案例中的’/user’。
  案例

// 子路由渲染案例
import styles from './index.less';
export default function TestCompoent(props: any) {
  return (
    <div className={styles['wrap-box']}>
      <div className={styles['cont-text-box']}>
        <div className={styles['cont-text']}>这是一段描述文字！</div>
      </div>
      {/* 子路由渲染 */}
      <div className={styles['router-view-box']}>{props.children}</div>
    </div>
  );
}
 

四、路由对象

import { history, useLocation } from 'umi';
import React from 'react';

const Index = ({ route,location }) => {
  // 路由跳转操作
  history.push('/');
  // 参数获取
  const locationHooks = useLocation();
  // route对象
  console.log(route);
  // location对象
  console.log(location);
  return ( <div>Demo</div> );
}

export default Index;

五、页面keep-alive

安装插件：npm i umi-plugin-keep-alive --save

import { KeepAlive, history } from 'umi';
import PageComponen from './PageComponent';

export default (props) => {
    return (
        <KeepAlive
            id={history.location.pathname} // 根据参数去缓存，如果参数不同就缓存多份，如果参数相同就使用同一个缓存。这样解决了传参改变时，页面不刷新的问题
            when={() => {
                return history.action !== 'POP'; //true卸载时缓存，false卸载时不缓存
            }}
        >
            {/* 页面组件 注意透传props */}
            <PageComponen {...props} />
        </KeepAlive>
    );
};