React使用Virtual DOM
React和早期的前端JavaScript框架是不一样的。早期的JavaScript框架是直接协同浏览器的DOM操作。而React构架了一种DOM的虚拟表达方式(virtual representation)。什么是虚拟？意思是指用JavaScript对象的树形结构来表达“实际的DOM”。
在React中，我们不（或者应该尽量避免）直接操作DOM。取而代之的是，我们必须操作并改变virtual DOM，然后React会根据virtual DOM的改变来改变浏览器的实际DOM。
这是一个非常强大的特性，但是也需要我们以不同的思考方式来构建web apps。
为什么不直接修改实际的DOM？
这是一个很值得提问的问题：为什么我们需要virtual DOM？为什么我们不直接操作实际的DOM？当我们使用“传统的”（例如jQuery）方式进行web开发，我们通常会这样做：
- 获取元素(使用
document.querySelector或者document.getElementById) - 直接修改元素(例如使用
innerHTML)
但是这样的开发形式是有问题的：
- 跟踪状态的变化是非常难的：我们想要跟踪获取DOM当前的以及之前的状态是非常困难的，而这些状态却在开发中很重要
- 会导致网页变慢：直接修改DOM是非常耗时的操作。如果每个DOM都发生了变化，那么网页的性能会变得很低。
什么是virtual DOM？
virtual DOM的出现就是为了解决以上的问题的。
virtual DOM是用JavaScript对象来表达实际DOM。
重新构造整体的DOM的想法来源于一个很容易理解的开发模式：开发者仅需要简单的返回他们想要见到的DOM，而不是让开发者跟踪所有的DOM状态变化。而React则会在幕后关心这些变化。
每当更新以后就重构virtual DOM听起来是一个不好的主意：难道每次重构不会降低网页性能从而导致很慢吗？事实上，React的virtual DOM操作伴随着很重要的性能优化，这样就会让它变得很快：
- 使用高效的diff算法
- 同时跟新DOM的子树
- 批处理的方式更新DOM
所以我们的任务就是给React提供足够的信息让其构建一个JavaScript对象，用这个JavaScript对象告诉浏览器需要渲染什么。
那么，virtual DOM JavaScript对象是由什么组成的？
React的virtual DOM是 ReactElements构成的树。
ReactElement
var boldElement = React.createElement('b')
这个boldElement就是 ReactElement的一个实例。虽然我们现在有了这个实例，但是如果不让React将其渲染到实际的DOM树上，这个实例仍然是不可见的。
渲染ReactElement
为了将该元素渲染到实际的DOM树上，我们需要ReactDOM.render()。ReactDOM.render()需要两样东西：
- 需要渲染什么 (what)
- 渲染的位置在哪 (where)
渲染的位置就是我们之前一直用的<div id="root"></div>。
var boldElement = React.createElement('b')
var mountElement = document.querySelector('#root')
ReactDOM.render(boldElement, mountElement)
添加文本（以子元素的方式）
尽管我们的DOM中有了b标签，但是在这个标签中添加文本会显得更好。由于是在b标签的标签对中添加文本，所以添加文本更像是在添加该元素的子元素。
上面例子，我们仅仅使用了React.createElement的一个参数，事实上，React.createElement接受三个参数：
- DOM元素类型
- 元素的属性（props）
- 元素的子元素
我们会在后面讨论第二点的props，目前我们将其设置为null。
DOM元素的子元素必须是一个ReactNode对象，也就是说它需要满足以下几点
- 是 ReactElement
- 字符串或者数字（ReactText对象）
- ReactNodes数组
比如说对于刚刚的b标签，如果我们想向其添加文本，则需：
var mountElement = document.querySelector('#root')
var boldElement = React.createElement('b', null, 'Text (as s string)')
ReactDOM.render(boldElement, mountElement)
ReactDOM.render()
React可以将生成的virtual DOM树在不同的场景下进行渲染。也就是说，React不仅仅可以将其渲染到浏览器的DOM，而且可以将其渲染到其他平台，例如移动端。React Native,就是将virtual DOM树渲染到移动端的一种技术。
网友评论