上一篇

2-概覽

什么是 React

React 用于構建用戶界面，它是一種聲明式的，高效靈活的 JavaScript 庫。

React 有擁有眾多組件，現在我們要從 React.Component 子類開始：

code

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Example usage: <ShoppingList name="Mark" />

很快我們就會用到些有趣的、看起來很像 XML 的標簽。你的組件會告訴 React 你想渲染什么。然后，當你組件中的數據變化時，React 將立刻更新數據，并將其渲染出來。

這里，ShoppingList 是一個 React 組件類。組件接受參數，調用 props，并通過 render 方法返回視圖層，將內容展示出來。

render 會返回 React 元素 ：它是輕量化的描述，描述了你想渲染的那個東西。
React 拿到這個描述，并把它渲染到屏幕上。大多數 React 開發者使用一種特殊的語法：JSX，它讓我們可以更容易地寫這樣的結構。在構建的時候，<div />語法會被轉換為React.creatElement('div')。所以上面這個例子等同于：

code

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

查看全部展開的版本

如果你對 creatElement() 感興趣，請在 API 引用中進一步查看詳情。在本教程中，我們不會直接用到它，而是會繼續使用 JSX。

在 JSX 中，不論任何 JavaScript 表達式，你都可以把它放進花括號中。每個 React 元素都是真實的 JavaScript 對象，你可以用來存儲變量，或者傳入你的程序。

雖然 ShoppingList 組件只會渲染內建的 DOM 組件，但你其實可以很容易地構建自定制的 React 組件：只需要寫 <ShoppingList /> 就可以。每個組件都被包裹著，所以它們能獨立運行。這個機制讓你得以用簡單的組件來構建復雜的 UI。

開始編寫

我們從這個例子開始：初始代碼。

這份代碼已經提供程序的外殼和樣式。你只需要填充其中的 JavaScript 就可以。

注意，我們有三個組件：

• Square
• Board
• Game

Square 組件會渲染一個單獨的 <button /> , Board 組件會渲染出9個這樣的小方格，Game 組件渲染出一塊棋盤，它有一些占位符，待會兒我們會在里頭填入東西。到現在，組件還都不是交互式的。

通過 Props 傳數據

開始在實踐中學習吧！試著從 Board 組件傳一些數據到 Square 組件中去。

在 Board 組件中的 renderSquare 方法里，改寫代碼，把 value 值傳給 Square 組件：

code

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;
  }

接著，改寫 Square 組件中的 render 方法，用 {this.props.value} 替代 {/* TODO */}，來顯示出那些傳進來的數據：

code

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}
      </button>
    );
  }
}

更改前：

更改后：

查看最新的代碼

交互式組件

這一步，讓 Square 組件實現這樣的效果：你點擊它，就會填進去一個 “X”。試著修改 Square 組件的 render() 函數返回的 button 標簽，改成這樣：

code

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={() => alert('click')}>
        {this.props.value}
      </button>
    );
  }
}

現在，如果你點擊小方格，瀏覽器應該會跳出一個彈窗。

這里使用了JavaScript的新語法：箭頭函數。需要注意的是，我們把一個函數作為 cnClick 的屬性傳了進去。如果執行的是 onClick={alert('click')}，那么，彈窗會立即出現，而不是在點擊后才出現。

React 組件能夠通過在 constructor 中設置 this.state 來擁有狀態（state），這種狀態是組件私有的。現在，我們把小方格里的當前值存入 state，然后在小方格 被點擊時，改變這個值。

首先，在類中，添加一個 constructor，來初始化 state。

code

class Square extends React.Component {
  constructor() {
    super();
    this.state = {
      value: null,
    };
  }
   render() {
    return (
      <button className="square" onClick={() => alert('click')}>
        {this.props.value}
      </button>
    );
  }
}

在 JavaScript 類中，定義子類的 constructor 的時候，需要顯示地調用 super() 函數。

現在，改寫 Square 組件的 render 方法，以實現點擊后，把當前狀態值顯示出來的功能：

• 把 <button> 標簽中的 this.props.value 換成 this.state.value
• 把 () => alert() 事件處理器改為 () => this.setState({value: 'X'})

現在的 button 標簽看起來是這個樣子：

code

class Square extends React.Component {
  constructor() {
    super();
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button className="square" onClick={() => this.setState({value: 'X'})}>
        {this.state.value}
      </button>
    );
  }
}

無論何時調用 this.setState，組件都會立即觸發更新，使 React 合并傳進來的新狀態，并渲染組件和它的子組件。渲染后， this.state.value 的值會變成 X，所以格子里會出現 X。

點擊任何一個小方塊，都會出現 X。

查看最新一步的代碼

開發者工具

Chrome 和 Firefox 的 React 擴展開發者工具能夠讓你在瀏覽器中檢查 React 組件樹。

它能讓你檢查組件樹中任何一個組件的屬性和狀態。

安裝之后，單擊頁面中的任何元素，點擊 “Inspect” 來打開開發者工具，React 標簽就會出現在標簽欄最右處。

然而，需要注意的是，要想在 CodePen 中使用，還需要以下步驟：

1.登錄或者注冊你的郵箱(防止垃圾郵件)
2.點擊 “Fork” 按鈕
3.點擊 “Change View”，接著選擇 “Debug mode”
4.在新打開的標簽中，開發者工具里就應該有 React 標簽了

更新

React 實現井字棋游戲 (tic-tac-toe) 教程 (3) <譯自官方文檔>