react.js 从零开始(七)React (虚拟)DOM
React 元素
React 中最主要的类型就是 ReactElement
。它有四个属性:type
,props
,key
和ref
。它没有方法,并且原型上什么都没有。
可以通过 React.createElement
创建该类型的一个实例。
var root = React.createElement('div');
为了渲染一个新的树形结构到 DOM 中,你创建若干个 ReactElement
,然后传给React.render
作为第一个参数,同时将第二个参数设为一个正规的 DOM 元素
(HTMLElement
或者 SVGElement
)。不要混淆 ReactElement
实例和 DOM 元素
实例。一个 ReactElement
实例是一个轻量的,无状态的,不可变的,虚拟的 DOM 元素
的表示。是一个虚拟 DOM。
React.render(root, document.body);
要添加属性到 DOM 元素,把属性对象作为第二个参数传入 React.render
,把子级作为第三个参数传给 React.render
。
var child = React.createElement('li', null, 'Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child);
React.render(root, document.body);
如果使用 React JSX 语法,这些 ReactElement
实例自动创建。所以,如下代码是等价的:
var root = <ul className="my-list">
<li>Text Content</li>
</ul>;
React.render(root, document.body);
工厂
一个 ReactElement
工厂就是一个简单的函数,该函数生成一个带有特殊 type
属性的ReactElement
。React 有一个内置的辅助方法用于创建工厂函数。事实上该方法就是这样的:
function createFactory(type){
return React.createElement.bind(null, type);
}
该函数能创建一个方便的短函数,而不是总调用 React.createElement('div')
。
var div = React.createFactory('div');
var root = div({ className: 'my-div' });
React.render(root, document.body);
React 已经内置了常用 HTML 标签的工厂函数:
var root = React.DOM.ul({ className: 'my-list' },
React.DOM.li(null, 'Text Content')
);
如果使用 JSX 语法,就不需要工厂函数了。JSX 已经提供了一种方便的短函数来创建ReactElement
实例。
React 节点
一个 ReactNode
可以是:
ReactElement
string
(又名ReactText
)number
(又名ReactText
)ReactNode
实例数组 (又名ReactFragment
)
这些被用作其它 ReactElement
实例的属性,用于表示子级。实际上它们创建了一个ReactElement
实例树。 (These are used as properties of other ReactElement
s to represent children. Effectively they create a tree of ReactElement
s.)
React 组件
在使用 React 开发中,可以仅使用 ReactElement
实例,但是,要充分利用 React,就要使用 ReactComponent
来封装状态化的组件。
一个 ReactComponent
类就是一个简单的 JavaScript 类(或者说是“构造函数”)。
var MyComponent = React.createClass({
render: function() {
...
}
});
当该构造函数调用的时候,应该会返回一个对象,该对象至少带有一个 render
方法。该对象指向一个 ReactComponent
实例。
var component = new MyComponent(props); // never do this
除非为了测试,正常情况下不要自己调用该构造函数。React 帮你调用这个函数。
相反,把 ReactComponent
类传给 createElement
,就会得到一个 ReactElement
实例。
var element = React.createElement(MyComponent);
或者使用 JSX:
var element = <MyComponent />;
当该实例传给 React.render
的时候,React 将会调用构造函数,然后创建并返回一个ReactComponent
。
var component = React.render(element, document.body);
如果一直用相同的 ReactElement
类型和相同的 DOM 元素
容器调用 React.render
,将会总是返回相同的实例。该实例是状态化的。
var componentA = React.render(<MyComponent />, document.body);
var componentB = React.render(<MyComponent />, document.body);
componentA === componentB; // true
这就是为什么不应该创建你自己的实例。相反,在创建之前,ReactElement
是一个虚拟的ReactComponent
。新旧 ReactElement
可以比对,从而决定是创建一个新的ReactComponent
实例还是重用已有的实例。
ReactComponent
的 render
方法应该返回另一个 ReactElement
,这就允许组件被组装。 (The render
method of a ReactComponent
is expected to return another ReactElement
. This allows these components to be composed. Ultimately the render resolves intoReactElement
with a string
tag which instantiates a DOM Element
instance and inserts it into the document.)
正式的类型定义
入口点(Entry Point)
React.render = (ReactElement, HTMLElement | SVGElement) => ReactComponent;
节点和元素(Nodes and Elements)
type ReactNode = ReactElement | ReactFragment | ReactText;
type ReactElement = ReactComponentElement | ReactDOMElement;
type ReactDOMElement = {
type : string,
props : {
children : ReactNodeList,
className : string,
etc.
},
key : string | boolean | number | null,
ref : string | null
};
type ReactComponentElement<TProps> = {
type : ReactClass<TProps>,
props : TProps,
key : string | boolean | number | null,
ref : string | null
};
type ReactFragment = Array<ReactNode | ReactEmpty>;
type ReactNodeList = ReactNode | ReactEmpty;
type ReactText = string | number;
type ReactEmpty = null | undefined | boolean;
类和组件(Classes and Components)
type ReactClass<TProps> = (TProps) => ReactComponent<TProps>;
type ReactComponent<TProps> = {
props : TProps,
render : () => ReactElement
};
react.js 从零开始(七)React (虚拟)DOM的更多相关文章
- react快速上手一(使用js语法,创建虚拟DOM元素)
1.装包,引包 首先需要安装两个包 react ,react-dom cnpm i react react-dom 介绍下这两个包: react:专门用来创建React组件,组件生命周期等这些东西. ...
- react.js 从零开始(一)
React 是什么? 网络上的解释很多...我这里把他定义为 通过javascript 的形式组件化 html的框架... React 仅仅是 VIEW 层. React 提供了模板语法以及一些函数钩 ...
- react起步——从零开始编写react项目
# index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
- react.js 从零开始(五)React 中事件的用法
事件系统 虚拟事件对象 事件处理器将会传入虚拟事件对象的实例,一个对浏览器本地事件的跨浏览器封装.它有和浏览器本地事件相同的属性和方法,包括 stopPropagation() 和 prevent ...
- react.js 从零开始(四)React 属性和状态详解
属性的含义和用法: 1.属性的含义. props=properties 属性:一个事物的性质和关系. 属性往往与生俱来,不可以修改. 2. 属性的用法. <Helloworld name=??? ...
- react.js 从零开始(三)JSX 语法及特点介绍
什么是jsx? jsx = JavaScript + xml jsx 是一种 Ecmascript 的一种新标准. jsx 是一种 带有结构性的语法. jsx 的特点: 1.类xml语法易于理解. 2 ...
- react.js 从零开始(六)Reconciliation
Reconciliation React 的关键设计目标是使 API 看起来就像每一次有数据更新的时候,整个应用重新渲染了一样.这就极大地简化了应用的编写,但是同时使 React 易于驾驭,也是一 ...
- react.js 从零开始(二)组件的生命周期
什么是生命周期? 组件本质上是一个状态机,输入确定,输出一定确定. 当状态改变的时候 会触发不同的钩子函数,可以让开发者做出响应.. 一个组件的生命周期可以概括为 初始化:状态下 可以自定义的函数 g ...
- React diff机制(介绍虚拟DOM的机制)
https://segmentfault.com/a/1190000004003055
随机推荐
- SlopOne推荐算法
在开源框架taste中有SlopOne的Java实现,效果不错.使用movielens的数据,代码例如以下 代码 #coding:utf-8 import re import math #读取数据,并 ...
- twrp gui/actions.cpp 中的功能实现 tw_action ,tw_action_param ,第二章
继续分析 twrp ui.xml中的相关内容,以<page name="reboot">为讲解内容 <object type="button" ...
- 玩转html5(二)----用canvas结合脚本在画布上画简单的图(html5又一强大功能)
在html5中可以使用canvas标签在画布上画图,先直接上代码,这篇文章先简单介绍一下canvas的使用方法,简单画几个圆,矩形,三角形,写字. 在代码中均给出了注释,在这里特别强调的一点是:使用c ...
- Case learning
bad case: <?php foreach($user_detail AS $val) { if(!empty($val->portrait)) { //假设这个循环从来没有到达过 $ ...
- ViewRootImpl和WindowManagerService笔记
1.每个窗体的ViewRootImpl都有一个mWindowAttributes窗体属性,该属性在WindowManagerGlobal.updateViewLayout()->ViewRoot ...
- Linux中查看socket状态(转)
Linux中查看socket状态:cat /proc/net/sockstat #(这个是ipv4的) sockets: used 137 TCP: inuse 49 orphan 0 tw 3272 ...
- [Unity3D]Unity3D游戏开发Lua随着游戏的债券(于)
---------------------------------------------------------------------------------------------------- ...
- 【剑指offer】删除字符也出现在一个字符串
转载请注明出处:http://blog.csdn.net/ns_code/article/details/27110873 剑指offer上的字符串相关题目. 题目:输入两个字符串,从第一字符串中删除 ...
- 【转】tomcat 访问软连接文件夹下的网页出现404错误,description The requested resource (/xxx.html) is not available.
在 tomcat/webapps/ROOT/ 下建立一个软连接文件ln -s /home/ubuntu/report report 再到report软连接目录里建立个 report.html通过浏 ...
- 开始的iOS编程之前的准备
原地址:http://www.appcoda.com/what-you-need-to-begin-ios-programming/ 1.准备一台苹果设备 这段基本是废话,我就不翻译了,IOS开发你懂 ...