背景
Facebook 為了開發(fā)一套更好更適合自己的JavaScript MVC 框架，所以產生了react幔嗦。后來反響很好,所以于2013年5月開源蛆楞。
<!DOCTYPE html>
<html>
<head>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.min.js"></script>
</head>
<body>
<div id="box"></div>
<script type="text/babel">
// 此處script為解決與js語法不兼容問題为严，必須要加上type="text/babel"
//
</script>
</body>
</html>
1. react三個基本庫
- react.js: React核心庫
- react-dom.js: 提供與DOM相關的功能
- browser.min.js: 把JXS語法轉化為javascript語法
react之'Hello World':
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('box')
);
ReactDOM.render方法為輸出HTML方法逛漫，是react最基本的方法，將輸入的內容插入制定的DOM中
2. JXS語法
在react中锤灿，遇到'<'則按照html語法執(zhí)行挽拔，遇到'{'則按照js語法執(zhí)行，JXS語法允許在模版中插入變量
var str = 'a';
ReactDOM.render(
<h1>{str}</h1>,
document.getElementById('box')
);
//頁面則輸出a但校。
如果變量為數組螃诅，則展開數組所有成員
var arr = [
<h1>Hello One!</h1>,
<h2>Hello Two</h2>
]
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('box')
);
//頁面直接輸出<h1>和</h2>
3. 組件
生成組件方法
//組件名稱統(tǒng)一標準，開頭字母大寫状囱，采用駝峰命名法
//React.creatClass為生成組件的方法,很少出現'定義組件'這個詞
//HelloWorld為組件類
//當調用組件术裸，模版插入<HelloWorld />類時，會自動生成一個HelloWorld的實例子
var HelloWorld = React.creatClass({
reder: function () {
return {
//this.props為一個對象亭枷，組件的屬性可以在生成組件的內部通過this.props 獲取
<h1>{this.prpos.name}</h1>
}
}
});
//組件調用
ReactDOM.render(
<HelloWorld name="HelloWorld" />,
document.getElementById('box')
);
組件為虛擬DOM,這也是react的基本核心思想,通過組件的狀態(tài)改變來驅動,當狀態(tài)改變時,只更新DOM,不重新渲染整個頁面,這也是和傳統(tǒng)js渲染整個頁面最本質的區(qū)別和優(yōu)點袭艺，即計算出當前虛擬DOM和狀態(tài)改變后虛擬DOM的差異,只改變差異部分，提供性能叨粘。
組件的生命周期
1.實例化
由于react的思想是組件的組合, 同一個實例第一次創(chuàng)建時猾编，會執(zhí)行以下方法
- getDefaultProps
- getInitialState
- conponentWillMount
- render
- conponentDidMount
getDefaultProps方法
給是實例子設置默認的props值瘤睹，一般為不可改變的值,另外也是對于父組件沒有傳遞的屬性，這個方法返回該實例自己使用的默認props值答倡，該方法只會被調用一次.
當該組件類第二次及后續(xù)所有的應用默蚌，getDefaultProps方法已經不存在，不會被調用,只執(zhí)行下面四種方法
- getInitialState
- conponentWillMount
- render
- conponentDidMount
getInitialState方法
在初始化每個實例的時候都會被調用苇羡，并且只調用一次，用來生成默認的狀態(tài)屬性值鼻弧。
conponentWillMount方法
在每次渲染前被調用设江，此時還可以修改state的值，等到render方法執(zhí)行時就state就不可改變了攘轩。
reder方法
render會創(chuàng)建一個虛擬DOM,來表示組件輸出叉存。對組件來說是唯一必須的方法,并需要滿足下面幾點條件：
- 只能通過this.props和this.state訪問數據
- 可以返回null、false度帮、或組件
- 只能出現一個頂級組件,不能返回一組元素,可用div包裹一層或是用組件包裹
- 不可改變組件的狀態(tài)歼捏，或者DOM輸出,組件狀態(tài)只能在setState函數中修改
componentDidMount方法
在render方法調用并且DOM已經被渲染后，可以在componentDidMount方法內部通過this.getDOMNode()方法訪問笨篷。
2.存在期
到這時,組件已經渲染完成瞳秽，并且用戶可以進行操作與組件進行交互，比如表單的change事件率翅，react通過判斷組件的狀態(tài)的改變來作出響應更新DOM
var Input = React.createClass({
//設置默認state,確定視圖狀態(tài),一般處理數據的簡單變化,長用于表單
getInitialState: function () {
return {
val: 'Hello World'
};
},
changeInputVal: function (event) {
this.setState({
value: event.target.value
});
},
render: function () {
var val = this.state.val;
return (
<input type="text" value={value}
onChange={this.changeInputVal}/
);
}
});
ReactDOM.render(
<div>
<Input/>
//p的innerHTML值就會根據value的改變來更新DOM
<p>{this.state.value}</p>
</div>
document.getElementById('box')
);
當input的value變化的時候练俐，就會觸發(fā)changeInputVal事件，通過setState來改變value的狀態(tài)值來更新DOM冕臭。
3. 銷毀和清理期
當react使用完一個組件腺晾，這個組件就會從DOM中卸載并被銷毀，componentWillUnMount方法就會作出響應辜贵，完成清理工作悯蝉，隨后移除頂級結構。
注：react數據流向為單向傳遞托慨，父級組件傳遞給子組件鼻由，通過this.props在子組件中獲取。復合組件使用的總結后續(xù)完成發(fā)出榴芳，今天由于時間關系還有bug需要改嗡靡，先總結這些基礎知識,demo暫時也不先做了。學習資料是結合阮一峰react教程,react中文網及react書籍窟感。
