React 折腾记
文章平均质量分 69
React 折腾记系列
crper
对设计、交互、产品都有自己的见解和追求;更多关于我:https://www.yuque.com/crper/blog/about_me
展开
-
React 16.x折腾记 - (11) 结合Antd菜单控件(递归遍历组件)及常规优化
前言随着侧边栏的东东越来越多…本来不考虑的三级菜单,也需要考虑进去了;一开始都是手动map去遍历对应的组件, 相关的的组id这些也是简单的判断下children就返回一个值;有兴趣的瞧瞧分析所需路由规格统一,层级不定,允许子项带图标,自动生成对应的菜单栏数据路由的写法是静态路由表的姿势;const RouterTree = [ { key: 'g0', icon...原创 2018-12-24 17:25:50 · 2661 阅读 · 0 评论 -
React 16.x折腾记 - (10) UmiJS 2.x + antd 重写后台管理系统记录的问题及解决姿势
前言用的是umi 2.x ,写起来挺舒服;顺带完善了上一版本后台的一些细节问题,功能等umijs类似create-react-app, 也是一套方案的集合体,亮点很多.可以具体官网去看声明式的路由(nuxtjs既视感)dva(基于redux+redux-saga的封装方案):写起来有vuex的感觉;主要记录我在过程中遇到的问题及解决的姿势,技术栈 antd 3.11.x + umi ...原创 2018-12-21 19:36:52 · 3467 阅读 · 2 评论 -
React 16.x折腾记 - (9) 基于Antd+react-router-breadcrumbs-hoc封装一个小巧的面包屑组件
前言没有什么技术难度,只是比官方的文档多了一丢丢的判断和改造;用了react-router-breadcrumbs-hoc,约定式和配置式路由路由皆可用,只要传入的符合规格的数据格式即可基础环境React 16.4/UmiJS 2.2/Antd 3.x/ react-router-breadcrumbs-hoc 2.x: API简洁易懂效果图非antd风格antd风格...原创 2018-12-19 19:58:59 · 2957 阅读 · 1 评论 -
React 16.x折腾记 - (8) 基于React+Antd封装选择单个文章分类(从构建到获取)
前言随着管理的文章数量增多,默认的几个分类满足不了现状了…趁着重构的过程把相关的功能考虑进去本来想自己从头写过一个,看了下Antd有内置该类型的控件了,就没必要自己造了一般自己写,肯定优先考虑数组对象格式[{tagName:'a',value:1}];Antd提供的是纯数组,[string,string],那如何不改变它提供的格式情况下拿到我们想要的!拓展部分我们需要的东东,有兴趣的瞧...原创 2018-11-27 11:01:41 · 599 阅读 · 0 评论 -
React 16.x折腾记 - (7) 基于React+Antd封装聊天记录(用到React的memo,lazy, Suspense这些)
前言在重构的路上,总能写点什么东西出来这东西不复杂,丢出来,一方面当做笔记,一方面可以给有需要的人;用到技术点:css module: 包括内置的继承特性,类似less的嵌套写法那种用到的react 16.6特性lazy, Suspense来实现子组件的懒加载memo让函数式组件有PureComponent的特性(浅比较)flexbox来布局效果图代码实现in...原创 2018-11-22 10:49:44 · 2737 阅读 · 0 评论 -
React 16.x折腾记 - (6) 基于React 16.x+ Antd 3.x封装的一个声明式的查询组件(实用强大)
前言最近把新的后台系统写好了…用的是上篇文章的技术栈(mobx+react16);但是感觉mobx没有想象中的好用,看到umi 2.x了.就着手又开始重构了…仔细梳理了下上个系统,发现可以抽离的东西不少有兴趣的瞧瞧,没兴趣的止步,节约您的时间…效果图响应式传入折叠展开搜索条件,默认六个隐藏展开按钮,大于则显示(点击直接取数据源的长度)传递子组件作为搜索按钮区域...原创 2018-11-13 17:21:23 · 2296 阅读 · 0 评论 -
React 16.x折腾记 - (5) 记录用React开发项目过程遇到的问题(Webpack4/React16/antd等)
前言自己搭的脚手架,坑都是一步一步踩完的;技术栈: react@16.6.0/ react-router-dom@v4 / webpack^4.23.1(babel7+)闲话不多说,直入主题,有兴趣的可以瞧瞧,没兴趣的止步,节约您的时间.问题列表问题一:history模式下,接口和请求冲突的问题就是反向映射接口和请求的根路径重叠,如下: proxy: { ...原创 2018-10-29 18:55:28 · 3584 阅读 · 0 评论 -
React 16.x折腾记 - (4) 侧边栏联动Tabs菜单-增强版(结合Mobx)
前言有小伙伴留言有前进后退没法联动的问题.我仔细梳理下了.简化了代码逻辑和代码量,重写了一遍,执行逻辑和上个版本有所差异;上个版本 :React 折腾记 - (3) 结合Mobx实现一个比较靠谱的动态tab水平菜单,同时关联侧边栏效果图功能点在上个版本的功能的基础上梳理,剔除一些BUG,基本都会触发联动重定向关闭单一标签/关闭其他标签动态追加标...原创 2018-08-23 11:31:17 · 4611 阅读 · 3 评论 -
React 16.x折腾记 - (3) 结合Mobx实现一个比较靠谱的动态tab水平菜单,同时关联侧边栏
前言动态tab水平菜单,这个需求很常见,特别是对于后台管理系统来说;因为当我们侧边栏层级多了,你要找到一个子菜单,必须找,展开,点击.而有了这个,我们就能节省不少时间,体验上来说也会改善不少实现的思路有点绕,有更好的姿势请留言,谢谢阅读..效果如下关联展示单个删除和删除其他的标签只有一个时候是不允许关闭,所以也不会显示关闭的按钮,关闭其他也不...原创 2018-08-12 18:43:15 · 1518 阅读 · 2 评论 -
React 16.x折腾记 - (2) 实现路由动效过渡,并解决过程中奇奇怪怪的问题
前言写这个只是更好的梳理下我实现过程中遇到的奇奇怪怪的问题..因为着实浪费了我不少时间..肯定有不少也碰到过其中的问题希望对小伙伴有所帮助效果图我命名为spread的效果,其实就是结合放大和旋转以及透明度的特性渐隐渐现fade基础依赖styled-components@3.4.2 : 写样式的react-transition-gr...原创 2018-08-10 12:32:52 · 2769 阅读 · 1 评论 -
React 16.x折腾记 - (1) React Router V4 和antd侧边栏的正确关联及动态title的实现
前言如标题所言,动态更改标题,关联菜单栏依旧如以前,实战出真理,理论的文章太多,自行去搜索有兴趣的可以瞧瞧,没兴趣的大佬请止步于此.免得浪费您的时间效果图基于antd的sidebar组件封装实现思路实现思路自行维护一份静态路由表结合路由的history对象的pathanme在组件渲染完毕的情况下,再去遍历路由表,通过setState重新...原创 2018-08-09 18:03:23 · 7222 阅读 · 2 评论