React虚拟DOM中常用术语
在React的所有术语中,有五种核心类型是需要我们记住的。这五种类型分别是
ReactElement / ReactElement Factory
ReactComponent / ReactComponent Class
下面我们分别来看这五种类型
在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节点可以是下面的任何一种情况
· ReactElement
· string (aka ReactText)
· number (aka ReactText)
· Array of ReactNodes (aka ReactFragment)
当然,我们在使用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有所帮助。
相关文章
Python 中错误 ValueError: Math Domain Error
发布时间:2023/07/09 浏览次数:607 分类:Python
-
在本篇文章中,我们的目标是探索解决 Python 中的 ValueError: math domain error 错误的不同方法。当编码方面数学(基础或高级)的使用存在固有缺陷时,Python 中通常会引发 ValueError: math domain error 错
Python 函数 math.log 中错误 ValueError: math domain error
发布时间:2023/05/17 浏览次数:509 分类:Python
-
同样,如果在 math.log() 函数中指定的值为 0 或负数,则会抛出 ValueError。 本篇文章将介绍解决 Python 中的 ValueError: math domain error。
在 Kotlin 中获取随机数
发布时间:2023/05/13 浏览次数:365 分类:Java
-
随机数是使用一种算法从一组数字中生成的,该算法可确保每个数字的生成概率相等。在Kotlin中使用IntRange的random()扩展函数
Node.js 与 React JS 的比较
发布时间:2023/03/27 浏览次数:173 分类:Node.js
-
本文比较和对比了两种编程语言,Node.js 和 React。React 和 Node.js 都是开源 JavaScript 库的示例。 这些库用于构建用户界面和服务器端应用程序。
在 TypeScript 中 React UseState 钩子类型
发布时间:2023/03/19 浏览次数:246 分类:TypeScript
-
本教程演示了如何在 TypeScript 中使用 React useState hook。
TypeScript 中的 React 事件类型
发布时间:2023/03/19 浏览次数:477 分类:TypeScript
-
本教程演示了如何在 TypeScript 中为 React 事件添加类型支持。
在 React 中循环遍历对象数组
发布时间:2023/03/18 浏览次数:602 分类:React
-
在 React 中循环对象数组: 使用 map() 方法迭代数组。 我们传递给 map() 的函数会为数组中的每个元素调用。 该方法返回一个新数组,其中包含传入函数的结果。 export default function App (
获取 React 中元素的类名
发布时间:2023/03/18 浏览次数:340 分类:React
-
在 React 中使用 event.target 获取元素的类名 获取元素的类名: 将元素上的 onClick 属性设置为事件处理函数。 访问元素的类名作为 event.currentTarget.className 。 export default function App () { cons