React vs 原生JS DOM操作
- 运用原生JS API代码风格很重要，否则维护起来很困难，但是理解原生API也是一个有必要的
- DOM更改很慢，不像其他JS代码一样可以很快优化
同步UI与数据模型的变化
- 双向数据绑定：
- 键值观察的方式 Ember.js Knockout Backbone iOS
- 脏检测：Angular
- 虚拟DOM ：React
虚拟DOM工作过程
- 数据模型发生变化，虚拟DOM和React就会将UI重绘为虚拟DOM形式。
- React会计算改变之前和改变之后两个虚拟DOM之间的区别，这个区别就是在真实DOM中需要修改的地方。
- React在真实的DOM上更新需要更新的部分
对比两种不同的虚拟DOM然后在真实DOM上更新需要更新的部分，这个过程很迅速。开发者不需要关心哪些地方需要重新绘制。给人的感觉就是：每次状态变化都在渲染整个DOM
(关于虚拟DOM背后逻辑，以及它与数据绑定的区别的视频)[https://www.youtube.com/watch?v=-DX3vJiqxm4]
React.creatElement(type,props,children)
type
- 如果是字符串：必须是html标签名
- 如果是ReactClass：通过React.createClass()创建的
props
- 参数是一个对象
- 会被从父元素传递到子元素
- 具有不可变性
children
描述了元素应当含有的子元素，包括任何ReactNode元素
- ReactElement 表示虚拟DOM
- ReactText 表示字符串或者数字
- ReactFragment 表示多个ReactNode组成的数组
工厂函数
React自带的函数，可以用来生成DOM，更简洁
可以要用的时候再了解。
ReactDOM.render(ReactElement, DOMElement, callback)
- ReactElement 创建的ReactNode的根节点
- DOMElement 一个真实DOM节点
- callback 在渲染或者更新后调用
加快UI渲染速度
将渲染工作放到服务器端来做，通过Node.js在服务器上运行JavaScript，在服务器端React可以做到这一点。
ReactDOMServer.renderToString(ReactElement)
var ReactDOMServer = require('react-dom/server)
ReactDOMServer.renderToString(ReactElement)
ReactDOMServer.renderToStaticMarkup(ReactElement) //生成静态页面
遇到的问题
安装react-dom@0.14.0-beta3 时报错
npm ERR! Unexpected end of JSON input while parsing near
解决办法：npm cache clean --force
（npm：I sure hope you know what you are doing....内心惶恐，但是这个方法确实管用）纠结时间比较长一点的问题，遇到了babelify模块版本问题，因为这本书作者的模块使用的版本和我用的不一样，导致了JSX不能正确解析，在github作者的答疑区找到了答案。基本原理就是用使得两个版本统一
问题解决github地址
然后发现再翻两页作者再脚注里写了解决方法。
差点心态就崩了。嘛～ 积累经验的过程。Be Strong！
人间不值得。。。
