React虚拟DOM中常用术语有哪些


这篇“React虚拟DOM中常用术语有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“React虚拟DOM中常用术语有哪些”文章吧。在React的所有术语中,有五种核心类型是需要我们记住的。这五种类型分别是ReactElement / ReactElement FactoryReactNodeReactComponent / 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 = 二者创建出来的元素可以是认为等价的。FactoriesReactElement-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(, document.getElementById(‘example’));
var componentB = ReactDOM.render(, document.getElementById(‘example’));
componentA === componentB; // true这就是为什么你不要自己去构造实例化对象。反之,ReactElement在它被构造出来之前是一个虚拟的ReactComponent组件。原先的ReactElement和新的ReactElement会进行对比,看是否需要创建新的ReactCompone 香港云主机nt组件。或者原先存在的是否需要重新使用。以上就是关于“React虚拟DOM中常用术语有哪些”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注开发云行业资讯频道。

相关推荐: python怎么实现替换空格

今天小编给大家分享一下python怎么实现替换空格的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。请实现一个函数,将一个字符串中的每个空格替换成“…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 07/15 11:29
下一篇 07/15 11:30

相关推荐