Ant Design Pro V5 已经支持预览

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

🦚 Layout 的更新

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

对于开发者也迎来了不少改动，

• 首先是配置层面，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 便可使用这些特性，新的数据流虽然简单高效可是并不能知足全部的场景，咱们能够混合适应，慢慢迁移。固然咱们但愿能够尽早迁移来减小历史债务。详细步骤能够参阅官网的迁移指南。

🗽 Q&A

📮 为何不发正式版？

Pro v5 中使用了全新的架构，更加标准化而且自带了不少内部的最佳实践，不管代码量仍是使用难度都下降了。可是标准化同时意味着失去了个性化的空间，咱们但愿在正式发布以前，收集一些信息，在标准化和个性化以前取得一个平衡。

📮 Pro 与 umi 是什么关系？

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

📮 Pro V5 不能知足个人需求怎么办？

做为一个开源项目，若是你以为某个功能不满意或者功能缺失，你能够提 issue 来参与讨论，若是获得了官方的承认，那么这个功能就会被实现。这个流程通常会很长，因此推荐你直接提 PR 来实现功能，同时能够帮助到更多同窗，成为一名光荣的 contributors，走向名望程序员第一步。