一盒刚、React介紹
1.React的起源與發(fā)展
React 起源于 Facebook 的內(nèi)部項目腺劣，因為該公司對市場上所有 JavaScript MVC 框架，都不滿意因块，就決定自己寫一套橘原，用來架設(shè) Instagram 的網(wǎng)站。
做出來以后涡上，發(fā)現(xiàn)這套東西很好用趾断，就在2013年5月開源了。
由于 React 的設(shè)計思想極其獨特吩愧，屬于革命性創(chuàng)新芋酌，性能出眾，代碼邏輯卻非常簡單耻警。所以隔嫡，越來越多的人開始關(guān)注和使用甸怕，認(rèn)為它可能是將來 Web 開發(fā)的主流工具甘穿。
2 .React的特點
只作為 UI（Just the UI）：React 不是一個完整的 MVC 框架，最多是作為視圖（View）在 MVC 中使用梢杭。（甚至 React 并不非常認(rèn)可 MVC 開發(fā)模式温兼。它提出的是一個新的開發(fā)模式和理念，強調(diào)的是“用戶界面”武契。React 希望將功能分解化募判，讓開發(fā)變得像搭積木一樣，快速且可維護(hù)咒唆。）
虛擬 DMO 機制（Virtual DOM）：這是 React 的一個亮點届垫，可以很好地優(yōu)化視圖的渲染和刷新。過去我們更新視圖是全释，需要先清空 DOM 容器里的內(nèi)容装处，然后將最新的 DOM 和數(shù)據(jù)追加到容器中。而 React 將這一操作放進(jìn)了內(nèi)存浸船。通過將視圖變化放進(jìn)內(nèi)存進(jìn)行比較（虛擬 DOM 比較）妄迁，計算出最小更新的視圖，然后將差異部分進(jìn)行更新以完成整個組件的渲染李命。這正是React 如此高效的原因登淘。
數(shù)據(jù)流（Data Flow）：React 實現(xiàn)了單向的數(shù)據(jù)流，并且對于傳統(tǒng)的數(shù)據(jù)綁定而言封字，React 更加靈活黔州、便捷耍鬓。
3，網(wǎng)站地址
- 官網(wǎng)地址：https://facebook.github.io/react/
- GitHub地址：https://github.com/facebook/react
二流妻、準(zhǔn)備工作
在使用 ReactJS 進(jìn)行開發(fā)前界斜，我們需要準(zhǔn)備好這三個 js 文件：react.js、react-dom.js合冀、browser.js各薇。下面分別對它們進(jìn)行介紹。
1. react.js 和 react-dom.js
前者是 React 主要核心君躺，后者負(fù)責(zé) React DOM 操作峭判。可以訪問下面地址下載最新版本：
https://github.com/facebook/react/releases
2. browser.js
實現(xiàn)瀏覽器端對 JSX 的編譯棕叫。（在 react 0.14 前林螃，使用 jsxtransformer.js，后改為 browser.js）
由于 browser.js 非常大俺泣，我們開發(fā)測試可以引用如下地址：
https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js
這種運行時解析轉(zhuǎn)換 JSX 建議只在開發(fā)測試時使用疗认。生產(chǎn)環(huán)境下可以借助編譯工具（babel）事先將 JSX 編譯成 JS。這樣代碼經(jīng)過預(yù)編譯伏钠、壓縮和合并后横漏，會提高網(wǎng)絡(luò)的加載速度，減少流量帶寬的浪費熟掂，優(yōu)化用戶體驗缎浇。
三、使用樣例
1. 簡單組件和數(shù)據(jù)傳遞
我們可以使用 this.props 來做簡單的數(shù)據(jù)傳遞赴肚。
（1）樣例說明
定義了一個組件 HelloMessage素跺。通過傳入的 name 屬性，用于 h1 標(biāo)簽渲染誉券。
使用 ReactDOM.render 方法將組件渲染到 id 為 example 的 div 內(nèi)指厌。
<html>
<head lang="en">
<meta charset="UTF-8">
<title>簡書</title>
<script src="https://cdn.bootcss.com/react/15.6.1/react.js"></script>
<script src="https://cdn.bootcss.com/react/15.6.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
</head>
<body>
<div id="example">
</div>
<script type="text/babel">
var HelloMessage = React.createClass({
render: function() {
return<h1>歡迎訪問 {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="jianshu.com" />,
document.getElementById('example'));
</script>
</body>
</html>
（2）運行效果
（3）使用 Chrome 調(diào)試工具可以看到渲染后內(nèi)文檔內(nèi)容如下。
2. 通過this.state更新視圖
（1）樣例說明
- getInitialState：設(shè)置組件的初始狀態(tài)踊跟，必須返回一個對象或 null 對象踩验。我們可以在此準(zhǔn)備組件需要的數(shù)據(jù)以及后期需要更新的數(shù)據(jù)模型。
- componentDidMount：組件加載完成時調(diào)用琴锭。這里我們創(chuàng)建一個定時器晰甚，定時改變 this.state 里的數(shù)據(jù)。
- render：該方法用來渲染視圖决帖。this.state 發(fā)生改變時厕九，該方法會自動調(diào)用。
- componentWillUnmount：組件被卸載時調(diào)用地回。我們在這里清除定時器 this.interval扁远。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>簡書</title>
<script src="https://cdn.bootcss.com/react/15.6.1/react.js"></script>
<script src="https://cdn.bootcss.com/react/15.6.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Timer = React.createClass({
/*初始狀態(tài)*/
getInitialState: function() {
return {secondsElapsed: 0};
},
tick: function() {
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
},
/*組件完成加載*/
componentDidMount: function() {
this.interval = setInterval(this.tick, 1000);
},
/*組件將被卸載*/
componentWillUnmount: function() {
clearInterval(this.interval);
},
render: function() {
return (
<div>現(xiàn)在已經(jīng)過去了: {this.state.secondsElapsed}秒</div>
);
}
});
ReactDOM.render(<Timer />, document.getElementById('example'));
</script>
</body>
</html>
（2）運行效果俊鱼。每隔一秒鐘，secondsElapsed 就會加 1畅买。同時頁面也會自動刷新并闲。
3，稍微復(fù)雜一點樣例
（1）樣例說明
- 我們在 textarea 上綁定了 onChange 的事件監(jiān)聽谷羞，目的是通過 setState 改變this.state.value帝火。
- 同時 textarea 上添加了 ref 屬性，這樣就可以通過 this.refs.testarea 引用這個 textarea 對象了湃缎。
- 通過 ReactDOM 提供的 findDOMNode 方法犀填，可以找到 React 的 DOM。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>簡書</title>
<script src="https://cdn.bootcss.com/react/15.6.1/react.js"></script>
<script src="https://cdn.bootcss.com/react/15.6.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var ShowEditor = React.createClass({
getInitialState: function() {
return {value: '在這里輸入文字'};
},
handleChange: function() {
this.setState({value: ReactDOM.findDOMNode(this.refs.textarea).value});
},
render: function() {
return (
<div>
<h3>輸入：</h3>
<textarea style={{width:300, height:150, outline:'none'}}
onChange={this.handleChange}
ref="textarea"
defaultValue={this.state.value} />
<h3>輸出:</h3>
<div>
{this.state.value}
</div>
</div>
);
}
});
ReactDOM.render(<ShowEditor />, document.getElementById('example'));
</script>
</body>
</html>
（2）運行效果嗓违。在上方的 textarea 中輸入內(nèi)容后九巡，下方的 div 中會同步顯示出輸入的內(nèi)容文字。
