React.js - Stateless principal in react

之前為了建立一個複雜的 react 和 flux 的大型應用，花了不少時間把很多關於 react 和 flux 的文章看過一遍

要整合 react 和 flux，並不是用了這兩樣東西就讓你的前端應用完好無缺

這篇先從 react 的角度來看前端元件的開發準則，之後有空再寫點我對 flux 更深入的見解

首先為什麼要用 react 來開發前端，因為前端的所有東西都是元件 (Everything is component)

這也是 react 專注的重點，讓你能夠容易快速的建構一個前端應用

所以當我們透過 react 開發並且把焦點關注在元件(Component)開發上時，有幾個原則是盡量要遵循的

• Composable
• Reusable
• Maintainable
• Testable

在 Facebook 還沒 open react.js 之前，我只認為 jQuery 是最容易做到上述四點的

雖然後續有很多前端的框架 Backbone, Angular, Ember 等等，它們的重點多半是在 MV* 身上

對於一個前端的元件開發而言，它們都並不是非常好用或是友善的。

所以當你在用 React.js 開發前端的時候，也須謹記上述四點，才能讓你用 react 的價值發揮到最大

而除了這四點之外，還有一點是相當重要的，就是 Stateless component

什麼是 Stateless component ?

簡單說就是元件盡量是無狀態的，它不需要處理資料或UI狀態的變化，只要接收資料並呈現就好


所謂的資料就是領域模型(domain model)的資料，例如 Product。這些資料多半是透過 Ajax 或是 RESTful 從後端獲得的。

至於 UI狀態，就是用來"記錄" UI 目前的狀態，比方說哪一個 tab 被選擇，或是哪一個 dialog 被打開 等等。

React.js in es6

React.js 在 v0.13.0 版之後開始支援 ES6 的語法，如果想學習 ES6 語法的人可以看一下這些教學

• ECMAScript 6入门
• Learn ES6

對於最新 ES6 的 React.js 寫法，一個最基本的範例就是建立一個 Component

React Component

以往 ES5 我們會利用類似如下的寫法來建立一個 Component

首先在 ES5 我們會用 require 來引入你需要的模組，再來利用 React.createClass 建立一個 Component

最後透過 module.exports 來 export 一個 Component

至於要如何用 ES6 的語法建立一個 React 的 Component 呢?　如下：

我們可以看到原本的 require 換成了 import {} from "" 而 module.exports 換成了 export default

最重要的是，利用了 ES6 定義的 class 來達到基本的 prototype-based 的 object oriented pattern

所以在 ES6 語法中我們就可以把一個 React 的 Component 透過 class 的定義並繼承 React.Component 來建立一個 Component 的類別

當然大多數 React 所定義的方法都沒有變動，包括 render, componentWillMount, componentDidMount...等等