zoukankan      html  css  js  c++  java
  • 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树:

    1. var el = React.createElement(
    2. "ul",
    3. null,
    4. React.createElement("li",null,"China"),
    5. React.createElement("li",null,"Japan"),
    6. React.createElement("li",null,"Korea")
    7. );

    这个时候上述的方法只是一个虚拟的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>
    

      

  • 相关阅读:
    [2016北京集训试题15]项链-[FFT]
    [agc008E]Next or Nextnext-[dp+思考题]
    [agc011E]Increasing Numbers-[思考题]
    [2016北京集训试题14]股神小D-[LCT]
    [2016北京集训试题6]mushroom-[bitset]
    [2016北京集训试题6]魔法游戏-[博弈论-sg函数]
    [arc081F]Flip and Rectangles-[黑白染色]
    [arc072F]Dam-[单调队列]
    【CF787D】遗产(Legacy)-线段树-优化Dijkstra(内含数据生成器)
    【CF373C】计算袋鼠是愉快的(Counting Kangaroos is Fun)-贪心
  • 原文地址:https://www.cnblogs.com/airycode/p/5738766.html
Copyright © 2011-2022 走看看