1.個(gè)人理解react就像.net mvc里的view，但實(shí)則不是。又有點(diǎn)像component開發(fā)左医，就是把任何控件都寫成一個(gè)component奴紧，一個(gè)頁(yè)面組裝多個(gè)控件特姐，就像angularjs1里的directive。
2.React引入了一個(gè)虛擬dom（virtual dom）的概念黍氮，即用js實(shí)現(xiàn)了一套dom api唐含。當(dāng)界面有變化時(shí)浅浮，react重構(gòu)dom樹，與上一次的dom樹進(jìn)行比較捷枯，然后只刷新變化的部分滚秩。最重要的一點(diǎn)是它可以批處理變化，個(gè)人理解起來(lái)就是你對(duì)某個(gè)元素做了n次操作淮捆，它會(huì)合并到最后一次郁油。打個(gè)比方，某個(gè)元素的值是1攀痊，你先后改它為2桐腌，4，5苟径，8案站。按常理來(lái)說(shuō)這個(gè)元素做了4次的更改，dom也得更新4次涩笤，但react可以把這些改變合并起來(lái)嚼吞，只認(rèn)為它從1直接變成了8。再則蹬碧，虛擬dom是內(nèi)存數(shù)據(jù)操作舱禽，所以性能還是很高的，并且操作的也只是變化的部分恩沽，就更一步提高了性能誊稚。
3.在react中，我們按照UI模塊來(lái)劃分成各自不同且獨(dú)立的組件罗心。而每個(gè)組件都應(yīng)該具備3個(gè)特征：
1）可重用：就是組件可復(fù)用里伯。
2）可組合：大家可以用不同組件組合成不同新的組件〔趁疲可嵌套
3）可維護(hù)：每個(gè)組件因?yàn)槭仟?dú)立的疾瓮，都有各自的邏輯，所以每次只需要改自己內(nèi)部?jī)?nèi)容就可以了飒箭。
4.React 可以引用react后用純js編寫狼电，因?yàn)闉g覽器可以直接解析。但一般來(lái)說(shuō)還是要再引入一個(gè)JSX弦蹂。個(gè)人理解這個(gè)JSX就是個(gè)編譯轉(zhuǎn)換用的肩碟，把react的語(yǔ)法轉(zhuǎn)換成瀏覽器可直接解析的js。
5.基礎(chǔ)語(yǔ)法：
1）最簡(jiǎn)單的React.render凸椿，把render里的模版輸出到html里的dom里削祈。注意：react不依賴于jquery，雖然可以用jquery，但render的第二個(gè)參數(shù)必須用js原生的髓抑。如：
React.render(<h1>Hello World</h1>, document.getElementById('container'));
2）JSX的語(yǔ)法有個(gè)很特殊的地方咙崎，就是不加引號(hào)。允許html和js進(jìn)行混寫启昧。
var names = ['Jack', 'Tom', 'Alice'];
?React.render(<div>{names.map(function(name) {return Hello,{name}!})}</div>,?document.getElementById('container'));
3) JSX允許在模版里直接插入變量叙凡，包括數(shù)組。如果是數(shù)組密末，會(huì)自動(dòng)展開。
6.1組件屬性
React.createClass方法用于生成一個(gè)組件類:
var Greet = React.createClass({render: function(){ return <h1>Hello, {this.props.name}</h1>}});
React.render(<Greet name="Jack">,document.getElementById('container'));
注意：1）創(chuàng)建的組件首字母必須大寫
2）為元素添加css的class時(shí)跛璧，要用className
3）組件的style也要用雙大括號(hào)严里，如style={{width: this.state.width}}
4）變量都用{}包裹，不是雙引號(hào)追城。
6.2組件狀態(tài)
組件之間要相互互動(dòng)刹碾，我們可把組件看作一個(gè)狀態(tài)機(jī)，最開始有個(gè)初始值座柱，然后互動(dòng)改變狀態(tài)值迷帜，從而重新渲染UI。例子：
var InputState = React.createClass({ getInitialState: function(){ return {enable = false}},
handleClick: function(event){ this.setState({enable: !this.state.enable})},
render: function(){ return <p><input type="text" disabled={this.state.enable}></input>
<button onClick={this.handleClick}>Change State</button></p>}})
解讀：getInitialState是組件初始化的時(shí)候自動(dòng)執(zhí)行色洞，必須返回null或一個(gè)對(duì)象值戏锹。方法里的enable是自己取名的。在handleClick里火诸，通過(guò)this.state.屬性名來(lái)訪問屬性值锦针，這里我們把input的disabled與enable進(jìn)行綁定。
原理：用戶點(diǎn)擊組件置蜀，導(dǎo)致狀態(tài)改變奈搜，每次修改后，就會(huì)重新自動(dòng)調(diào)用render方法
6.3 組件的生命周期
生命周期分為3個(gè)狀態(tài)：
Mounting: 已插入真實(shí)DOM
Updating:正在被重新渲染盯荤。
unmounting:被移出真實(shí)DOM
React為每個(gè)狀態(tài)提供了兩種處理函數(shù)馋吗，will函數(shù)在進(jìn)入狀態(tài)之前調(diào)用，did函數(shù)在進(jìn)入狀態(tài)之后調(diào)用秋秤，三種狀態(tài)共計(jì)五種處理函數(shù)宏粤，即：
componentWillMount()
componentDidMount()
componentWillUpdate(object?nextProps,?object?nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
此外，React還提供兩種特殊狀態(tài)的處理函數(shù):
componentWillReceiveProps(object?nextProps) 已加載組件收到新參數(shù)時(shí)調(diào)用
shouldComponentUpdate(object?nextProps,?object?nextState)組件判斷是否重新渲染時(shí)調(diào)用
6.4組件的嵌套
var Search = React.createClass({ render:function(){return <div>{this.props.searchType}:<input type="text"></input><button>Search</button></div>}})
var Page = React.createClass({ render: function(){return <div><h1>Hello</h1> <Search searchType="Title" /> <Search searchType="Content" /></div> }})
React.render(<Page/>,document.getElementById('container'));
