淺談 React

機緣巧合認識React，翻了2天的資料，又整理了1天，也算是簡單入門了;以前也學過angular，相比來講，的確React代碼邏輯更加簡單明瞭，理解起來也相對容易。

React 具有如下特性：1.聲明式設計 −React採用聲明範式，能夠輕鬆描述應用。

　　　　　　　　　　2.高效 −React經過對DOM的模擬，最大限度地減小與DOM的交互。

　　　　　　　　　　3.靈活 −React能夠與已知的庫或框架很好地配合。

　　　　　　　　　　4.JSX − JSX 是 JavaScript 語法的擴展。React 開發不必定使用 JSX ，但咱們建議使用它。

　　　　　　　　　　5.組件 − 經過 React 構建組件，使得代碼更加容易獲得複用，可以很好的應用在大項目的開發中。

　　　　　　　　　　6.單向響應的數據流 − React 實現了單向響應的數據流，從而減小了重複代碼，這也是它爲何比傳統數據綁定更簡單。

下面是我整理的一些關於React的入門知識

注：下面所示事例中只引入react.js（核心JS）、react-dom.js（關於DOM的JS）、browser.min.js（JSX解讀），可直接到官網下載最新的源碼：https://facebook.github.io/react/

1、ReactDOM.render 是 React 的最基本方法：用於將模板轉爲 HTML 語言，並插入指定的 DOM 節點

ReactDOM.render(
　　<h1>Hellow World!</h1>,
　　document.getElementById('example')
);

2、JSX 語法 -- React 首次提出的一種語言

JSX 語法：HTML 語言直接寫在 JavaScript 語言之中，不加任何引號，這就是 JSX 的語法，它容許 HTML 與 JavaScript 的混寫；

JSX 容許直接在模板插入 JavaScript 變量。若是這個變量是一個數組，則會展開這個數組的全部成員,添加到模板。

例1：var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(
　　　<div>
　　　　　{
　　　　　　　names.map(function (name) {
　　　　　　　　　return <div><span>Hello, {name}!</span></div>
　　　　　　　})
　　　　　}
　　　</div>,
　　document.getElementById('example')
);

例2：var arr = [

　　　　　　　　<h1>I have a dream!</h1>,
　　　　　　　　<h2>I have a day！</h2>,
　　　　　　　　];
ReactDOM.render(
　　<div>{arr}</div>,
　　document.getElementById('example')
);

JSX具有如下優勢：1.JSX 執行更快，由於它在編譯爲 JavaScript 代碼後進行了優化。

　　　　　　　　　2.它是類型安全的，在編譯過程當中就能發現錯誤。

　　　　　　　　　3.使用 JSX 編寫模板更加簡單快速。

3、組件 API

　　1.設置狀態：setState

　　2.替換狀態：replaceState

　　3.設置屬性setProps

　　4.替換屬性replaceProps

　　5.強制更新：forceUpdate

　　6.獲取DOM節點：findDOMNode

　　7.判斷組件掛載狀態：isMounted

　　8.生成組件類：createClass

（關於createClass）：React 容許將代碼封裝成組件（component），而後像插入普通 HTML 標籤同樣，在網頁中插入這個組件。React.createClass 方法就用於生成一個組件類

注意：添加組件屬性，須要注意的就是 class 屬性須要寫成 className ，for 屬性須要寫成 htmlFor，由於for與class 是 JS 中的關鍵字（其餘屬性可直接使用）

例：

var HelloMessage = React.createClass({
　　render: function() {
　　　　return (
　　　　　　<div>
　　　　　　　　<h1>{this.props.name}</h1>
　　　　　　　　<a href={this.props.site}>{this.props.site}</a>
　　　　　　</div>

　　　　　)
　　}
});

ReactDOM.render(
　　<HelloMessage name="百度" site="www.baidu.com"/>,
　　document.getElementById('example')
);

複合組件：經過建立多個組件來合成一個組件

var HelloMessage = React.createClass({
　　render: function() {
　　　　return (
　　　　　　<div>
　　　　　　　　<Name name={this.props.name}/>
　　　　　　　　<Site site={this.props.site}/>
　　　　　　</div>
　　　　)
　　}
});

var Name = React.createClass({
　　render: function() {
　　　　return <h1>{this.props.name}</h1>
　　}
});
var Site = React.createClass({
　　render: function() {
　　　　return <a href={this.props.site}>{this.props.site}</a>
　　}
});

ReactDOM.render(
　　<HelloMessage name="百度" site="www.baidu.com"/>,
　　document.getElementById('example')
);

4、this.props.children 屬性

前面的例子中提到：this.props 表示對象的屬性與組件的屬性一一對應；可是 this.props.children 屬性表示組件的全部子節點

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>LiLei</span>
　　　　<span>HanMeimei</span>
　　</NotesList>,
　　document.getElementById('example')
);

 　　this.props.children 的值有三種可能:  1.若是當前組件沒有子節點，它就是 undefined

　　　　　　　　　　　　　　　　　　　　2.若是有一個子節點，數據類型是 object

　　　　　　　　　　　　　　　　　　　　3.若是有多個子節點，數據類型就是 array

5、React State (狀態)

與用戶互動，致使狀態變化，根據新的 state 從新渲染用戶界面（經常使用於輸入框中）

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.getElementById('example'));

注：因爲 this.props 和 this.state 都用於描述組件的特性，可能會產生混淆。一個簡單的區分方法是，this.props 表示那些一旦定義，特性是再也不改變的，而 this.state 特性是會隨着用戶互動而產生變化的。

6、PropTypes 屬性

就是用來驗證組件實例的屬性是否符合要求：有時，咱們須要一種機制，驗證別人使用組件時，提供的參數是否符合要求（提供給代碼人員本身識別）

var data = '123';

var MyTitle = React.createClass({
　　propTypes: {
　　　　title: React.PropTypes.number,
　　},

　　render: function() {
　　　　return <h1> {this.props.title} </h1>;
　　}
});

ReactDOM.render(
　　<MyTitle title={data} />,
　　document.getElementById('example')
);

結果：正常輸出「123」，打開開發者工具會有一段錯誤輸出（具體可本身試試）

7、refs 屬性

組件並非真實的 DOM 節點，而是存在於內存之中的一種數據結構，叫作虛擬 DOM。只有當它插入文檔之後，纔會變成真實的 DOM 。根據 React 的設計，全部的 DOM 變更，都先在虛擬 DOM 上發生，而後再將實際發生變更的部分，反映在真實 DOM上，這種算法叫作 DOM diff ，它能夠極大提升網頁的性能表現。

this.refs[myRefsName] 獲取真實的DOM節點

var MyComponent = React.createClass({
　　handleClick: function() {
　　　　this.refs.myTextInput.focus();
　　},
　　render: function() {
　　　　return (
　　　　　　<div>
　　　　　　　　<input type="text" ref="myTextInput" />
　　　　　　　　<input type="button" value="點擊進行編寫" onClick={this.handleClick} />
　　　　　　</div>
　　　　);
　　}　　
});

ReactDOM.render(
　　<MyComponent />,
　　document.getElementById('example')
);

8、組件的生命週期

組件的生命週期分紅三個狀態：

　　一、Mounting：已插入真實 DOM

　　二、Updating：正在被從新渲染

　　三、Unmounting：已移出真實 DOM

React 爲每一個狀態都提供了兩種處理函數，will 函數在進入狀態以前調用，did 函數在進入狀態以後調用,三種狀態共計五種處理函數 + 兩種特殊狀態的處理函數；

具體參見：https://facebook.github.io/react/docs/react-component.html

9、React AJAX

React 組件的數據能夠經過 componentDidMount 方法中的 Ajax 來獲取，當從服務端獲取數據庫能夠將數據存儲在 state 中，再用 this.setState 方法從新渲染 UI

當使用異步加載數據時，在組件卸載前使用 componentWillUnmount 來取消未完成的請求。

var UserGist = React.createClass({
　　getInitialState: function() {
　　　　return {
　　　　　　username: '',
　　　　　　userhobby: ''
　　　　};
　　},
　　componentDidMount: function() {
　　　　$.get(this.props.source, function (result) {
　　　　　　　this.setState({
　　　　　　　　　　username: result.name,
　　　　　　　　　　userhobby: result.hobby
　　　　　　　　});
　　　　　　}.bind(this),'json');
　　},

　　render: function() {
　　　　return (
　　　　　　<div>
　　　　　　　　<p>姓名：{this.state.username} </p>
　　　　　　　　<p>愛好：{this.state.userhobby} </p>

　　　　　　</div>
　　　　　　);
　　　}
});

ReactDOM.render( 　　<UserGist source="http://localhost/testdata.php" />, 　　document.getElementById('example') );