Skip to content

Commit

Permalink
docs: 优化文档,方便查询
Browse files Browse the repository at this point in the history
  • Loading branch information
chenshuai2144 committed Feb 19, 2024
1 parent 501e841 commit 0a666fc
Showing 1 changed file with 43 additions and 7 deletions.
50 changes: 43 additions & 7 deletions docs/docs/docs/api/runtime-config.md
Original file line number Diff line number Diff line change
Expand Up @@ -88,14 +88,50 @@ export default {
};
```

### getInitialState

`getInitialState()` 的返回值将成为全局初始状态。例如:

```ts
// src/app.ts
import { fetchInitialData } from "@/services/initial";

export async function () {
const initialData = await fetchInitialData();
return initialData;
}
```

现在,各种插件和您定义的组件都可以通过 `useModel('@@initialState')` 直接获取到这份全局的初始状态,如下所示:

```tsx
import { useModel } from "umi";

export default function Page() {
const { initialState, loading, error, refresh, setInitialState } =
useModel("@@initialState");
return <>{initialState}</>;
}
```

| 对象属性 | 类型 | 介绍 |
| --- | --- | --- |
| `initialState` | `any` | 导出的 `getInitialState()` 方法的返回值 |
| `loading` | `boolean` | `getInitialState()``refresh()` 方法是否正在进行中。在首次获取到初始状态前,页面其他部分的渲染都会**被阻止** |
| `error` | `Error` | 如果导出的 `getInitialState()` 方法运行时报错,报错的错误信息 |
| `refresh` | `() => void` | 重新执行 `getInitialState` 方法,并获取新的全局初始状态 |
| `setInitialState` | `(state: any) => void` | 手动设置 `initialState` 的值,手动设置完毕会将 `loading` 置为 `false` |

### layout

修改[内置布局](../max/layout-menu)的配置,比如配置退出登陆、自定义导航暴露的渲染区域等。

> 注意:需要开启 [layout](../api/config#layout) 插件,才能使用它的运行时配置。
```js
export const layout = {
```tsx
import { RuntimeConfig } from 'umi';

export const layout:RuntimeConfig = {
logout: () => {}, // do something
};
```
Expand Down Expand Up @@ -134,7 +170,7 @@ export function onRouteChange({ clientRoutes, location }) {
}
```

### patchRoutes(\{ routes \})
### patchRoutes

This comment has been minimized.

Copy link
@fz6m

fz6m Feb 21, 2024

Member

改标题这个行为有点危险,会直接变化 url ,造成 breaking change ,在历史 issue 和 discussion 中,有很多很多的 url 链接都会失效,特别是链接到 patchClientRoutes 这个的 url 特别多。


```ts
export function patchRoutes({ routes, routeComponents }) {
Expand All @@ -148,7 +184,7 @@ export function patchRoutes({ routes, routeComponents }) {

注:如需动态更新路由,建议使用 `patchClientRoutes()` ,否则你可能需要同时修改 `routes``routeComponents`

### patchClientRoutes(\{ routes \})
### patchClientRoutes

修改被 react-router 渲染前的树状路由表,接收内容同 [useRoutes](https://reactrouter.com/en/main/hooks/use-routes)

Expand Down Expand Up @@ -222,7 +258,7 @@ export function render(oldRender) {

Umi 内置了 `qiankun` 插件来提供微前端的能力,具体参考[插件配置](../max/micro-frontend)

### render(oldRender: `Function`)
### render

覆写 render。

Expand All @@ -244,14 +280,14 @@ export function render(oldRender) {
如果你使用了 `import { request } from 'umi';` 来请求数据,那么你可以通过该配置来自定义中间件、拦截器、错误处理适配等。具体参考 [request](../max/request) 插件配置。
### rootContainer(lastRootContainer, args)
### rootContainer
修改交给 react-dom 渲染时的根组件。
比如用于在外面包一个 Provider,
```js
export function rootContainer(container) {
export function rootContainer(container, args) {
return React.createElement(ThemeProvider, null, container);
}
```
Expand Down

0 comments on commit 0a666fc

Please sign in to comment.