元件 (Component)

React 的基本單元為元件，每個元件可以包含無限多的子元件，可以依照需求組裝成一個組合式的元件，因此具有關注點分離 (Separation of Concerns)、複用 (Reuse) 、組合 (Compose) 的特性。

一個簡單的例子

var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  }
});

React.render(
  <LikeButton />,
  document.getElementById('example')
);

事件

React 封裝了自我一套事件處理的機制，事件以駝峰式(camelCased)的屬性參數語法來處理 W3C Spec 定義的事件，且支援目前主流的瀏覽器，也可透過下列語法來處理觸控事件。

React.initializeTouchEvents(true);

Autobinding & Event Delegation

React 私底透過一些方式提高整體的效能及易用性。

Autobinding

Javascript 在呼叫方法時，需特別注意方式 this 的使用。使用 React.createClass 時，會自己將方法與 this 作綁定的動作，開發人員無需特別關注 context 的處理。

註:僅限使用 React.createClass 建立元件時才無需注意，若是使用繼承方式實作 React.Componet 的話，也是得注意是否有綁定錯的狀況發生。

Event Delegation

React 事件綁定不像傳統是直接對實際 dom 節點進行事件綁定的行為，而是在 mount 或是 unmount 節點時使用單一個 event listener 代理底層事件。當某事件發生時，React 會透過內部 mapping 表找出是由哪個節點觸發。

State

React 認為每個 Componet 類似一個一個的狀態機 (State Mechine)。當你異動 state 時，React 會自動比對差異並將 UI 更新至最新的狀態。

名詞說明：state & props

state 和 props 都是用來描述元件的狀態，不過在概念及使用本質上有明顯的不同。

state: 常會隨時間及事件而發生改變
props: 不常會隨時間及事件而發生改變

how-to

用法上可參照上方簡單的例子：

props

LikeButton render() 中 JSX 語法定義了

<p onClick={this.handleClick}>
       ...
</p>

handleClick 方法的呼叫並不會隨著時間的異動而發生改變。

state

getInitialState()

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

使用 getInitialState() 來取得元件初始化時的狀態。

setState()

 this.setState({liked: !this.state.liked});

當有事件發生而異動時，使用 setState() 來更新狀態，React 收到異動時會自動呼叫 render() 方法來產生新的畫面。

Composition

下方例子中，Avatar 元件組裝了另外二個元件。

var Avatar = React.createClass({
  render: function() {
    return (
      <div>
        <ProfilePic username={this.props.username} />
        <ProfileLink username={this.props.username} />
      </div>
    );
  }
});

var ProfilePic = React.createClass({
  render: function() {
    return (
      <img src={'https://graph.facebook.com/' + this.props.username + '/picture'} />
    );
  }
});

var ProfileLink = React.createClass({
  render: function() {
    return (
      <a href={'https://www.facebook.com/' + this.props.username}>
        {this.props.username}
      </a>
    );
  }
});

React.render(
  <Avatar username="pwh" />,
  document.getElementById('example')
);

名詷解釋：owner-ownee & parent-child

React 中一個元件若被稱有 Owner 即表示此元件具有設定子元件 props 的能力，如上方的 Avatar；
Parent 則表示有其他節點含包含在自己的節點內。