日韩在线视频不卡一区二区三区

目錄結構

React 是近期非常熱門(mén)的一個(gè)前端開(kāi)發(fā)框架。這篇文章將介紹如何使用 React 來(lái)創(chuàng )建用戶(hù)界面，希望能夠起到拋磚引玉的效果。

相對于其他框架來(lái)說(shuō)，React 提供了非常少的 API，如同 Gulp，越是少量的 API 同時(shí)意味著(zhù)越多的可能性。正如那句名言所說(shuō)：

Less is more.

但是，精簡(jiǎn)的 API 不是意味著(zhù)沒(méi)有一定的學(xué)習成本，我們還是需要對此框架進(jìn)行一定的理解。閑話(huà)不多說(shuō)，讓我們進(jìn)入正題。首先，讓我們來(lái)了解下 React 中使用到的一些術(shù)語(yǔ)。

React 術(shù)語(yǔ)

React Elements
代表 HTML 元素的 JavaScript 對象。這些 JavaScript 對象最后被編譯成對應的 HTML 元素。
Components
封裝 React Elements，包含一個(gè)或者多個(gè) React Elements。 Components 用于創(chuàng )建可以復用的 UI 模塊，例如分頁(yè)，側欄導航等。
JSX
JSX 是 React 定義的一種 JavaScript 語(yǔ)法擴展，類(lèi)似于 XML 。 JSX 是可選的，我們完全可以使用 JavaScript 來(lái)編寫(xiě) React 應用，不過(guò) JSX 提供了一套更為簡(jiǎn)便的方式來(lái)寫(xiě) React 應用。
Virtual DOM
Virtual DOM 是一個(gè)模擬 DOM 樹(shù)的 JavaScript 對象。 React 使用 Virtual DOM 來(lái)渲染 UI，同時(shí)監聽(tīng) Virtual DOM 上數據的變化并自動(dòng)遷移這些變化到 UI 上。

DEMO 環(huán)境準備

首先，在 React Download 頁(yè)面下載 Starter Kit，解壓到某個(gè)地方。

進(jìn)入到解壓后的 build 目錄，新建一個(gè) index.html 文件，并且引用 react.js 和 JSXTransformer.js 后就可以開(kāi)始編寫(xiě) React 應用了。需要注意如果使用 JSX，那么 script 標簽的 type 應該更改為 text/jsx。

<html>  <head>    <meta charset="utf-8" >    <title>demo</title>  </head>  <body>    <script src="react.js"></script>    <script src="JSXTransformer.js"></script>    <script type="text/jsx" src="app.js"></script>  </body></html>

第一個(gè) React Element

創(chuàng )建一個(gè) Element 只需調用 React.createElement 方法，并傳入元素信息即可。例如：

var div = React.createElement('div', null, "Hello React");// 使用 JSXvar div = <div>Hello React</div>

創(chuàng )建之后就可以調用 React.render 方法渲染到頁(yè)面上：

React.render(div, document.body);

第一個(gè) React Component

React Component 抽象出相同 UI 組件的結構和邏輯。通過(guò)調用 React.createClass 方法來(lái)創(chuàng )建一個(gè) Component，并傳入一個(gè)帶有 render 方法的對象類(lèi)型的參數。

var HelloMessage = React.createClass({  render: function () {    return <div>Hello {this.props.name}</div>;  }});React.render(<HelloMessage name="iissnan" />, document.body);

我們看到 React.createClass 接收了一個(gè)對象，并將這個(gè)方法返回賦值給 HelloMessage，最后調用 React.render 方法將這個(gè)新建的 Component 渲染到頁(yè)面上。從這個(gè)例子看來(lái)，一個(gè) Component 與 Element 并無(wú)太大的差別。事實(shí)上， Component 已經(jīng)準備好了，我們可以增添一些結構和功能來(lái)擴展這個(gè) Component 。

Props

在上一個(gè)例子中，可以看到有一個(gè)特殊的引用： this.props.name。這個(gè)引用稱(chēng)之為 Props，可以將他想象成 Component 的設置選項。

在使用上， Props 類(lèi)似于 HTML 中的屬性：

React.render(<HelloMessage name="foo" />, document.body);

在 Component 內部，通過(guò) this.props.name 來(lái)引用這個(gè) Props：

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

需要注意的是， Props 僅用來(lái)定制 Component，這些數據不應該被改動(dòng)。如果涉及到需要做改動(dòng)的數據，得考慮使用 state。

Stateful Component

State 數據代表 Component 的狀態(tài)，用于維護 Component 內部的狀態(tài)。當 State 發(fā)生改變之后， React 將會(huì )重新渲染 UI 。調用與 Props 類(lèi)似， State 數據通過(guò) this.state 訪(fǎng)問(wèn)：

var Greeting = React.createClass({  getInitialState: function () {    return { greeted: false };  },  greet: function () {    this.setState({      greeted: true    });  },  render: function () {    var response = this.state.greeted ? 'Hi' : '';    return (      <div>        <div>Hello {this.props.name}</div>        <span>{response}</span>        <button onClick={this.greet}>Hi</button>      </div>    );  }});React.render(<Greeting name="foo" />, document.body);

這個(gè)例子中加了幾個(gè)函數，我們一一來(lái)看下。首先是 getInitialState ，這個(gè)方法在 Component 初始化的時(shí)候被調用，返回 Component 初始時(shí)的狀態(tài)數據。例子中，我們設置了 Component 初始時(shí)的 greeted 為 false。
然后是 greet 方法，這個(gè)方法被調用之后將修改狀態(tài)數據 greeted 為 true。

當 State 發(fā)生改變后， React 將 Component 渲染到 Virtual DOM，新的 Virtual DOM 與舊版本的進(jìn)行比對，檢查出改變的部分并更新瀏覽器的 DOM。在這個(gè)例子中，當按鈕被點(diǎn)擊后， greeted狀態(tài)數據發(fā)生了變化，UI 跟隨著(zhù)更新。

組合

結合 Props 和 State，我們就可以使用 Component 來(lái)創(chuàng )建完整的應用。

var Greeting = React.createClass({  getInitialState: function () {    return { greeted: false };  },  greet: function () {    this.setState({      greeted: true    });  },  render: function () {    var response = this.state.greeted ? 'Hi' : '';    return (      <div>        <div>Hello {this.props.name}</div>        <span>{response}</span>        <button onClick={this.greet}>Hi</button>      </div>    );  }});var users = ["foo", "bar", "baz"];var GreetingApp = React.createClass({  render: function () {    var greetings = this.props.users.map(function (user) {      return <Greeting name={user} />;    });    return <div>{greetings}</div>;  }});React.render(<GreetingApp users={users} />, document.body);

原始出處： IIssNan's Notes - ReactJS 快速入門(mén)

本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請點(diǎn)擊舉報。