前端-react
从源码出发,探索react各个知识点的巧妙之处
宅神kin
因为同样的坑不想踩两次而写博客
展开
-
echarts 饼图 lengend 对齐并截断文本
let baseLengend = { width: 240, bottom: 20, right: 30, textStyle: { rich: { a: { color: '#fff', fontSize: 12, lineHeight: 12, width: 60 } } }, formatter: function(name){ return ["{a|" + e.原创 2021-12-21 15:56:44 · 715 阅读 · 0 评论 -
ant-design 表格固定列样式混乱问题
在使用 ant-design 时,要实现表格的列固定只需加 fixed 属性即可,但如果固定列不在最前面,会导致样式混乱。所以就变成了数组的排序问题了,将符合条件的项放至数组最前,其余列相对位置不变。抽象一下:// 将数组中的偶数排在最前,并保持相对位置,期望输出: [2,4,6,1,7,3,9]let a = [1, 2, 4, 7, 3, 6, 9];首先想到的是暴力输出,就是两个数组分别保存偶数和奇数,最终拼起来。// 暴力输出let result = a.reduce((acc,原创 2021-03-08 21:30:08 · 2044 阅读 · 0 评论 -
再读 React 官方文档
首先祝大家 1024 快乐,然后是最近在看的文档,毕竟最好的 React 学习资料还是官方文档。第一次读 React 文档是为了会用,第二次读,是为了学一些不常用的或者新的特性。 像 hook、HOC 等等现在再读文档,我希望了解之前忽略的部分(如设计理念,规则,定义),完善对它的理解。React 哲学如何创建应用?按照“单一功能原则”(即一个组件原则上只负责一个功能)将 UI 拆分组件层级因为你经常是在向用户展示 JSON 数据模型,所以如果你的模型设计得恰当,UI(或者说组件结构)便.原创 2020-10-24 22:16:25 · 353 阅读 · 0 评论 -
react cra+dva—登录实现
react+dva—登录实现上一节使用react-redux实现了最简登录,我们改用dva库替代 react-redux本节完整代码github链接注: 本文是在上篇 react实现最简登录 的基础上加上 dva库的使用分步骤进行:删掉store目录(不需要了,store换个形式放到dva app中注册dva appdva也提供了 connect 方法,将privateRout...原创 2020-03-11 16:59:58 · 935 阅读 · 0 评论 -
react案例—实现最简登录
react案例—实现最简登录文中代码都是片段,主要说明主要逻辑,完整代码参考 github用到的库是 react-router + react-redux通过 react-route 的快速入门我们很容易可以得到这样的路由最终效果主要逻辑我们进一步来改造,实现进来默认到登录页,登录成功看到菜单及对应组件。简单分析下需求:用户打开页面‘/’时,会先判断是否登录,我们用一...原创 2020-03-10 14:39:59 · 3031 阅读 · 3 评论 -
React源码解析(一)
React源码解析(一)github地址要点掌握:三个API作用,Component、render、createElementjsx模板渲染的过程:createElementfunction createElement(type, props, ...children) { if (props) { delete props.__source; delete ...原创 2020-03-08 23:35:08 · 773 阅读 · 0 评论 -
react相关库扫盲
react相关库建议多多阅读dva与umi文档先来做一些概念扫盲:redux-thunk: redux中间件,用来改造store.dispatch, 使其可以接收函数作为参数。通常可以它其作为异步的一种解决方案。redux-saga: 管理应用副作用的库,即管理异步获取数据、访问浏览器缓存相关操作, 从名字上来看就跟状态相关。redux-saga与redux-thunk相比,他...原创 2020-03-06 19:52:04 · 520 阅读 · 0 评论 -
实现简易版 React Route
实现简易版 React Route我们都知道 React中,一切皆组件。Router的使用就是引入一个个组件,非常方便。常见的路由组件有这些:Link 路由链接Route 基本路由Switch 独占路由Redirect 重定向组件PrivateRoute 导航守卫BrowserRouter 在Route基础上添加了一些API方法上面组件用法不多介绍了,参考react-route...原创 2020-03-03 01:56:02 · 410 阅读 · 0 评论 -
手动实现简易版redux
手动实现简易版redux源码地址:kredux分支先来回顾下redux工作方式store 状态管理容器,内置getState, dispatch, subscribe方法state 改变的唯一方式是通过 store.dispatch(action) 来触发reducer,reducer根据action传来的type实现不同的更新state措施由于redux无法异步,所以需要对red...原创 2020-02-24 00:40:03 · 460 阅读 · 0 评论 -
手动实现简易版 react-redux
实现简易版 react-redux上一节我们实现了简易版的 redux,本节主要实现 react-redux。同时解决下面问题:相比 redux, react-redux 有什么好处/做了什么react-redux 用法react-redux 有什么好处redux中的 createStore 方法返回三个内置方法getState, dispatch, subscribe...原创 2020-03-02 17:43:21 · 353 阅读 · 1 评论