《React精髓》实践笔记 - Chapter 2

React vs 原生JS DOM操作

1. 运用原生JS API代码风格很重要，否则维护起来很困难，但是理解原生API也是一个有必要的
2. DOM更改很慢，不像其他JS代码一样可以很快优化

同步UI与数据模型的变化

1. 双向数据绑定：
   • 键值观察的方式 Ember.js Knockout Backbone iOS
   • 脏检测：Angular
2. 虚拟DOM ：React

虚拟DOM工作过程

1. 数据模型发生变化，虚拟DOM和React就会将UI重绘为虚拟DOM形式。
2. React会计算改变之前和改变之后两个虚拟DOM之间的区别，这个区别就是在真实DOM中需要修改的地方。
3. 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) //生成静态页面

遇到的问题

1. 安装[email protected] 时报错
   npm ERR! Unexpected end of JSON input while parsing near
   解决办法：npm cache clean --force
   （npm：I sure hope you know what you are doing....内心惶恐，但是这个方法确实管用）

2. 纠结时间比较长一点的问题，遇到了babelify模块版本问题，因为这本书作者的模块使用的版本和我用的不一样，导致了JSX不能正确解析，在github作者的答疑区找到了答案。基本原理就是用使得两个版本统一
   问题解决github地址
   然后发现再翻两页作者再脚注里写了解决方法。
   差点心态就崩了。嘛～ 积累经验的过程。Be Strong！
   人间不值得。。。