迹忆博客
当前位置: 主页 > 学无止境 > WEB前端 > 文章

React虚拟DOM中常用术语

发布时间: 2016-04-19 作者: 迹忆 浏览次数:

在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

这就是为什么你不要自己去构造实例化对象。反之,ReactElement在它被构造出来之前是一个虚拟的ReactComponent组件。原先的ReactElement和新的ReactElement会进行对比,看是否需要创建新的ReactComponent组件。或者原先存在的是否需要重新使用。

上面对这几种常用的React术语进行了大概的介绍,这篇文章基本上是翻译的官方文档,其中涉及到的函数的使用在文章中都有指明其参考文章。希望本文对大家学习React有所帮助。

除非注明转载,本站文章均为原创,欢迎转载,转载请以链接形式注明出处

本文地址: