首页 > 代码库 > React复习小结(一)

React复习小结(一)

一、React的发展

facebook在构建instagram网站的时候遇见两个问题:

1、数据绑定的时候,大量操作真实dom,性能成本太高

2、网站的数据流向太混乱,不好控制

于是facebook起初调研过市场上已存的mvc框架,发现都不太满意,于是就推陈出新,开发了react框架,并在2013年五月份开源。

二、React概述

和angularJS一样react核心解决的问题是数据绑定,开发者只要将数据绑定好,剩下的开发中只要关注业务就行了

1、组件化开发 使用react开发的时候,构建任何的页面都是组件component

2、jsx语法和虚拟dom基于jsx语法进行 创建组件,react用变量的形式自定义了一套dom模型

3、组件具有生命周期 每个组件都有生命周期,开发者可以基于生命周期对组件进行管理

4、单向数据流

需要在head引入Js文件。

<script src="react.min.js" type="text/javascript" charset="utf-8"></script>//react.min.js--把react的核心方法/事件机制封装其中
<script src="react-dom.min.js" type="text/javascript" charset="utf-8"></script>//react-dom.min.js--把虚拟dom转换成真实dom的方法
<script src="browser.min.js" type="text/javascript" charset="utf-8"></script>//browser.min.js--把jsx语法/babel格式转成浏览器可识别的语法(本地文件不生效的时候,选择官网cdn引入)

 三、React组件书写中需要注意的事项

<body>
	<!--存放组件的容器-->
	<div id="out"></div>	
</body>
<script type="text/babel">
	var sty1={
		aa:{color:‘#ccc‘,fontSize:‘30px‘},
		bb:{color:‘yellow‘},
		tap1:function(){
			alert(111)
		}
	}
//	创建组件
	var Demo=React.createClass({
		tap:function(){
			alert(‘事件机制‘)
		},
		render:function(){
			var sty={color:‘green‘,background:‘pink‘}
			var _this=this;
			var b=2;
			var zz;
			if(b>10){
				zz={color:‘red‘}
			}else{
				zz={color:‘blue‘}
			}	
			return(
				<div>
					<h1 id="h1" name="hhh">初次接触react组件</h1>
					<h2 className="h2">hello world</h2>
					<h2 style={sty}>行间样式设置</h2>
					<p style={sty1.aa}>全局样式111</p>
					<p style={sty1.bb}>全局样式222</p>
					<p style={_this.sty2.cc}>原型样式111</p>
					<p style={_this.sty2.dd}>原型样式222</p>
					<button onClick={this.tap}>事件机制</button>
					<button onClick={sty1.tap1}>事件机制全局</button>
					<button onClick={_this.sty2.tap2}>事件机制原型</button>
					<h1 style={zz}>render内写入逻辑</h1>
				</div>
			)
		}
	})
	//原型样式写法
	Demo.prototype.sty2={
		cc:{‘color‘:‘firebrick‘},
		dd:{color:‘gold‘},
		tap2:function(){
			alert(2222)
		}
	}	
	//渲染
	ReactDOM.render(<Demo/>,document.getElementById(‘out‘));
</script>
  1. 创建组件  首字母必须大写

    React对象提供的createClass ({
    render函数--主要创建组件的函数
    返回的jsx语法 return(xml标签)--只能返回一个xml标签
    })

  2. 渲染     ReactDOM.render  (组件名---<组件名/>,真实dom容器)
  3. React JSX中的注释很有意思,也很特别。{/*要注释的内容*/}

      4. CSS样式写法  第一种方法:#id  name属性直接可用  Class类名  需要使用className属性设置 

                             第二种方法:行间样式 style={json 对象} --这也是FaceBook主张的样式设置

                             第三种方法:全局样式 

                             第四种方法:原型样式    组件内部通过this调用原型设置的样式      var _this=this;

                                              注:原型样式设置的位置---(组件创建--组件渲染之间)

      5.React中的事件机制  第一种:创建组件时设置  第二种:全局样式中设置  第三种:原型样式中设置函数

      6.runder中也可以写入逻辑判断。

不足之处,望大神多多评论指教!

React复习小结(一)