一、React的發展 facebook在構建instagram網站的時候遇見兩個問題： 1、數據綁定的時候，大量操作真實dom，性能成本太高 2、網站的數據流向太混亂，不好控制 於是facebook起初調研過市場上已存的mvc框架，發現都不太滿意，於是就推陳出新，開發了react框架，併在2013年 ...
一、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中也可以寫入邏輯判斷。
不足之處，望大神多多評論指教！
