淺談 React

標籤：定義   imei   message   doc   render   targe   開發   姓名   驗證   

機緣巧合認識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/

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

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

二、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 編寫模板更加簡單快速。

三、組件 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‘)
);

四、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

五、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 特性是會隨著使用者互動而產生變化的。

六、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”，開啟開發人員工具會有一段錯誤輸出（具體可自己試試）

七、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‘)
);

八、組件的生命週期

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

　　1、Mounting：已插入真實 DOM

　　2、Updating：正在被重新渲染

　　3、Unmounting：已移出真實 DOM

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

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

九、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‘)
);

淺談 React