2015年5月23日 星期六

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 被打開 等等。

2015年5月22日 星期五

React.js in es6

React.js 在 v0.13.0 版之後開始支援 ES6 的語法,如果想學習 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...等等