Skip to content

Commit

Permalink
update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
sorrycc committed Aug 21, 2018
1 parent 37bd341 commit cc4ff79
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 30 deletions.
44 changes: 18 additions & 26 deletions docs/api/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ router.goBack();

### umi/navlink

详见:https://reacttraining.com/react-router/web/api/NavLink
详见:[https://reacttraining.com/react-router/web/api/NavLink](https://reacttraining.com/react-router/web/api/NavLink)

### umi/redirect

Expand All @@ -102,54 +102,46 @@ import Redirect from 'umi/redirect';
<Redirect to="/login" />
```

详见:https://reacttraining.com/react-router/web/api/Redirect
详见:[https://reacttraining.com/react-router/web/api/Redirect](https://reacttraining.com/react-router/web/api/Redirect)

### umi/withRouter

详见:https://reacttraining.com/react-router/web/api/withRouter
详见:[https://reacttraining.com/react-router/web/api/withRouter](https://reacttraining.com/react-router/web/api/withRouter)

## 性能

### umi/dynamic

动态加载组件。
动态加载组件,基于 [react-loadable](https://github.com/jamiebuilds/react-loadable) 实现

#### dynamic(resolve)
#### dynamic(options)

例子:

```js
import dynamic from 'umi/dynamic';

// 延时 1s 渲染的组件。
const App = dynamic(() => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(() => <div>I will render after 1s</div>);
}, /* 1s */1000);
}));
const App = dynamic({
loader: () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(() => <div>I will render after 1s</div>);
}, /* 1s */1000);
}));
},
});

// 或者用 async 语法
const delay = (timeout) => new Promise(resolve => setTimeout(resolve, timeout));
const App = dynamic(async function() {
await delay(/* 1s */1000);
return () => <div>I will render after 1s</div>;
const App = dynamic({
loader: async function() {
await delay(/* 1s */1000);
return () => <div>I will render after 1s</div>;
},
});
```

#### dynamic(resolve, { loading })

可以通过第二个参数可以指定 Loading Component 。

```js
dynamic(async function() {}, {
loading() {
return <div>Loading Component...</div>;
}
})
```

## 构建

### umi/babel
Expand Down
10 changes: 6 additions & 4 deletions docs/guide/load-on-demand.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# 按需加载

出于性能的考虑,我们会对模块和组件进行按需加载,比如 umi 本身在实现的时候,每个页面就是按需加载的
出于性能的考虑,我们会对模块和组件进行按需加载。

## 按需加载组件

Expand All @@ -10,9 +10,11 @@
import dynamic from 'umi/dynamic';

const delay = (timeout) => new Promise(resolve => setTimeout(resolve, timeout));
const App = dynamic(async function() {
await delay(/* 1s */1000);
return () => <div>I will render after 1s</div>;
const App = dynamic({
loader: async function() {
await delay(/* 1s */1000);
return () => <div>I will render after 1s</div>;
},
});
```

Expand Down
9 changes: 9 additions & 0 deletions docs/guide/migration.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,12 @@
* 不再支持 TSLINT,umi@2 里没有这个功能了
* 不再支持 ESLINT,umi@2 里没有这个功能了

## antd

## umi/dynamic

## 依赖

umi-plugin-* -> umi-plugin-react


0 comments on commit cc4ff79

Please sign in to comment.