一、React介紹
1.React的起源與發展
React 起源于 Facebook 的內部項目，因為該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設 Instagram 的網站。
做出來以后，發現這套東西很好用，就在2013年5月開源了。
由于 React 的設計思想極其獨特，屬于革命性創新，性能出眾，代碼邏輯卻非常簡單。所以，越來越多的人開始關注和使用，認為它可能是將來 Web 開發的主流工具。
2 .React的特點
只作為 UI（Just the UI）：React 不是一個完整的 MVC 框架，最多是作為視圖（View）在 MVC 中使用。（甚至 React 并不非常認可 MVC 開發模式。它提出的是一個新的開發模式和理念，強調的是“用戶界面”。React 希望將功能分解化，讓開發變得像搭積木一樣，快速且可維護。）
虛擬 DMO 機制（Virtual DOM）：這是 React 的一個亮點，可以很好地優化視圖的渲染和刷新。過去我們更新視圖是，需要先清空 DOM 容器里的內容，然后將最新的 DOM 和數據追加到容器中。而 React 將這一操作放進了內存。通過將視圖變化放進內存進行比較（虛擬 DOM 比較），計算出最小更新的視圖，然后將差異部分進行更新以完成整個組件的渲染。這正是React 如此高效的原因。
數據流（Data Flow）：React 實現了單向的數據流，并且對于傳統的數據綁定而言，React 更加靈活、便捷。
3，網站地址
二、準備工作
在使用 ReactJS 進行開發前，我們需要準備好這三個 js 文件：react.js、react-dom.js、browser.js。下面分別對它們進行介紹。
1. react.js 和 react-dom.js
前者是 React 主要核心，后者負責 React DOM 操作。可以訪問下面地址下載最新版本：
https://github.com/facebook/react/releases
2. browser.js
實現瀏覽器端對 JSX 的編譯。（在 react 0.14 前，使用 jsxtransformer.js，后改為 browser.js）
由于 browser.js 非常大，我們開發測試可以引用如下地址：
https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js
這種運行時解析轉換 JSX 建議只在開發測試時使用。生產環境下可以借助編譯工具（babel）事先將 JSX 編譯成 JS。這樣代碼經過預編譯、壓縮和合并后，會提高網絡的加載速度，減少流量帶寬的浪費，優化用戶體驗。
三、使用樣例
1. 簡單組件和數據傳遞
我們可以使用 this.props 來做簡單的數據傳遞。
（1）樣例說明
定義了一個組件 HelloMessage。通過傳入的 name 屬性，用于 h1 標簽渲染。
使用 ReactDOM.render 方法將組件渲染到 id 為 example 的 div 內。
<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 調試工具可以看到渲染后內文檔內容如下。
2. 通過this.state更新視圖
（1）樣例說明
- getInitialState：設置組件的初始狀態，必須返回一個對象或 null 對象。我們可以在此準備組件需要的數據以及后期需要更新的數據模型。
- componentDidMount：組件加載完成時調用。這里我們創建一個定時器，定時改變 this.state 里的數據。
- render：該方法用來渲染視圖。this.state 發生改變時，該方法會自動調用。
- componentWillUnmount：組件被卸載時調用。我們在這里清除定時器 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({
/*初始狀態*/
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>現在已經過去了: {this.state.secondsElapsed}秒</div>
);
}
});
ReactDOM.render(<Timer />, document.getElementById('example'));
</script>
</body>
</html>
（2）運行效果。每隔一秒鐘，secondsElapsed 就會加 1。同時頁面也會自動刷新。
3，稍微復雜一點樣例
（1）樣例說明
- 我們在 textarea 上綁定了 onChange 的事件監聽，目的是通過 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 中輸入內容后，下方的 div 中會同步顯示出輸入的內容文字。
