React 及相关可推荐的配套框架技术

背景

参与近一个月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 官方API

Immutable

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

此文仅仅引出一个引子，后续详细整理…