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