酷炫的react.js

高效的虚拟DOM:

为了跟踪模型层的变化，并且将其应用到DOM中（也就是渲染），我们需要注意两个 重要的事情：

1. 数据是什么时候改变的
2. 哪一个（些）DOM元素需要被更新

对于（1）而言，React提供了一个观察者模型用于替代传统的脏检查（dirty checking）， 也就是持续的检查模型的变化。这也就是解释了为什么React不需要计算哪些发生 了改变的原因，因为它会立即知道。这个过程减少了计算量，并它应用程序变得 更平滑。但这里真正有趣的是，React是如何管理DOM操纵的。

对于DOM改变（2）而言，React在内存中构建了DOM的树形表示，并且计算出哪个 DOM元素应该被改变。对浏览器而言，DOM操纵是比较耗费性能的，因此我们更倾向于 让其变得最小化。幸运的是，React视图尽可能少的触及到DOM元素。给予对象表示而言， 更少的DOM操纵意味着计算会更快，因此DOM改变也被尽可能的减少。

React在底层实现了一个diffing算法，该算法使用DOM的树形表示法，当某个 节点发生变化（标记为dirty）时它会重新计算整个子树，你会注意到你的模型发生 了改变，因为整个子树在之后会被重新渲染。关于该算法的详细分析可以参考这篇 文章。

服务器渲染：

因为React在DOM表示时使用了一个虚拟（假的）DOM，因此借助于这种方式使得在服务端 渲染输出HTML称为可能（不借助于JSDom,PhantomJS等）。React还能智能的识别出 服务端渲染出来的页面标记，并在客户端只为这些标记添加事件处理器，这对构建 同构web app非常有用。

有意思的是，React渲染出来的HTML标记都包含了data-reactid属性，这有助于 React中追踪DOM节点。

拥抱ES6：。。。。。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!