這篇文章提供了代碼實(shí)例和在React.js（一個(gè)Facebook工程師開(kāi)發(fā)的被用于構(gòu)建用戶界面的Javascript庫(kù)）中高水平的概念.這些概念會(huì)被詳細(xì)的發(fā)表在下面的文章里.在此，我必須提示如果你是一名ReactJS專家并且感覺(jué)這些代碼需要改善，請(qǐng)您把建議寫(xiě)信給我，我會(huì)及時(shí)適當(dāng)?shù)母逻@篇文章/代碼.

在我繼續(xù)發(fā)表一些代碼實(shí)例之前，我必須特別的提出：初學(xué)ReactJS會(huì)有一點(diǎn)困難，因?yàn)樽罱乙恢痹贏ngularJS上寫(xiě)代碼.到現(xiàn)在為止，我需要承認(rèn)他們之間在幫助我們做UI工作時(shí)有很大的不同.我將發(fā)表另一篇博文對(duì)比他們之間的主要差異.

然而，在較高的水平上，下面是一些原因關(guān)于我為何在學(xué)習(xí) ReactJS 時(shí)使用了略有些“陡峭”的學(xué)習(xí)路線：

•     面向組件的：ReactJS是面向組件的，也就意味著，需要你將UI元素看作是組件。有趣的是，組件是可組合的。這意味著一個(gè)組件可以具有一個(gè)或多個(gè)內(nèi)部組件。下面的代碼演示了這一點(diǎn)
•     JSX Syntax：它使用了一個(gè)有趣的JSX（XML式的）語(yǔ)法來(lái)編寫(xiě)代碼。JSX轉(zhuǎn)換器（一個(gè)預(yù)編譯器）用來(lái)將這種語(yǔ)法結(jié)構(gòu)轉(zhuǎn)換為明顯的JavaScript

    事件代理模型：它遵循了事件委托模型，用以捕獲事件

下面是一些顯示在代碼中的關(guān)鍵概念：

•     組件
•     事件代理
•     JSX 語(yǔ)法

以下是組件已實(shí)現(xiàn)內(nèi)容的簡(jiǎn)要描述

- 輸入框元素，用戶可輸入其用戶名。在下面的文章中會(huì)提到，這個(gè)輸入框?qū)嶋H是“UserName”組件

- div層元素，用于展示“Hello, userName”。在下面的文章中會(huì)提到，這個(gè)div層實(shí)際是“HelloText”組件

以下是其如何設(shè)計(jì)的。此外，請(qǐng)找到能代表下面概念的代碼。

SayHello: 可組合的元件

SayHello是一個(gè)父組件，包含兩個(gè)組件。這個(gè)父組件是由兩個(gè)內(nèi)部組件構(gòu)成。其中一個(gè)組件是UserName，用來(lái)為用戶提供輸入姓名的功能，另一個(gè)組件是HelloText，用于展示文本，比如Hello,world。這個(gè)父組件定義了下列三個(gè)不同的API：

1.     getInitialState
2.     handleNameSubmit
3.     render（這是一個(gè)必需的接口，一個(gè)組件需要定義render來(lái)告訴React響應(yīng)如何渲染組件） 

/
 // This is the parent component comprising of two inner components
 // One of the component is UserName which is used to allow user to enter their name
 // Other component is HelloText which displays the text such as Hello, World
 //
 var SayHello = React.createClass({
 // This is used to set the state, "data" which is 
 // accessed later in HelloText component to display the updated state
 // 
 getInitialState: function() {
  return {data: 'World'}
 },
 // It is recommended to capture events happening with any children
 // at the parent level and set the new state that updates the children appropriately
 handleNameSubmit: function(name) {
  this.setState({data: name});
 },
 // Render method which is comprised of two components such as UserName and HelloText
 //
 render: function() {
  return(
  <div>
  <UserName onNameSubmit={this.handleNameSubmit}/>
  <HelloText data={this.state.data}/>
  </div>
  );
 }
 });

UserName組件

UserName組件有下列兩個(gè)方法：

1.     handleChange：用來(lái)捕獲onChange事件
2.     render：用于渲染組件

var UserName = React.createClass({
 handleChange: function() {
  var username = this.refs.username.getDOMNode().value.trim();
  this.props.onNameSubmit({username: username });
  this.refs.username.getDOMNode().value = '';
  return false;
 },
 render: function() {
  return(
  <form role="form" onChange={this.handleChange}>
   <div className="input-group input-group-lg">
   <input type="text" className="form-control col-md-8" placeholder="Type Your Name" ref="username"/>
   </div>
  </form>
  );
 }
 });

HelloText組件

HelloText組件僅有一個(gè)方法用于渲染組件

 render：包含了展示HelloText組件內(nèi)容的代碼
 
var HelloText = React.createClass({
  render: function() {
  return (
  <div>
   <h3>Hello, {this.props.data}</h3>
  </div>
  );
  }
 });

如果你希望得到全部的代碼，我已經(jīng)將代碼掛在 github hello-reactjs page。請(qǐng)各位自由評(píng)論或給出建議。

最新評(píng)論