3:技巧

dispatchEvent 时间触发器

const[]=this.props

render() {
    const {
      children,
      location: { pathname },
      breadcrumbNameMap,
    } = this.props;}

const {
      dispatch,
      route: { routes, authority },
    } = this.props;
    dispatch({
      type: 'menu/getMenuData',
      payload: { routes, authority },
    });

const RegisterResult = ({ location }) => ()

const RegisterResult = ({ location }) => (
  <Result
    className={styles.registerResult}
    type="success"
    title={
      <div className={styles.title}>
        <FormattedMessage
          id="app.register-result.msg"
          values={{ email: location.state ? location.state.account : 'AntDesign@example.com' }}
        />
      </div>
    }
    description={formatMessage({ id: 'app.register-result.activation-email' })}
    actions={actions}
    style={{ marginTop: 56 }}
  />
);

面包屑breadcrumb导航

首页/表单/高级表单 （src/components/PageHeaderWrapper/breadcrumb.js）
作用：快速返回上一级

const extraBreadcrumbItems = pathSnippets.map(url => {)

const extraBreadcrumbItems = pathSnippets.map(url => {
    const currentBreadcrumb = getBreadcrumb(breadcrumbNameMap, url);
    if (currentBreadcrumb.inherited) {
      return null;
    }
    const name = renderItemLocal(currentBreadcrumb);
    const { hideInBreadcrumb } = currentBreadcrumb;
    return name && !hideInBreadcrumb
      ? {
          path: url,
          breadcrumbName: name,
        }
      : null;
  });

for循环

function getRenderArr(routes) {
  let renderArr = [];
  renderArr.push(routes[0]);
  for (let i = 1; i < routes.length; i += 1) {
    // 去重
    renderArr = renderArr.filter(item => getRelation(item, routes[i]) !== 1);
    // 是否包含
    const isAdd = renderArr.every(item => getRelation(item, routes[i]) === 3);
    if (isAdd) {
      renderArr.push(routes[i]);
    }
  }
  return renderArr;
}

math/number

.isNaN是判断是否是一个数
Math.floor:判断一个最接近val的商。
val的解释(method) Math.floor(x: number): number
Returns the greatest integer less than or equal to its numeric argument.
@param x — A numeric expression.

export function formatWan(val) {
  const v = val * 1;
  if (!v || Number.isNaN(v)) return '';
  let result = val;
  if (val > 10000) {
    result = Math.floor(val / 10000);
    result = (
      <span>
        {result}
        <span
          style={{
            position: 'relative',
            top: -2,
            fontSize: 14,
            fontStyle: 'normal',
            marginLeft: 2,
          }}
        >
          万
        </span>
      </span>
    );
  }
  return result;}

正则表达式

const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;

effects参数

• put 用于触发action

  yield put({type: 'user/changeNotifyCount',
        payload: {totalCount: data.length,unreadCount,});

• call 用于调用异步逻辑，适用于promise

  const data = yield call(queryNotices);

• select 从state获取数据

  const unreadCount = yield select(
        state => state.global.notices.filter(item => !item.read).length);

屏幕尺寸布局

col-lg一般用于大屏设备，
(min-width:1200px);
col-md一般用于中屏设备，
(min-width：992px);
col-sm一般用于小屏设备，
(min-width：768px);
col-xs用于超小型设备，
(max-width：768px);
col-xl一般用于超超小屏设备，
(min-width:768px);

业务图标

mock

mock 文件夹下的文件即 mock 文件，文件导出接口定义，支持基于 require 动态分析的实时刷新，支持 ES6 语法，以及友好的出错提示

模拟网络延迟

国际化

• github.com/umijs/umi-plugin-locale插件实现国际化

  UI测试

  单元测试、e2e测试

  常见问题