React虚拟DOM中常用术语有哪些
这篇"React虚拟DOM中常用术语有哪些"文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇"React虚拟DOM中常用术语有哪些"文章吧。
在React的所有术语中，有五种核心类型是需要我们记住的。这五种类型分别是
ReactElement / ReactElement Factory
ReactNode
ReactComponent / ReactComponent Class
下面我们分别来看这五种类型
React Element
在React中主要的虚拟DOM的类型就是ReactElement。ReactElement有四种属性，分别是：type，props，key和ref。它没有封装的内部方法，并且原型上面什么都没有。
该类型我们可以通过React.createElement来创建。
var root = React.createElement('div');
为了可以渲染成一个新的DOM树，我们可以创建ReactElement类型的元素，并且将这些元素传递给ReactDOM.render方法进行渲染。当然这些ReactElement也可以带有正规的DOM元素（其中包括HTML元素和SVG元素等等）。
通常情况下我们不要把ReactElement和真实的DOM元素相混淆。一个ReactElement是一个轻型的无状态的不可变的元素，它是一个虚拟的DOM元素。其中渲染方法如下代码
ReactDOM.render(root,document.getElementById(‘content’));
如果我们想在ReactElement上面加属性的话，我们可以将属性对象作为createElement方法的第二个参数，然后其孩子节点可以作为第三个参数。
var child = React.createElement('li', null, 'Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child);
ReactDOM.render(root, document.getElementById('example'));
同样，这些在《React.createElement方法使用详解》这篇文章中均有介绍。
如果我们要使用React的JSX语法的话，这些ReactElement元素就可以像这样创建。
var root =
- Text Content
ReactDOM.render(root, document.getElementById('example'));
二者创建出来的元素可以是认为等价的。
Factories
ReactElement-factory 是一个简单的生成带有特定类型属性的ReactElement的工厂方法。React带有一个内置的帮助手册，以便于你很方便的创建这个工厂方法。如下所示
function createFactory(type) {
return React.createElement.bind(null, type);
}
createFactory方法为我们提供了一个很方便的创建ReactElement的方法，我们可以不再总是使用React.createElement(‘div’)来创建了。
var div = React.createFactory('div');
var root = div({ className: 'my-div' });
ReactDOM.render(root, document.getElementById('example'));
除此之外，React还内置了标准HTML标签的工厂方法，例子如下
var root = React.DOM.ul({ className: 'my-list' },
React.DOM.li(null, 'Text Content')
);
React Nodes
一个React节点可以是下面的任何一种情况
· ReactElement
· string (aka ReactText)
· number (aka ReactText)
· Array of ReactNodes (aka ReactFragment)
React Components
当然，我们在使用React的时候可以仅仅使用ReactElement，但是，如果你想充分的利用React的优势的话，那么你就必须考虑使用ReactComponents去封装状态化的组件。
一个ReactComponent类仅仅只是一个Javascript类
var MyComponent = React.createClass({
render: function() {
...
}
});
当这个构造方法被调用的时候，至少要使用render返回一个对象，也就是说在createClass的第一个参数中（我们看到是一个对象）必须有render。返回的这个对象就是指定的ReactComponent。关于React.createClass的使用我们可以参考《React入门 createClass使用说明》
var component = new MyComponent(props); // 千万不要这样写
除了测试，最好不要这样调用。把这个交给React来做，它会为你去实现的。
你可以将ReactComponent传递给createElement，这样就可以得到一个ReactElement了。
var element = React.createElement(MyComponent);
或者也可以使用JSX语法
var element =
当把element传递给ReactDOM.render的时候，React将会调用构造方法去创建一个ReactComponent，示例如下
var component = ReactDOM.render(element, document.getElementById('example'));
如果你多次调用ReactDOM.render，并且传递给它的是相同类型的ReactElement还有相同的DOM元素容器。那么它们将会返回相同的实例对象。并且这个实例是有状态的。
var componentA = ReactDOM.render(
var componentB = ReactDOM.render(
componentA === componentB; // true
这就是为什么你不要自己去构造实例化对象。反之，ReactElement在它被构造出来之前是一个虚拟的ReactComponent组件。原先的ReactElement和新的ReactElement会进行对比，看是否需要创建新的ReactComponent组件。或者原先存在的是否需要重新使用。
以上就是关于"React虚拟DOM中常用术语有哪些"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。
