Ant Design Pro v5体验

看到有在说v5版本对布局、数据流、权限都进行了大改动，就下了个来看看

v5的文档https://beta-pro.ant.design/docs/getting-started-cn

发现src下面的layouts和models文件夹都不见了

布局的改动看文档https://github.com/ant-design/ant-design-pro/issues/6434

这些改动中感觉就是数据流这个带来的便利最大，也是使用最普遍的，没个人都会用到

最直观的感觉就是难道蚂蚁团队要抛弃dva了？

后面想想好像也对，dva中新建一个model基本都是复制粘贴，有state，effect，reducers等等api来解决这些异步的问题啊更新啊这些问题提，虽然不难理解，但是很繁琐。

//v5直接使用hooks来作为数据流方案，替代之前的dva，文档-简易数据流中可以看到，
//一个model就类似一个小组件，创建一个文件在src/models/demo.ts

import { useState, useCallback } from 'react';

export default () => {
  const [counter, setCounter] = useState(0);
  const increment = useCallback(() => setCounter((c) => c + 1), []);
  const decrement = useCallback(() => setCounter((c) => c - 1), []);
  return { counter, increment, decrement };
};

//在需要用到model中的数据的页面直接使用useModel就能获取到上面return出来的对象数据

import { useModel } from 'umi';

export default () => {
//useModel 可以接受一个可选的第二个参数，可以用于性能优化。
//当组件只需要消费 model 中的部分参数，而对其他参数的变化并不关心时，可以传入一个函数用于过滤。
//函数的返回值将取代 model 的返回值，成为 useModel 的最终返回值。
// 这里的useModel第一个参数是命名空间，对应model的文件名
  const { add, minus } = useModel('demo', (ret) => ({
    add: ret.increment,
    minus: ret.decrement,
  }));

  return (
    <div>
      <button onClick={add}>add by 1</button>
      <button onClick={minus}>minus by 1</button>
    </div>
  );
};

项目本身初始化了一个@@initialState的全局model，一开是找不到在哪初始化的，后面查看了umi的文档，https://umijs.org/plugins/plugin-initial-state，就一目了然了，initialstate中包含的几个参数也都能看到，其中setInitialState是设置initialstate的方法，直接设置就可以改变model中的值

const { initialState, loading, error, refresh, setInitialState } = useModel('@@initialState');

setInitialState((s) => ({ ...s, currentUser: 123 }));

没了。。。

权限还没看，下次在写