Skip to main content

框架 API

基础#

runApp#

1.7.0 版本之后推荐使用 runApp 替代原先的 createApp

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

config#

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

APP_MODE#

获取应用环境。详见

ErrorBoundary#

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

状态管理#

store#

应用级别的 store 实例。详见

路由#

Link#

通过 <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#

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>params: {JSON.stringify(params)}</p>
</>
);
}

useRouteMatch#

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

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

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' }
}

useSearchParams#

已废弃,请使用 getSearchParams。用于在非路由函数组件中解析 url 参数。

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

// src/components/Example
import { useSearchParams } from 'ice';
function Example() {
const searchParams = useSearchParams();
// console.log(searchParams); => { foo: 'bar' }
}

withSearchParams#

已废弃,请使用 getSearchParams。与 useSearchParams 对应,用在 Class Component 中。

import { withSearchParams } from 'ice';
@withSearchParams
class Example extends React.Component {
render() {
const { searchParams } = this.props;
// console.log(searchParams); => { foo: bar }
return <>Foo</>;
}
}

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。详见

工具方法#

getInitialData#

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

lazy#

用于代码懒加载。详见

logger#

用于日志打印。详见

类型#

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(playload, rootState: IRootState) {
+ }
})
};

环境变量#

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

process.env.__IS_SERVER__#

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

process.env.SERVER_PORT#

本地调试时使用的端口号

process.env.NODE_ENV#

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