首页 > 代码库 > 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>
- 创建组件 首字母必须大写
React对象提供的createClass （｛
render函数－－主要创建组件的函数
返回的jsx语法 return（xml标签）--只能返回一个xml标签
｝） - 渲染 ReactDOM.render （组件名－－－<组件名/>，真实dom容器）
- React JSX中的注释很有意思，也很特别。{/*要注释的内容*/}
4. CSS样式写法 第一种方法：#id name属性直接可用 Class类名 需要使用className属性设置
第二种方法：行间样式 style={json 对象} --这也是FaceBook主张的样式设置
第三种方法：全局样式
第四种方法：原型样式 组件内部通过this调用原型设置的样式 var _this=this;
注：原型样式设置的位置－－－（组件创建－－组件渲染之间）
5.React中的事件机制 第一种：创建组件时设置 第二种：全局样式中设置 第三种：原型样式中设置函数
6.runder中也可以写入逻辑判断。
不足之处，望大神多多评论指教！
React复习小结（一）