antd outofdate 表单_React 折腾记 - (10) UmiJS 2.x + antd 重写后台管理系统记录的问题及解决姿势...

用的是 umi 2.x ,写起来挺舒服;顺带完善了上一版本后台的一些细节问题,功能等

umijs 类似 create-react-app , 也是一套方案的集合体,亮点很多.可以具体官网去看

声明式的路由( nuxtjs 既视感)

dva(基于redux+redux-saga的封装方案) :写起来有 vuex 的感觉;

主要记录我在过程中遇到的问题及解决的姿势,技术栈 antd 3.11.x + umi 2.x + react 16.7

问题汇总及解决姿势

moment的一些用法及antd 日期组件的细节

关于moment

为什么说另类..就是原生 日期API 结合 moment ,因为我们接口需要传递时间戳,而是不带毫秒级的;

而且时间必须为当天的凌晨 00:00:00 开始,结束时间到操作的此刻(直接 new Date().getTime() 就是此刻);

// 会直接返回你设置时间的时间戳

new Date().setHours(0, 0, 0, 0)

// 凌晨`00:00:00`

moment(new Date().setHours(0, 0, 0, 0))

// 近七天

moment(new Date().setHours(0, 0, 0, 0) - 7 * 24 * 3600000)

// 月初

moment().startOf('month')

复制代码

转成 unix stamp(服务器常用的时间戳规格) ,调用 moment().unix() 即可;

若是不控制到凌晨 00:00:00 这种,

日期可以直接用 moment 的 add 方法往后推导, subtract 往前推导,支持日/周/月/年

antd 的日期组件

置空用 null 是允许的,其他的话需要转成 moment 对象,控件获取的值默认就是 moment 对象

props.children 的改造,添加样式亦或者事件!

在封装一些组件的过程,我用了 React.Fragment(<>>: 简写) 来保证组件同级并列

有些必须需要 props.children 带上一些属性或者样式来保证我想要的效果.

一开始无解, 因为 Fragement简写的姿势 没法 props ,那也就是说没做写成高阶;

找了下官方文档,发现有这么两个 API :

React.Children : 提供了几个遍历子元素( React Element )的方法,与常规数组用法类似,只是参数不一样

React.cloneElement: 如名字所示,克隆子元素

这是上篇文章用到的部分内容,需要改造传递进来的按钮,给添加样式

// 构建

// 克隆子组件并且添加自己要添加的特性

const PropsBtn = React.Children.map(this.props.children, child =>

React.cloneElement(child, {

style: {

marginLeft: 8,

},

})

);

// 渲染

{PropsBtn ? <>{PropsBtn}> : null}

复制代码

用 memoize-one 来改善性能

可以缓存同样参数的结果集,非常适用于递归这类的函数处理,大大减少计算的压力;

也能用于 React 这类,是否有必要重新 setState , 第二个参数支持比较,官方推荐用 lodash 去深度比较

返回一个递归包裹的组件

最简单粗暴的方法就是用变量缓存,然后直接返回组件,比如我这边文章就用了;

umi 约定式基础鉴权

在 layouts 里面分别写对应的布局,然后由一个鉴权组件去判定是否允许进入,比如

/src/layout/index.js

import React from 'react';

import withRouter from 'umi/withRouter';

// 鉴权组件, 我写了webpack alias

import Authorized from 'components/Authorized';

// 布局组件

import EnranceLayout from './EntranceLayout';

import AdminLayout from './AdminLayout';

// 中文地区时间转换引入

import moment from 'mome