用的是 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