一、React簡(jiǎn)介
React 起源于 Facebook 的內(nèi)部項(xiàng)目，因?yàn)樵摴緦?duì)市場(chǎng)上所有 JavaScript MVC 框架晶框，都不滿意闰蚕，就決定自己寫一套栈拖，用來架設(shè) Instagram 的網(wǎng)站。做出來以后陪腌，發(fā)現(xiàn)這套東西很好用辱魁，就在2013年5月開源了。由于 React 的設(shè)計(jì)思想極其獨(dú)特诗鸭，屬于革命性創(chuàng)新染簇，性能出眾，代碼邏輯卻非常簡(jiǎn)單强岸。所以锻弓，越來越多的人開始關(guān)注和使用，認(rèn)為它可能是將來 Web 開發(fā)的主流工具蝌箍。
React官網(wǎng)地址：http://facebook.github.io/react/
Github地址：https://github.com/facebook/react
二青灼、對(duì)React的認(rèn)識(shí)及React的優(yōu)點(diǎn)
React不是一個(gè)完整的MVC框架，最多可以認(rèn)為是MVC中的V(View)妓盲，React并不非常認(rèn)可MVC開發(fā)模式杂拨；
React不是一個(gè)新的模板語(yǔ)言，JSX只是一個(gè)表象悯衬，沒有JSX的React也能工作弹沽。
React是建立在其生態(tài)圈之上的，學(xué)習(xí)React需要學(xué)習(xí)一整套技術(shù)棧。
ES6 語(yǔ)法
Babel
React
Webpack
React 項(xiàng)目腳手架
CSS Modules
React-Router
Redux 架構(gòu)
React 單元測(cè)試
1策橘、React的背景和原理
在Web開發(fā)中炸渡，我們總需要將變化的數(shù)據(jù)實(shí)時(shí)反應(yīng)到UI上，這時(shí)就需要對(duì)DOM進(jìn)行操作丽已。而復(fù)雜或頻繁的DOM操作通常是性能瓶頸產(chǎn)生的原因腌歉。React為此引入了虛擬DOM（Virtual DOM）的機(jī)制：在瀏覽器端用Javascript實(shí)現(xiàn)了一套DOM API瓶盛。
基于React進(jìn)行開發(fā)時(shí)所有的DOM構(gòu)造都是通過虛擬DOM進(jìn)行捧毛，每當(dāng)數(shù)據(jù)變化時(shí)昔汉，React都會(huì)重新構(gòu)建整個(gè)DOM樹，然后React將當(dāng)前整個(gè)DOM樹和上一次的DOM樹進(jìn)行對(duì)比瘸味，得到DOM結(jié)構(gòu)的區(qū)別宫仗，然后僅僅將需要變化的部分進(jìn)行實(shí)際的瀏覽器DOM更新。
盡管每一次都需要構(gòu)造完整的虛擬DOM樹旁仿，但是因?yàn)樘摂MDOM是內(nèi)存數(shù)據(jù)藕夫，性能是極高的，而對(duì)實(shí)際DOM進(jìn)行操作的僅僅是Diff部分枯冈，因而能達(dá)到提高性能的目的毅贮。這樣，在保證性能的同時(shí)尘奏，開發(fā)者將不再需要關(guān)注某個(gè)數(shù)據(jù)的變化如何更新到一個(gè)或多個(gè)具體的DOM元素滩褥，而只需要關(guān)心在任意一個(gè)數(shù)據(jù)狀態(tài)下，整個(gè)界面是如何Render的炫加。
使用原生直接操作DOM時(shí)瑰煎，服務(wù)器端所要做的就是根據(jù)數(shù)據(jù)Render出HTML送到瀏覽器端。如果這時(shí)因?yàn)橛脩舻囊粋€(gè)點(diǎn)擊需要改變某個(gè)狀態(tài)文字俗孝，那么也是通過刷新整個(gè)頁(yè)面來完成的酒甸。服務(wù)器端并不需要知道是哪一小段HTML發(fā)生了變化，而只需要根據(jù)數(shù)據(jù)刷新整個(gè)頁(yè)面赋铝。換句話說插勤，任何UI的變化都是通過整體刷新來完成的。而React將這種開發(fā)模式以高性能的方式帶到了前端革骨，每做一點(diǎn)界面的更新农尖，都可以認(rèn)為刷新了整個(gè)頁(yè)面。至于如何進(jìn)行局部更新以保證性能良哲，則是React框架要完成的事情盛卡。
2、組件化
虛擬DOM(virtual-dom)不僅帶來了簡(jiǎn)單的UI開發(fā)邏輯筑凫，同時(shí)也帶來了組件化開發(fā)的思想窟扑，所謂組件喇颁，即封裝起來的具有獨(dú)立功能的UI部件。React推薦以組件的方式去重新思考UI構(gòu)成嚎货，將UI上每一個(gè)功能相對(duì)獨(dú)立的模塊定義成組件，然后將小的組件通過組合或者嵌套的方式構(gòu)成大的組件蔫浆，最終完成整體UI的構(gòu)建殖属。例如，F(xiàn)acebook的instagram.com整站都采用了React來開發(fā)瓦盛，整個(gè)頁(yè)面就是一個(gè)大的組件洗显，其中包含了嵌套的大量其它組件。
如果說MVC的思想讓你做到視圖-數(shù)據(jù)-控制器的分離原环，那么組件化的思考方式則是帶來了UI功能模塊之間的分離挠唆。
我們通過一個(gè)典型的Blog評(píng)論界面來看MVC和組件化開發(fā)思路的區(qū)別。
對(duì)于MVC開發(fā)模式來說嘱吗，開發(fā)者將三者定義成不同的類玄组，實(shí)現(xiàn)了表現(xiàn)，數(shù)據(jù)谒麦，控制的分離俄讹。開發(fā)者更多的是從技術(shù)的角度來對(duì)UI進(jìn)行拆分，實(shí)現(xiàn)松耦合绕德。
對(duì)于React而言患膛，則完全是一個(gè)新的思路，開發(fā)者從功能的角度出發(fā)耻蛇，將UI分成不同的組件踪蹬，每個(gè)組件都獨(dú)立封裝。
在React中臣咖，按照界面模塊自然劃分的方式來組織和編寫你的代碼跃捣，對(duì)于評(píng)論界面而言，整個(gè)UI是一個(gè)通過小組件構(gòu)成的大組件亡哄，每個(gè)組件只關(guān)心自己部分的邏輯枝缔，彼此獨(dú)立。
一個(gè)React組件應(yīng)該具有如下特征：
（1）可組合（Composeable）：一個(gè)組件易于和其它組件一起使用蚊惯，或者嵌套在另一個(gè)組件內(nèi)部愿卸。如果一個(gè)組件內(nèi)部創(chuàng)建了另一個(gè)組件，那么說父組件擁有（own）它創(chuàng)建的子組件截型，通過這個(gè)特性趴荸，一個(gè)復(fù)雜的UI可以拆分成多個(gè)簡(jiǎn)單的UI組件；
（2）可重用（Reusable）：每個(gè)組件都是具有獨(dú)立功能的宦焦，它可以被使用在多個(gè)UI場(chǎng)景发钝；
（3）可維護(hù)（Maintainable）：每個(gè)小的組件僅僅包含自身的邏輯顿涣，更容易被理解和維護(hù)；
三酝豪、React核心知識(shí)
純手工構(gòu)建React+Redux+Webpack腳手架
1涛碑、 HTML 模板
使用 React 的網(wǎng)頁(yè)源碼，結(jié)構(gòu)大致如下
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// ** Our code goes here! **
</script>
</body>
</html>
上面代碼有兩個(gè)地方需要注意孵淘。首先蒲障，最后一個(gè) <script> 標(biāo)簽的 type 屬性為 text/babel 。這是因?yàn)?React 獨(dú)有的 JSX 語(yǔ)法瘫证，跟 JavaScript 不兼容揉阎。凡是使用 JSX 的地方，都要加上 type="text/babel" 背捌。
其次毙籽，上面代碼一共用了三個(gè)庫(kù)： react.js 、react-dom.js 和 Browser.js 毡庆，它們必須首先加載坑赡。其中，react.js 是 React 的核心庫(kù)扭仁，react-dom.js 是提供與 DOM 相關(guān)的功能垮衷，Browser.js 的作用是將 JSX 語(yǔ)法轉(zhuǎn)為 JavaScript 語(yǔ)法，這一步很消耗時(shí)間乖坠，實(shí)際上線的時(shí)候搀突，應(yīng)該將它放到服務(wù)器完成。
2熊泵、ReactDOM.render()
ReactDOM.render 是 React 的最基本方法仰迁，用于將模板轉(zhuǎn)為 HTML 語(yǔ)言，并插入指定的 DOM 節(jié)點(diǎn)顽分。
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
上面代碼將一個(gè) h1 標(biāo)題徐许，插入 example 節(jié)點(diǎn)，運(yùn)行結(jié)果如下卒蘸。
3雌隅、JSX 語(yǔ)法
上一節(jié)的代碼， HTML 語(yǔ)言直接寫在 JavaScript 語(yǔ)言之中缸沃，不加任何引號(hào)恰起，這就是JSX 的語(yǔ)法，它允許 HTML 與 JavaScript 的混寫趾牧。
const names = ['ZS', 'LS', 'WW'];
ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
);
上面代碼體現(xiàn)了 JSX 的基本語(yǔ)法規(guī)則：遇到 HTML 標(biāo)簽（以 < 開頭）检盼，就用 HTML 規(guī)則解析；遇到代碼塊（以 { 開頭）翘单，就用 JavaScript 規(guī)則解析吨枉。上面代碼的運(yùn)行結(jié)果如下蹦渣。
JSX 允許直接在模板插入 JavaScript 變量。如果這個(gè)變量是一個(gè)數(shù)組貌亭，則會(huì)展開這個(gè)數(shù)組的所有成員
var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
上面代碼的arr變量是一個(gè)數(shù)組柬唯，結(jié)果 JSX 會(huì)把它的所有成員，添加到模板圃庭，運(yùn)行結(jié)果如下权逗。
4、組件
React 允許將代碼封裝成組件（component）冤议，然后像插入普通 HTML 標(biāo)簽一樣，在網(wǎng)頁(yè)中插入這個(gè)組件师坎。React.createClass 方法就用于生成一個(gè)組件類恕酸。
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="John" />,
document.getElementById('example')
);
上面代碼中，變量 HelloMessage 就是一個(gè)組件類胯陋。模板插入 <HelloMessage /> 時(shí)蕊温，會(huì)自動(dòng)生成 HelloMessage 的一個(gè)實(shí)例。所有組件類都必須有自己的 render 方法遏乔，用于輸出組件义矛。
注意，組件類的第一個(gè)字母必須大寫盟萨，否則會(huì)報(bào)錯(cuò)凉翻，比如HelloMessage不能寫成helloMessage。另外捻激，組件類只能包含一個(gè)頂層標(biāo)簽制轰，否則也會(huì)報(bào)錯(cuò)。
var HelloMessage = React.createClass({
render: function() {
return <h1>
Hello {this.props.name}
</h1><p>
some text
</p>;
}
})
上面代碼會(huì)報(bào)錯(cuò)胞谭，因?yàn)镠elloMessage組件包含了兩個(gè)頂層標(biāo)簽：h1和p垃杖。
組件的用法與原生的 HTML 標(biāo)簽完全一致，可以任意加入屬性丈屹，比如 <HelloMessage name="John"> 调俘，就是 HelloMessage 組件加入一個(gè) name 屬性，值為 John旺垒。組件的屬性可以在組件類的 this.props 對(duì)象上獲取彩库，比如 name 屬性就可以通過 this.props.name 讀取。上面代碼的運(yùn)行結(jié)果如下袖牙。
添加組件屬性時(shí)侧巨，需要注意的是 class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor 鞭达，這是因?yàn)?class 和 for 是 JavaScript 的保留字司忱。
5皇忿、this.props.children
this.props.children 屬性表示組件的所有子節(jié)點(diǎn)。
var NotesList = React.createClass({
render: function() {
return (
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
})
}
</ol>
);
}
});
ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.body
);
上面代碼的 NoteList 組件有兩個(gè) span 子節(jié)點(diǎn)坦仍，它們都可以通過 this.props.children 讀取鳍烁，運(yùn)行結(jié)果如下。
6繁扎、獲取真實(shí)的DOM節(jié)點(diǎn)
組件并不是真實(shí)的 DOM 節(jié)點(diǎn)幔荒，而是存在于內(nèi)存之中的一種數(shù)據(jù)結(jié)構(gòu)，叫做虛擬 DOM （virtual DOM）梳玫。只有當(dāng)它插入文檔以后爹梁，才會(huì)變成真實(shí)的 DOM 。根據(jù) React 的設(shè)計(jì)提澎，所有的 DOM 變動(dòng)姚垃，都先在虛擬 DOM 上發(fā)生，然后再將實(shí)際發(fā)生變動(dòng)的部分盼忌，反映在真實(shí) DOM上积糯，這種算法叫做 DOM diff ，它可以極大提高網(wǎng)頁(yè)的性能表現(xiàn)谦纱。
但是看成，有時(shí)需要從組件獲取真實(shí) DOM 的節(jié)點(diǎn)，這時(shí)就要用到 ref 屬性跨嘉。
var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
上面代碼中川慌，組件 MyComponent 的子節(jié)點(diǎn)有一個(gè)文本輸入框，用于獲取用戶的輸入偿荷。這時(shí)就必須獲取真實(shí)的 DOM 節(jié)點(diǎn)窘游，虛擬 DOM 是拿不到用戶輸入的。為了做到這一點(diǎn)跳纳，文本輸入框必須有一個(gè) ref 屬性忍饰，然后 this.refs.[refName] 就會(huì)返回這個(gè)真實(shí)的 DOM 節(jié)點(diǎn)。
需要注意的是寺庄，由于 this.refs.[refName] 屬性獲取的是真實(shí) DOM 艾蓝，所以必須等到虛擬 DOM 插入文檔以后，才能使用這個(gè)屬性斗塘，否則會(huì)報(bào)錯(cuò)赢织。上面代碼中，通過為組件指定 Click 事件的回調(diào)函數(shù)馍盟，確保了只有等到真實(shí) DOM 發(fā)生 Click 事件之后于置，才會(huì)讀取 this.refs.[refName] 屬性。
7贞岭、this.state
React 的一大創(chuàng)新八毯，就是將組件看成是一個(gè)狀態(tài)機(jī)搓侄，一開始有一個(gè)初始狀態(tài)，然后用戶互動(dòng)话速，導(dǎo)致狀態(tài)變化讶踪，從而觸發(fā)重新渲染 UI 。
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
上面代碼是一個(gè) LikeButton 組件泊交，它的 getInitialState 方法用于定義初始狀態(tài)乳讥，也就是一個(gè)對(duì)象，這個(gè)對(duì)象可以通過 this.state 屬性讀取廓俭。當(dāng)用戶點(diǎn)擊組件云石，導(dǎo)致狀態(tài)變化，this.setState 方法就修改狀態(tài)值研乒，每次修改以后留晚，自動(dòng)調(diào)用 this.render 方法，再次渲染組件告嘲。
由于 this.props 和 this.state 都用于描述組件的特性，可能會(huì)產(chǎn)生混淆奖地。一個(gè)簡(jiǎn)單的區(qū)分方法是橄唬，this.props 表示那些一旦定義，就不再改變的特性参歹，而 this.state 是會(huì)隨著用戶互動(dòng)而產(chǎn)生變化的特性仰楚。
8、PropTypes
組件類的PropTypes屬性是用來驗(yàn)證組件實(shí)例的屬性是否符合要求犬庇。
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
上面的Mytitle組件有一個(gè)title屬性僧界。PropTypes 告訴 React，這個(gè) title 屬性是必須的臭挽，而且它的值必須是字符串∥娼螅現(xiàn)在，我們?cè)O(shè)置 title 屬性的值是一個(gè)數(shù)值欢峰。
var data = 123;
ReactDOM.render(
<MyTitle title={data} />,
document.body
);
這樣一來葬荷，title屬性就通不過驗(yàn)證了∨μ控制臺(tái)會(huì)顯示一行錯(cuò)誤信息宠漩。
Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.
9、表單
用戶在表單填入的內(nèi)容懊直，屬于用戶跟組件的互動(dòng)扒吁，所以不能用 this.props 讀取。
var Input = React.createClass({
getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function () {
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange} />
<p>{value}</p>
</div>
);
}
});
ReactDOM.render(<Input/>, document.body);
上面代碼中室囊，文本輸入框的值雕崩，不能用 this.props.value 讀取魁索，而要定義一個(gè) onChange 事件的回調(diào)函數(shù)，通過 event.target.value 讀取用戶輸入的值晨逝。textarea 元素蛾默、select元素、radio元素都屬于這種情況捉貌。
10支鸡、組件的生命周期
組件的生命周期分成三個(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)用
例子
var Hello = React.createClass({
getInitialState: function () {
return {
opacity: 1.0
};
},
componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 100);
},
render: function () {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
});
ReactDOM.render(
<Hello name="world"/>,
document.body
);
上面代碼在hello組件加載以后，通過 componentDidMount 方法設(shè)置一個(gè)定時(shí)器刨摩，每隔100毫秒寺晌，就重新設(shè)置組件的透明度，從而引發(fā)重新渲染澡刹。
另外呻征，組件的style屬性的設(shè)置方式也值得注意，不能寫成
style="opacity:{this.state.opacity};"
而要寫成
style={{opacity: this.state.opacity}}
這是因?yàn)镽eact 組件樣式是一個(gè)對(duì)象罢浇，所以第一重大括號(hào)表示這是 JavaScript 語(yǔ)法陆赋，第二重大括號(hào)表示樣式對(duì)象。
