Ant Design Pro V5 已经支持预览(附本文MD文件下载)

Ant Design Pro V5 已经支持预览(附本文MD文件下载)
Ant Design Pro

原文:

方便读者学习MarkDown语法,Dotnet9将本文MarkDown原文分享,文末提供下载链接。

在经过了很长时间的准备下,Pro V5 已经基本完成, 但是仍然有很多地方不是很完善,在新版本中我们进行了很多预设,对于数据流和布局更是进行了大刀阔斧的改进。虽然底层仍然基于 umi@3 来实现的,但是在应用层做了很多改动,接下来我们会展示一下我们的主要改动。

Layout 的更新

layout 是这次的最大改动,首先是进行了样式上的更新,支持混合模式来期望适应更多的场景。新的风格仍然会以科技的风格为主,在原来的基础上优化尺寸和体验细节,设计更加简洁,匹配更多业务场景,具体的改动可以看这里[1]

Ant Design Pro V5 已经支持预览(附本文MD文件下载)

对于开发者也迎来了很多改动,

  • 首先是配置层面,layout 属性变为 ‘side’ | ‘top’ | ‘mix’
  • 新增了 headerTitleRender 和 headerContentRender 用于自定义混合模式下的头信息
  • 新增了 menuExtraRender 来自定义 标题和菜单之间的区域。
  • PageHeaderWrapper 改名为 PageContainer, 也方便未来提供更多的功能

对于 SettingDrawer,为了方便集成和部署,我们开发了 umi-plugin-setting-drawer ,只要在项目中安装这个即可快速使用。

umi-plugin-setting-drawer 依赖 @umijs/plugin-initial-state 和 @umijs/plugin-layout, 如果要自己实现需要自动绑定 @umijs/plugin-initial-state 中的数据。

架构改动

Pro V5 中的架构做了全新的改动,全部修改为全新的 umi@3 架构, 对于数据流,权限,布局都进行了内置,修改为了全新的插件。这些改进都是渐进式的,只要你升级为 umi@3 ,是可以兼容两种开发模式的。

数据流方案

我们在过去尝试了很多数据流方案,并且随着 dva 的出现稳定了下来,但是在 hooks 到来之后我们看到了机会来解决 dva 实践中遇到的问题。在一个标准的 dva 应用中我们需要写很多的样板文件,做了很多重复劳动。尤其是 它有很多概念,effects,state , reducers ,为了解决异步的问题又带了很多的新的 api,构建了一个非常复杂的体系,但是在很多应用中其实是不需要这个复杂的功能,而且即使是很大的项目,他对 TypeScript 不友好的问题也导致我们在使用时各种链路不同,并且没有良好的类型指示,在重构时经常需要搜来搜去而不能的跳转。 @umijs/plugin-model 解决了上述的 dva 的问题,同时也足够小,使用者书写的就是一个普通的自定义 hooks,但 @umijs/plugin-model 把其中的状态变成了『全局状态』,多个组件中使用该 model 时,拿到的同一份状态。没有更多的心智负担。使用起来就像定义一个 state 那么简单。我们可以在新建一个 src/models/user.ts 文件。

import { useState, useCallback } from 'react';

export default function useAuthModel() {
  const [user, setUser] = useState(null);

  const signout = useCallback(() => {
    // signout implementation
    setUser(null);
  }, []);

  return {
    user,
    signout,
  };
}

在使用时也会非常简单,使用应用 hooks 即可, 这样使用包含了所有的 TypeScript 信息, useModel 的 key 就是在 models 中的文件名。

import { useModel } from 'umi';

const { user, signout } = useModel('user');

对于轻量级的数据流我们都推荐这种方案。

权限方案

权限一直时 Pro 的弱项,在 Pro 中我们自研了一个权限组件但是表现不尽如人意。趁着这次机会我们升级了权限组件,无论使用方式和 API 都变得更加的简单,并且和我们的插件结合的更加完美。光商业吹捧是没有意义的,我们来看看代码。

// src/access.ts
export default function (initialState: { currentUser?: API.CurrentUser | undefined }) {
  const { currentUser } = initialState || {};
  return {
    canAdmin: currentUser && currentUser.access === 'admin',
    canDeleteFoo: (foo) => {
      return foo.ownerId === currentUser.userId;
    },
  };
}

我们可以看到这个是非常简单的,initialState 是一个默认的 model , 每次 initialState 的改变都会触发权限的重新计算,我们可以像 setState 一样触发它。在使用上我们使用了 umi@3 的能力让我们用起来更加的简单,只要在 root 中做如下配置,对于不能访问的页面,插件会将其替换为 403 页面,而无需手动支持。

export const routes = [
  {
    path: '/pageA',
    component: 'PageA',
    access: 'canAdmin', // 权限定义返回值的某个 key
  },
];

对于运行时的代码,我们提供了两个 API 来帮助我们自定义任何形态的 UI 和逻辑, 这里有个一看就懂的 demo。

import React from 'react';
import { useAccess, Access } from 'umi';

const PageA = (props) => {
  const { foo } = props;
  const access = useAccess(); // access 的成员: canAdmin

  if (access.canReadFoo) {
    // 如果可以读取 Foo,则...
  }

  return (
    <div>
      <Access accessible={access.canAdmin} fallback={<div>Can not read foo content.</div>}>
        Foo content.
      </Access>
      <Access accessible={access.canDeleteFoo(foo)} fallback={<div>Can not delete foo.</div>}>
        Delete foo.
      </Access>
    </div>
  );
};

网络请求

request 是新架构中的大改变之一,我们可以从 umi 中 import request 使用方式与原来相同,各种配置可以在 src/app.tsx 中进行配置。代码示例如下:

import { RequestConfig } from 'umi';

export const request: RequestConfig = {
  timeout: 1000,
  errorConfig: {},
  middlewares: [],
  requestInterceptors: [],
  responseInterceptors: [],
  errorHandler,
};

在一个中后台中很多页面并不需要跨页面的信息流,也不需要把信息放入 model 中,所以我们提供了 useRequest hooks, useRequest 提供了一些快捷的操作和状态,可以大大的节省我们的代码。

如何升级到 umi@3 架构

既然新的架构这么优秀,那么怎么才能升级到新的架构呢,我们是支持渐进的,只要升级到 umi@3 即可使用这些特性,新的数据流虽然简单高效但是并不能满足所有的场景,我们可以混合适应,慢慢迁移。当然我们希望可以尽早迁移来减少历史债务。详细步骤可以参阅官网的迁移指南[2]

Q&A

为什么不发正式版

Pro v5 中使用了全新的架构,更加标准化并且自带了很多内部的最佳实践,无论代码量还是使用难度都降低了。但是标准化同时意味着失去了个性化的空间,我们希望在正式发布之前,收集一些信息,在标准化和个性化之前取得一个平衡。

Pro 与 umi 是什么关系

Pro 与 umi 的关系有点像 react-scripts 与 create-react-app ,umi 提供了基础能力,而 Pro 在上层提供了更多用法,并且加入了我们对中后台项目的实践。

Pro V5 不能满足我的需求怎么办

作为一个开源项目,如果你觉得某个功能不满意或者功能缺失,你可以提 issue 来参与讨论,如果得到了官方的认可,那么这个功能就会被实现。这个流程一般会很长,所以推荐你直接提 PR 来实现功能,同时可以帮助到更多同学,成为一名光荣的 contributors[3],走向名望程序员第一步。

如何使用

使用 yarn create umi 0.24.x 版本。出现 Be the first to experience the new umi@3 ? 时选择PRO V5

Ant Design Pro V5 已经支持预览(附本文MD文件下载)

参考资料

  • 官网:ANT DESIGN PRO[4]
  • umi 插件文档:UmiJs[5]

本文MarkDown原文下载:https://dotnet9.com/2020-06-20

[1]这里: https://github.com/ant-design/ant-design-pro/issues/6434

[2]迁移指南: https://beta-pro.ant.design/docs/upgrade-v5-cn

[3]contributors: https://github.com/ant-design/ant-design-pro/graphs/contributors

[4]ANT DESIGN PRO: https://beta-pro.ant.design/index-cn

[5]UmiJs: https://umijs.org/plugins/plugin-access

原文出处:知乎[Ant Design]

原文链接:https://zhuanlan.zhihu.com/p/141740103

本文观点不代表Dotnet9立场,转载请联系原作者。

发表评论

登录后才能评论