umi官方文档中的常见API

umi官方文档中的常见API

基本API

dynamic

动态加载组件

常见使用场景：组件体积太大，不适合直接计入bundle中，以免影响首屏加载速度。例如：某组件HugeA包含巨大的实现/依赖了巨大的三方库，且该组件HugeA的使用不在首屏显示范围内，可被单独拆出。这时候，dynamic就该上场了
为什么使用dynamic：封装了使用一个异步组件需要做的状态维护工作，开发者可以更加专注于自己的业务组件开发，而不必关心code spliting、async module loading等等技术细节

通常搭配动态import语法使用

封装一个异步组件

import {dynamic} from 'umi';
export default dynamic({
	loader:async function () {
		//这里的注释webpackChunkName 可以指导webpack将该组件HugeA以这个名字单独拆出去
		const {default:HugeA} = await import(
			/* webpackChunkName:''external_A'' */ './HugeA'
		);
		return HugeA;
	}
});

使用异步组件

import React from 'react';
import AsyncHugeA from './AsyncHugeA';
//像使用普通组件一样即可
//dynamic为你做：
//1.异步加载该模块的bundle
//2.加载期间 显示loading(可定制)
//3.异步组件加载完毕后，显示异步组件
export default () => {
	 return <AsyncHugeA/>;
}

history

• 可用于获取当前路由信息

  import {history} from 'umi';
  
  //history 栈里的实体个数
  console.log(history.length);
  
  //当前history跳转的action，有push,replace和pop三种类型
  console.log(history.action);
  
  //location对象，包含pathname,search和hash
  console.log(history.location.pathname);
  console.log(history.location.search);
  console.log(history.location.hash);
  

• 可用于路由跳转

  import {history} from 'umi';
  //跳转到指定路由
  history.push('/list');
  
  //带参数跳转到指定路由
  history.push('/list?a=b');
  history.push({
  	pathname:'/list',
  	query:{
  		a:'b',
  	},
  });
  
  跳转到上一个路由
  history.goBack();
  

• 用于路由监听

  import {history} from 'umi';
  const unlisten = history.listen((location,action) => {
  console.log(location.pathname);
  });
  unlisten();
  

plugin

运行时插件接口，是umi内置的跑在浏览器里的一套插件体系，主要在插件利用，项目代码中一般用不到

例子：

import {Plugin,ApplyPluginsType} from 'umi';

//注册插件
Plugin.register({
	apply:{dva:{ foo:1 }},
	path:'foo',
});
Plugin.register({
  apply: { dva: { bar: 1 } },
  path: 'bar',
});

// 执行插件
// 得到 { foo: 1, bar: 1 }
Plugin.applyPlugins({
  key: 'dva',
  type: ApplyPluginsType.modify,
  initialValue: {},
  args: {},
  async: false,
});

参数属性包含：

• key，坑位的 key
• type，执行方式类型
• initialValue，初始值
• args，参数
• async，是否异步执行且返回 Promise

ApplyPluginsType

主要在插件利用，项目代码中一般用不到。运行时插件执行类型，enum 类型，包含三个属性：

• compose，用于合并执行多个函数，函数可决定前序函数的执行时机
• modify，用于修改值
• event，用于执行事件，前面没有依赖关系

路由

Link

链接组件，例如：

import {Link} from 'umi';

export default () => {
	return (
		{/* 点击跳转到指定 /about 路由 */}
        <Link to="/about">About</Link>
        
		/* 点击跳转到指定 /courses 路由，附带 query { sort: 'name' }*/}
        <Link to="/courses?sort=name">Courses</Link>

		 {/* 点击跳转到指定 /list 路由，
          附带 query: { sort: 'name' }
          附带 hash: 'the-hash'
          附带 state: { fromDashboard: true }
       */}
        <Link
         to={{
          pathname: '/list',
          search: '?sort=name',
          hash: '#the-hash',
          state: { fromDashboard: true },
         }}
        >
         List
        </Link>
			
		{/* 点击跳转到指定 /profile 路由，
          附带所有当前 location 上的参数
      */}
      <Link
        to={(location) => {
          return { ...location, pathname: '/profile' };
        }}
      />

      {/* 点击跳转到指定 /courses 路由，
          但会替换当前 history stack 中的记录
      */}
      <Link to="/courses" replace />
	   
	  {/* 
          innerRef 允许你获取基础组件（这里应该就是 a 标签或者 null）
      */}
      <Link
        to="/courses"
        innerRef={(node) => {
          // `node` refers to the mounted DOM element
          // or null when unmounted
        }}
      />
    </div>
	);
};

NavLink

特殊版本的<Link />。当指定路由(to=指定路由)命中时，可以附着特定样式

import {NavLink} from 'umi';

export default () => {
	return (
		<div>
		  {/* 和 Link 等价 */}
	      <NavLink to="/about">About</NavLink>
	
	      {/* 当前路由为 /faq 时，附着 class selected */}
	      <NavLink to="/faq" activeClassName="selected">
	        FAQs
	      </NavLink>
	      
		  {/* 当前路由为 /faq 时，附着 style */}
	      <NavLink
	        to="/faq"
	        activeStyle={{
	          fontWeight: 'bold',
	          color: 'red',
	        }}
	      >
	        FAQs
	      </NavLink>
	
	      {/* 当前路由完全匹配为 /profile 时，附着 class */}
	      <NavLink exact to="/profile" activeClassName="selected">
	        Profile
	      </NavLink>
	
	      {/* 当前路由为 /profile/ 时，附着 class */}
	      <NavLink strict to="/profile/" activeClassName="selected">
	        Profile
	      </NavLink>
		  
		   {/* 当前路由为 /profile，并且 query 包含 name 时，附着 class       */}
	      <NavLink
	        to="/profile"
	        exact
	        activeClassName="selected"
	        isActive={(match, location) => {
	          if (!match) {
	            return false;
	          }
	          return location.search.includes('name');
	        }}
	      >
	        Profile
	      </NavLink>
	    </div>  
	);
};

Prompt

提供一个用户离开页面时的提示选择

import {Prompt} from 'umi';

export default () => {
	return (
		<div>
		 {/* 用户离开页面时提示一个选择 */}
		 <Prompt message="你确定要离开吗？" />

		 {/* 用户要跳转到首页时，提示一个选择 */}
		 <Prompt
		 	message={(location) => {
		 		return location.pathname !== '/' ? true: `您确定要跳转到首页吗？`;
		     }}
		 />
	
		  {/* 根据一个状态来确定用户离开页面时是否给一个提示选择 */}
		  <Prompt when={formIsHalfFilledOut} message="您确定半途而废吗？"/>
		 </div>
	);
};

withRouter

高阶组件，可以通过withRouter 获取到 history、location、match对象

import {withRoute} from 'umi';

export default withRouter (({ history,location,match }) => {
	return (
		<div>
	      <ul>
	        <li>history: {history.action}</li>
	        <li>location: {location.pathname}</li>
	        <li>match: {`${match.isExact}`}</li>
	      </ul>
	    </div>
	);
});

useHistory

hooks，获取history对象

import { useHistory } from 'umi';

export default () => {
  const history = useHistory();
  return (
    <div>
      <ul>
        <li>history: {history.action}</li>
      </ul>
    </div>
  );
};

useLocation

hooks，获取location对象

import { useLocation } from 'umi';

export default () => {
  const location = useLocation();
  return (
    <div>
      <ul>
        <li>location: {location.pathname}</li>
      </ul>
    </div>
  );
};

useParams

hooks，获取params对象。params对象为动态路由(例如：/users/:id)里的参数键值对

import { useParams } from 'umi';

export default () => {
  const params = useParams();
  return (
    <div>
      <ul>
        <li>params: {JSON.stringify(params)}</li>
      </ul>
    </div>
  );
};

useRouteMatch

获取当前路由的匹配信息

import { useRouteMatch } from 'umi';

export default () => {
  const match = useRouteMatch();
  return (
    <div>
      <ul>
        <li>match: {JSON.stringify(match.params)}</li>
      </ul>
    </div>
  );
};

node侧接口

通过package.json 的main字段露出，且不存在于modules字段里

Service

umi内核的Service方法，用于测试，或调用umi底层命令

utils

utils方法，给插件使用，和插件里的api.utils是同一个底层库

defineConfig

用于校验和提示用户配置类型。