[譯] React 入門

時間 2019-12-04

標籤 react 入門欄目 React 简体版

原文原文鏈接

原文連接：The React Quick Start Guidehtml

這篇文章將歸納性的介紹一下如何用 ReactJS 進行開發。我將介紹一些基礎知識，不會有過於深刻的分析。你能夠結合這些代碼閱讀本文。react

一些概念

React 的 API 很是少，簡單易懂易用。在正式開始以前先介紹幾個概念，一個一個來。webpack

React 元素 是表現爲 HTML 元素的 JavaScript 對象，他們並不真實存在於瀏覽器中。他們最終表現爲相似h1, div 或 section 之類的瀏覽器元素。git

JSX 是一種建立 React 元素和 components 的技術。例如 <h1>Hello</h1> 是一個用 JSX 寫的 React 元素。一樣能夠用純 JavaScript 寫成 React.DOM.h1(null, 'Hello');。JSX 讀寫起來更輕鬆，最終上線以前必須將 JSX 語句轉爲 JavaScript 語句。github

虛擬DOM 是由 React 元素和 components 組成的 JavaScript 樹形結構對象。React 將虛擬 DOM 渲染到瀏覽器中變成最終的用戶界面。React 會觀察虛擬 DOM 的變化，並自動將這些變化渲染到瀏覽器端。web

理解了上面這些概念，咱們能夠開始使用 React 寫一些例子了。下面會開發一系列功能，每個例子都是在前一個例子的基礎上進行改進。咱們會編寫一個相似 instagram 的照片流程序 - 沒有比這更好的示例程序了。segmentfault

渲染

第一步是渲染虛擬元素（React 元素或 component）。注意，虛擬元素只存在於內存中，必須顯式地告訴 React 將它渲染到瀏覽器上。瀏覽器

React.render(<img src='http://tinyurl.com/lkevsb9' />, document.body)

查看 JSBin markdown

render 函數接收兩個參數：虛擬元素和真實的瀏覽器 DOM 元素。React 將虛擬元素插入到指定的 DOM 元素中。上例中能夠看到圖片被渲染出來了。app

組件(Components)

組件是 React 的精髓所在。它們是自定義的 React 元素，一般有一些功能和結構定義。

var Photo = React.createClass({

  render: function() {
    return <img src='http://tinyurl.com/lkevsb9' />
  }
});

React.render(<Photo />, document.body);

查看 JSBin

createClass 函數接收一個對象，這個對象實現了 render 方法。

這個Photo組件定義了 <Photo />元素，而且渲染到 document.body 裏。

這個組件跟以前的渲染圖片沒有太大區別，可是它爲未來添加自定義功能奠基了基礎。

屬性(Props)

能夠把屬性看作組件的配置參數，看起來很是像 HTML 屬性。

var Photo = React.createClass({

  render: function() {
    return (
      <div className='photo'>
        <img src={this.props.imageURL} />
        <span>{this.props.caption}</span>  
      </div>
    );  
  }
});

React.render(<Photo imageURL='http://tinyurl.com/lkevsb9' caption='Hong Kong!' />, document.body);

查看 JSBin

imageURL 和 caption 兩個屬性被傳遞到 Photo 組件內的 render 函數裏。

imageURL 被用在 React 圖片元素的 src 屬性，caption 被用做 React span 元素內的文本。

組件不會改變它的屬性，他們是靜止不變的。若是組件裏包含動態數據，就要用到狀態(State)對象。

狀態(State)

狀態對象用來記錄隨時可能變化的數據。

var Photo = React.createClass({
  toggleLiked: function() {
    this.setState({
      liked: !this.state.liked
    });
  },

  getInitialState: function() {
    return {
      liked: false
    };
  },

  render: function() {
    var buttonClass = this.state.liked ? 'active' : '';

    return (
      <div className='photo'>
        <img src={this.props.src} />

        <div className='bar'>
          <button onClick={this.toggoleLiked} className={buttonClass}>
            ♥
          </button>
          <span>{this.props.caption}</span>
        </div>
      </div>
    );
  }
});

React.render(<Photo src='http://tinyurl.com/lkevsb9' caption='Hong Kong!') />, document.body);

查看 JSBin

組件的狀態給組件引入了一些複雜性。

這個組件有一個新的函數 getInitialState。當組件初始化時 React 會去調用這個函數。根據它返回的對象來設置組件的初始狀態（正如函數名所表達的那樣）。

這個組件還有另外一個新函數 toggleLiked。它調用了 setState 來切換 liked 的值。

在 render 函數裏有個 buttonClass 的變量，根據 liked 狀態被標記爲 'active' 或空值。

buttonClass 被用做 React button 元素的類名。這個按鈕還將 toggleLiked 函數綁定到 onClick 事件上。

看看在瀏覽器中渲染出來是什麼效果：

當組件裏的按鈕被點擊時，觸發 toggleLiked 函數
liked 狀態被改變
React 從新渲染虛擬 DOM
新老虛擬 DOM 進行對比
React 識別出變化的部分並渲染到瀏覽器

上例演示了點擊按鈕來改變類名

組合組件(Composition)

將一些小的組件(components)連接起來造成一個大的組合組件。例如 Photo 組件能夠用在 PhotoGallery 組件中，以下：

var Photo = React.createClass({
  
  toggleLiked: function() {
    this.setState({
      liked: !this.state.liked
    });
  },

  getInitialState: function() {
    return {
      liked: false
    };
  },

  render: function() {
    var buttonClass = this.state.liked ? 'active' : '';

    return (
      <div className='photo'>
        <img src={this.props.src} />
        
        <div className='bar'>
          <button onClick={this.toggleLiked} className={buttonClass}>
            ♥
          </button>
          <span>{this.props.caption}</span>
        </div>
      </div>
    );
  }
});

var PhotoGallery = React.createClass({
  
  render: function() {

    var photos = this.props.photos.map(function(photo) {
      return <Photo src={photo.url} caption={photo.caption} />
    });

    return (
      <div className='photo-gallery'>
        {photos}
      </div>
    );
  }
});

var data = [
  {
    url: 'http://tinyurl.com/lkevsb9',
    caption: 'Hong Kong!'
  },
  {
    url: 'http://tinyurl.com/mxkwh56',
    caption: 'Cows'
  },
  {
    url: 'http://tinyurl.com/nc7jv28',
    caption: 'Scooters'
  }
];

React.render(<PhotoGallery photos={data} />, document.body);

查看 JSBin

Photo 組件跟以前的沒什麼兩樣。新組件 PhotoGallery 根據 3 條假數據生成了 3 個 Photo 組件。