【序(转) · 为 React 而写 -- 废话比较多, 你也可以说丰满】的更多相关文章

序(转) · 为 React 而写 -- 废话比较多, 你也可以说丰满

流形 2 年前 (废话比较多       从今年开始,就一直在规划技术沉淀这事. 在阿里巴巴工作的这些年,前端团队日益壮大,同时聚集了一帮志趣相投的伙伴. 作为团队负责人,一方面是借团队在技术道路上的历程为开端,另一方面为了不忘初心回馈社区. 在2014年7月,在面临即将排期的平台级项目,我没有马上依照经验架构项目框架, 想通过这次机会解决一个困扰我的问题,开发效率和维护效率如何平衡的问题. 对于项目开发而言,产品既要快速产出结果,又要持续生命周期,膨胀的代码规模是件麻烦事. 那时,团队的技术架…

放弃antd table，基于React手写一个虚拟滚动的表格

缘起 标题有点夸张,并不是完全放弃antd-table,毕竟在react的生态圈里,对国人来说,比较好用的PC端组件库,也就antd了.即便经历了2018年圣诞彩蛋事件,antd的使用者也不仅不减,反而有所上升. 客观地说,antd是开源的,UI设计得比较美观(甩出其他组件库一条街),而且是蚂蚁金服的体验技术部(一堆p7,p8,p9,基本都是大牛级的)在持续地开发维护,质量可以信任. 不过,antd虽好,但一些组件在某一些场景下,是很不适用的.例如,以表格形式无限滚动地展示大量数据(1w+)时,…

React 系列 - 写出优雅的路由

前言 自前端框架风靡以来,路由一词在前端的热度与日俱增,他是几乎所有前端框架的核心功能点.不同于后端,前端的路由往往需要表达更多的业务功能,例如与菜单耦合.与标题耦合.与"面包屑"耦合等等,因此很少有拆箱即用的完整方案,多多少少得二次加工一下. 1. UmiJS 简述 优秀的框架可以缩短 90% 以上的无效开发时间,蚂蚁的 UmiJS 是我见过最优雅的 React 应用框架,或者可以直接说是最优雅的前端解决方案(欢迎挑战),本系列将逐步展开在其之上的应用,本文重点为"路由&q…

React自己写的一个地图小组件

由于今天比较闲,就玩了玩react,然后就封装了一个地图的组件,当然功能比较简单,因为就是随手写的小东西,但是由于引用了百度API和bee-mobile,所以用起来可能要薛微麻烦一点点,但是我保证,只是一点点而已. 由于之前发了一次,说字数太少从主页移出了,作为一个铁头娃,那我肯定得重写啊.前一次发的不够细致,这次就薛微细一点好吧, 由于,由于,鱿鱼,说的我都饿了.不说了进入正题好吧, 首先说说主体思想,思想比较简单,去拿过来百度地图的API和bee-mobile,然后将两者结合到一起,形成新的…

在React中写一个Animation组件，为组件进入和离开加上动画/过度

问题 在单页面应用中,我们经常需要给路由的切换或者元素的挂载和卸载加上过渡效果,为这么一个小功能引入第三方框架,实在有点小纠结.不如自己封装. 思路 原理 以进入时opacity: 0 --> opacity: 1 ,退出时opacity: 0 --> opacity: 1为例 元素挂载时 挂载元素dom 设置动画opacity: 0 --> opacity: 1 元素卸载时 设置动画opacity: 0 --> opacity: 1 动画结束后卸载dom 组件设计 为了使得组件简…

React 入门-写个 TodoList 实例

React 是一个用于构建用户界面的 JavaScript 库,主要特点有: 声明式渲染:设计好数据和视图的关系,数据变化 React 自动渲染,不必亲自操作DOM 组件化:页面切分成多个小部件,通过组装拼成整体页面,利于代码复用 本文通过写个简单的 TodoList 实例,不求甚解,熟悉下 React 的开发过程. 1. 安装 Node.js Node.js 是一个运行环境,类似 jdk,用以支持在服务端运行 JavaScript. 您可以在这里下载安装包: http://nodejs.cn/…

用react+redux写一个todo

概述 最近学习redux,打算用redux写了一个todo.记录下来,供以后开发时参考,相信对其他人也有用. 代码 代码请见我的github 组织架构如下图:…

使用React.js写一个类似单选框与复选框的功能

单选框 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script…

react一写工具

动画库:React-transition-group ui框架:Ant Design…

写了一个基于React+Redux的仿Github进度条

曾经实现过Angular版,这次感觉用了高大上的React却写了更多的代码,需要的配置也更多了,有利有弊吧. 但这个“导航条问题”很有意思,涉及到在Redux中写timer,其实我很困惑,到底如何完美模拟用户的页面加载, 貌似浏览器并没有提供进度API,只能以这样拙劣的方式进行模拟,有兴趣的朋友不妨与我交流. 代码附上: LoadingBar.jsx import React, { Component, PropTypes } from 'react'; import { connect } f…