React虚拟DOM中常用术语

Z时代
2024-01-10
分类：综合

在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');

关于React.createElement的具体用法，大家可以参考《React.createElement方法使用详解》这篇文章。

为了可以渲染成一个新的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 = <ul className="my-list">

<li>Text Content</li>

</ul>;

ReactDOM.render(root, document.getElementById('example'));

二者创建出来的元素可以是认为等价的。

Factories

ReactElement-factory 是一个简单的生成带有特定类型属性的ReactElement的工厂方法。React带有一个内置的帮助手册，以便于你很方便的创建这个工厂方法。如下所示

function createFactory(type) {

return React.createElement.bind(null, type);

}

关于createFactory的使用大家可以参考《React工厂方法——createFactory使用详解》这篇文章。那好，我们接着往下说。

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 = <MyComponent />;

当把element传递给ReactDOM.render的时候，React将会调用构造方法去创建一个ReactComponent，示例如下

var component = ReactDOM.render(element, document.getElementById('example'));

如果你多次调用ReactDOM.render，并且传递给它的是相同类型的ReactElement还有相同的DOM元素容器。那么它们将会返回相同的实例对象。并且这个实例是有状态的。

var componentA = ReactDOM.render(<MyComponent />, document.getElementById('example'));

var componentB = ReactDOM.render(<MyComponent />, document.getElementById('example'));

componentA === componentB; // true