SPA與react組件

一、react的基本概念

1.單頁模型（SPA）

只有一張Web頁面的應用，是一種從Web服務器加載的富客戶端，單頁面跳轉僅刷新局部資源 ，公共資源(js、css等)僅需加載一次，常用於PC端官網、購物等網站

單頁面應用和多頁面應用

2.SPA的挑戰

（1）如何保持數據與UI同步更新
（2）如何提高DOM操作的效率
（3）使用HTML開發UI 界面異常複雜

3.react解決SPA開發問題

（1）自動化的UI管理

界面與數據的變化顯示同步，可以將數據的變化轉換爲界面的變化

（2）更高效的DOM操作

先對虛擬DOM進行操作，將變更的操作存儲到內存，在合適的時候與真實DOM進行對比，將變化的地方更新出來。

（3）UI的組件化設計

可重用的UI組件，將小的UI組件組合起來，形成大的界面。

（4）依賴JS開發UI界面

直接使用JS定製界面，以下內容都在<script>標籤中，用JSX語法結構定義界面。

//JSX
ReactDOM.render (
	<div>
		<h1>Batman</h1>
		<h1>Iron Man</h1>
	</div>,										
	destination
);

上述代碼中<div>標籤中定義的部分不是HTML，而是JSX定義的界面，react會將這段代碼解讀成JSX。

//解讀JSX
ReactDOM.render (React.createElement (
	"div",
	null,
	React.createElement (
		"h1",
		null,
		"Batman"
	),
	React.createElement (
		"h1",
		null,
		"Iron Man"
	),
), destination);

添加CSS樣式的方法

var ItemDisplay = React.createClass (
	{
		render: function() {
			var divStyle = {
				width:250,
				backgroundColor: "black",
				padding: 40,
				color: "#999"
			};								//使用JSON定義樣式
		return {
			<div style={divStyle}>		//將樣式添加到元素上
				<ItemDisplay/>				//展示這個組件
			</div>
			);
	}

（5）react是MVC中的V

將數據和UI進行結合，有足夠自由度去處理M和C降低了數據的整合難度。