React入门到放弃实战

web react

React入门最好的教程还是官方的CommentBox，可以从http://reactjs.cn里面看到中文翻译的版本。

React的设计思路是能够复用组件化，由于web本身是html+js+css三种技术组合使用的，所以这就要求这三个东西都要组件化。React引入jsx语法来直接剥离html+js，形成一个组件。看起来有点像是开历史倒车，但是历史是螺旋向前发展的，而且jsx本身足够实用，比模板的思路表达能力更强。虽然很多人觉得ugly，但是模板本身也不好看啊。剩下的是css的模板化，不同于ES6/7的快速迭代，css这块标准化非常慢，sass+预处理是比较常规的一种方案，但是无法和React配合的很好。更好的方法是CSS Modules，当然这是大型项目才需要考虑的问题，对于一般的项目，可以使用最传统的全局css文件的方法。

语法

语法其实很简单，思路也很直接，就是模块化。通过props向子级传递只读属性，通过state改变自身状态，重新渲染。通过各种中间状态的回调函数来修改state。

如果有一些hack的东西，可以使用refs来突破React的限制，获得真实的DOM节点。

React的思想就是组件化，如果熟悉纯面向对象语言（比如Java）的话，会发现这一套设计思路非常眼熟。

技巧

官网的指南中有很多React的使用技巧，比如尽量无状态，使用...解构传递属性等等。当然其中大半与其说是技巧，不如说是一种约定。比如props只读，state尽量放在父组件中通过props向下传递。遵从这些约定，能够更容易的编码。

限制

虚拟的DOM有一些和真正的DOM不同的地方，比如表单组件有大量的不同，不过本质上都是更加易用的改动。

Flux

React只是MVC中的v，只规定了如何渲染视图。Flux是配合React的其他部分。Flux规定了单向数据流的路径，从Action->Dispatcher->Store->Views这个流动过程。简单的项目可以用react-router来实现。

Redux

redux是对flux的简化，不过说实话我对这种全局定义action，遍地都是字符串的东西不是很感冒。。

Elm

web前端技术发展日新月异，或者说太TMD快，新技术层出不穷。除了React以外，更新的技术包括TypeScript(Angular2), FRP(Rx.js), Elm(Haskell based)，等等新东西，看起来有点累感不爱。

目前流行的框架中，Avalon是唯一兼容IE6的（旧项目考虑）；Vue是新技术中入门最简单的；React是野心最大的；Elm是最前卫的；反正各有所长吧…

TODO List

这个小项目是很多框架的demo标配（至少从backbone开始），react有很多写作方式，最新潮的当然是webpack+es6+babel+jsx这种。

一个TODO List，按着Java的思路设计，本身是一个对象，这个对象可以：增删改查TODO项，因此传入TODO项后，就可以用html组成一个列表（包括编辑、删除按钮）

一个TODO项目：就是一条数据，可以被删改

一个输入框：用来添加新的TODO项，是TODO List对象里面的一个对象。

综上：TODO List包含以下内容：
1. 传入TODO项目列表，渲染成为列表；
2. 含有一个可以输入新项目的输入框，该输入框响应鼠标/键盘事件，添加/更新到List里；
3. TODO项目响应点击事件，将内容写入输入框；
4. 列表由删除按钮，响应点击事件，将数据移出List；

antd-design

目前主要用这个框架来写控制台。配合g2的图表功能，常见控制台的组件基本都能满足。

使用antd-init初始化项目，一般的小项目使用plain-react就可以了，Redux那一套用起来比较繁琐。

从迁移成本上将，将已有的bootstrap版本迁移到React上显然是不合适的。仔细想了一下现在的问题，还是引入requireJs将index.js进行拆分，然后将各部分模块化，引入package.json和requirejs就足够了，改动也比较小。