React学习笔记

和AngularJS相比，上手React简单到让人震惊。

在引入React库之后，开发API就通过React对象暴露出来了。我们要做的、能做的，就是：

在虚拟DOM上创建元素，然后将它们渲染到真实DOM上。

在示例代码中使用了React对象的两个方法：

createElement(type,[props],[children...]) - 在虚拟DOM上创建指定的React元素

参数type用来指定要创建的元素类型，可以是一个字符串或一个React组件类型。当使用字符串时，这个参数应当是标准的HTML标签名称，比如：p、div、canvas等等。

参数props是可选的JSON对象，用来指定元素的附加属性，比如样式、CSS类等等。我们在示例中简单的设置为null。

从第三个参数children开始的所有参数，都被认为是这个元素的子元素。考虑到虚拟DOM好歹也是DOM，容易理解React需要通过这些子元素参数，让我们可以构造虚拟DOM树：

var el = React.createElement(
"ul",
null,
React.createElement("li",null,"China"),
React.createElement("li",null,"Japan"),
React.createElement("li",null,"Korea")
);

这个时候上述的方法只是一个虚拟的dom，怎么吧这个虚拟的Dom渲染到真实的Dom上，我们需要调用render这个方法，这个方法里面有三个参数（element,container,callback）

参数element是我们使用createElement()方法创建的React元素，注意，不是HTML元素！

参数container是真实DOM中的HTML元素，作为渲染的目标容器，它的内容将被render()方法的执行改变。

callback参数是可选的函数，当渲染完成或更新后被执行，通常我们不用它。(这个方法一般我们不会调用)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Hello React!</title>
	<!--1.引入React库-->
	<script src="js/react.min.js"></script>
	<style>
		p{font:italic bold 50px verdana;}
	</style>
</head>
<body>
	<!--2.在真实DOM上定义容器-->
	<div id="content"></div>
	<script>
		// 第一个参数就是普通的html元素，也可以是React组件。第二个参数可以是json数据，第三个参数就是这个元素的子元素
		//var el2 = React.createElement("p",null,"HELLO FXR");
		//3.在虚拟DOM上创建p元素
		//var el = React.createElement("p",null,"Hello React!");
		var el2 = React.createElement(
			"table",
			null,
			React.createElement("tr",null,"ID"),
			
			React.createElement("tr",null,"NAME"),
			
			React.createElement("tr",null,"SEX"),
			React.createElement("br",null,""),
			React.createElement("tr",null,"1"),
			React.createElement("tr",null,"airycode"),
			React.createElement("tr",null,"男")
		);
		//4.将虚拟DOM上的p元素渲染到真实DOM上的#content容器
		//React.render(el,document.querySelector("#content"));
		React.render(el2,document.querySelector("#content"));
	</script>
</body>
</html>