React 及相关可推荐的配套框架技术
2017-03-31 09:44
507 查看
背景
参与近一个月React项目,因之前从未接触过React实际项目。感慨颇多,从小白开始记录总结。首先,介绍一下项目技术React
ES7
Redux
Material UI
Immutable
Lodash
Webpack
React
声明式设计 : React采用声明范式,可以轻松描述应用。高效 : React通过对DOM的模拟,最大限度地减少与DOM的交互。【View更新在内存里进行,所以快】
灵活 : React可以与已知的库或框架很好地配合。
JSX : JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。【javascript中写HTML代码】
组件 : 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。【模块化】
单向响应的数据流 : React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。【由顶部到底部进行数据传递,或者说从根元素向子元素(HTML标签属性绑定数据)传递】
-
ES7
基本同ES6。值得注意的是,nodejs升级到6.0版本以上已经支持ES6/7,无需babel就可以轻松构建后台服务Material UI
基于React的一套成熟UI套件,包含了各种前端组件。如:按钮、工具条、分割线、菜单导航、下拉列表、模态窗等等。每一个都是被封装成React组件,引入后可直接当项目组件用,官网API很完善 Material UI 官方APIImmutable
JavaScript 中的对象一般是可变的(Mutable),因为使用了引用赋值,新的对象简单的引用了原始对象,改变新的对象将影响到原始对象。如foo={a: 1}; bar=foo; bar.a=2你会发现此时
foo.a也被改成了
2。虽然这样做可以节约内存,但当应用复杂后,这就造成了非常大的隐患,Mutable 带来的优点变得得不偿失。
为了解决这个问题,一般的做法是使用 shallowCopy(浅拷贝)或 deepCopy(深拷贝)来避免被修改,但这样做造成了 CPU 和内存的浪费。
常用的高频方法:
Map:键值对集合,对应于 Object,ES6 也有专门的 Map 对象
List:有序可重复的列表,对应于 Array
Set:无序且不可重复的列表
更多方法参见Imumutable 官网
Lodash
一个具有一致接口、模块化、高性能等特性的 JavaScript 工具库。主要解决javascript中数组、对象的操作复杂的问题。代码一堆foreach可是又束手无策,如果以前你用underscore解决此问题,现在lodash也可以解决,性能更优。link text
Webpack
此文仅仅引出一个引子,后续详细整理…相关文章推荐
- 推荐 ADO.NET Entity Framework (EDM) 相关技术文章
- 强烈推荐Android开发技术系列文,android底层架构,android核心框架
- 软件学习经典书籍和相关技术推荐
- Storm分布式实时流计算框架相关技术总结
- 360方案 相关技术(推荐、排序、点击率预估)
- 推荐介绍一项新的工程技术:[威胁建模]的相关系列文章《威胁建模Web 应用程序》
- 开源技术推荐:安全测试框架AndroBugs Framework
- php相关技术、框架或工具
- 关注并订阅Autodesk地理信息解决方案相关技术博客赢取Autodesk权威开发专家编写的官方推荐教材!!
- 对比React Native、dcloud、LuaView三个框架技术(内部)
- 强烈推荐Android开发技术系列文,android底层架构,android核心框架
- 网络技术相关总结 推荐
- 3.3程序设计框架架构基础相关知识点-技术
- Storm分布式实时流计算框架相关技术总结
- [框架技术推荐]Bootstrap:快速开发Web应用程序的前端工具包
- 【强烈推荐】CodeFx:一站式微软开发技术框架解决方案——由微软内开发团队开发
- 3.3程序设计框架架构基础相关知识点-技术
- WPF技术相关书籍推荐与下载地址
- 关键词推荐工具中的用户引导机制之三:相关搜索query技术
- Storm分布式实时流计算框架相关技术总结