Skip to main content

框架 API

基础

runApp

API createApp 从 1.7.0 版本标记废弃,2.0 版本完全移除,请使用 runApp 替代

用于创建渲染整个应用。详见

config

获取应用运行时配置。详见

APP_MODE

获取应用环境。详见

ErrorBoundary

用于错误边界的组件。详见

设置页面 <head> 标签的信息,如 meta、title 等,基于 react-helmet 同时保持一致的使用方式:

import React from 'react';
import { Head } from 'ice';

const Home = (props) =>
return (
<div>
<Head>
<title>Home</title>
<meta name="description" content='页面描述' />
</Head>
<h1>Home Page</h1>
</div>
);
};

状态管理

createStore

初始化 store 实例。

import { createStore } from 'ice';
import user from './models/user';

const store = createStore({
user,
}, {
// options
});

export default store;

createStore() 支持的 options:

  • disableError:布尔类型,可选,默认值 false,如果设置为 true,则 UseModelEffectsErrorWithModelEffectsError 将不可用。
  • disableLoading:布尔类型,可选,默认值 false,如果设置为 true,则 useModelEffectsLoadingwithModelEffectsLoading 将不可用。
  • plugins:数组类型,可选,Immer 插件、Redux 插件
  • redux:对象类型,可选
    • middlewares:数组类型,Redux middlewares
    • devtoolOptions:对象类型,Redux Devtools 参数

路由

通过 <Link /> 标签组件可实现路由跳转,使用方式:

import { Link } from 'ice';

function Demo() {
return (
<div>
<Link to="/courses?sort=name" />

{/* 可以携带额外的数据 `state` 到路由中。 */}
<Link
to={{
pathname: '/courses',
search: '?sort=name',
hash: '#the-hash',
state: { fromDashboard: true },
}}
/>
</div>
);
}

NavLink 组件的用法和 Link 组件基本相同,区别在于 NavLink 组件匹配时可以添加 active 属性。

<NavLink to="/faq" activeClassName="selected">
FAQs
</NavLink>

Prompt

在离开页面路由跳转时,自定义拦截组件。

import { Prompt } from 'ice';

const PromptMessage = () => {
return (
<>
{/* 用户离开页面时给出确认提示 */}
<Prompt message="你确定要离开吗?" />
</>
);
};

useHistory

useHistory hook 用于获取 history 实例。

import { useHistory } from 'ice';

function HomeButton() {
const history = useHistory();

function handleClick() {
history.push('/home');
}

return (
<button type="button" onClick={handleClick}>
Go home
</button>
);
}

useLocation

useLocation hook 返回当前 URL 的 location 对象。

import { useLocation } from 'ice';

function Home() {
const location = useLocation();
return (
<>
<p>location: {JSON.stringify(location)}</p>
</>
);
}

useParams

useParams hook 返回 URL 参数的 parmas 对象。

import { useParams } from 'ice';

function Home() {
const params = useParams();
return (
<>
<p>ID: {params.id}</p>
</>
);
}

useRouteMatch

useRouteMatch hook 返回当前路由的匹配信息。

import { useRouteMatch } from 'ice';

function Home() {
const match = useRouteMatch();
return (
<>
<p>match: {JSON.stringify(match)}</p>
</>
);
}

getSearchParams

API useSearchParams 和 withSearchParams 于 1.9.0 版本标记废弃,2.0 版本完全移除,请使用 getSearchParams 替代

用于在非路由函数组件中解析 url 参数。

假设当前 URL 为 https://example.com?foo=bar,解析查询参数如下:

// src/components/Example
import { getSearchParams } from 'ice';

function Example() {
const searchParams = getSearchParams();
// console.log(searchParams); => { foo: 'bar' }
}

withRouter

通过在 Class 组件上添加 withRouter 装饰器,可以获取到路由的 historylocationmatch 对象。

import React from 'react';
import { withRouter } from 'ice';

@withRouter
class Example extends React.Component {
render() {
const { history, location } = props;
const handleHistoryPush = () => {
history.push('/new-path');
};

return (
<div>
<div>当前路径: {location.pathname}</div>
<button onClick={handleHistoryPush}>点击跳转新页面</button>
</div>
);
}
}

matchPath

判断当前 URL 是否匹配。

import { matchPath } from 'ice';

const match = matchPath('/users/123', {
path: '/users/:id',
exact: true,
strict: false,
});

history

获取应用的路由实例。

import { history } from 'ice';

// 用于获取 history 栈里的实体个数
console.log(history.length);

// 用于获取 history 跳转的动作,包含 PUSH、REPLACE 和 POP 三种类型
console.log(history.action);

// 用于获取 location 对象,包含 pathname、search 和 hash
console.log(history.location);

// 用于路由跳转
history.push('/home');

// 用于路由替换
history.replace('/home');

// 用于跳转到上一个路由
history.goBack();

更多 history API

createHashHistory

用于创建 HashHistory 对象。

import { createHashHistory } from 'ice';

const history = createHashHistory();

createBrowserHistory

用于创建 BrowserHistory 对象。

import { createBrowserHistory } from 'ice';

const history = createBrowserHistory();

createMemoryHistory

用于创建 MemoryHistory 对象。

import { createMemoryHistory } from 'ice';

const history = createMemoryHistory();

数据请求

request

用于数据请求的方法。详见

useRequest

用于数据请求的 hooks。详见

权限

useAuth

在函数组件中获取和更新权限。

import React from 'react';
import { useAuth } from 'ice';

function Foo() {
const [auth, setAuth] = useAuth();
// auth:当前权限列表数据
// setAuth:更改当前权限列表数据
return <>Foo</>;
}

withAuth

在 Class 组件中获取和更新权限。

import React from 'react';
import { withAuth } from 'ice';

Class Foo extends React.Component {
render() {
const { auth, setAuth } = this.props;
return <>Foo</>;
}
}

export default withAuth(Foo)

工具方法

getInitialData

获取通过 app.getInitialData() 返回的 initialData 数据。详见

lazy

用于代码懒加载。详见

类型

IAppConfig

appConfig 的类型定义。

+import { runApp, IAppConfig } from 'ice';

+const appConfig: IAppConfig {

}

runApp();

IRouterConfig

路由配置的类型定义。

+import { IRouterConfig } from 'ice';

+const routerConfig: IRouterConfig = [
+];

export default routerConfig;

IRootDispatch

状态管理中全局模型 dispatch 的类型。

+import { IRootDispatch } from 'ice';

const model = {
state: [],
reducers: {},
+ effects: (dispatch: IRootDispatch) => ({

})
};

IRootState

状态管理中全局模型的 rootState 的类型。

+import { IRootState } from 'ice';

const model = {
state: [],
reducers: {},
effects: (dispatch) => ({
+ like(payload, rootState: IRootState) {
+ }
})
};

环境变量

icejs 会将一些环境变量注入到运行时,前端代码中可直接使用。

process.env.__IS_SERVER__

开启 SSR 之后,用于判断是否是服务端执行

process.env.SERVER_PORT

本地调试时使用的端口号

process.env.NODE_ENV

icejs start 对应 development,其他情况(build)对应 production