react.js 重點

1、引入其他js檔案方式為require，當require內的字串以'.' or '/' 開始時，表示給的是路徑

const Class = require('./Car.js');

若未給定副檔名，預設為".js"
所以也可以寫成這樣

const Class = require('./Car');


2、props與state都是component(元件)用來儲存動態資訊的物件，差異在於:
props儲存的是可由其他元件(除了自己)改變的資訊
state儲存的是可以由元件自身自己改變的資訊


3、在react.js v0.4以後，"this"關鍵字使用在定義component class的instruction物件中的function定義時，自動綁定為該元件，而非在function被呼叫時依owner改變

var MyComponent = React.createClass({
    functionYouDefined: function(){
         console.log(this) //此this綁定為MyComponent instance
    }
});

換個方式說，當this使用在物件的定義上時，行為就是綁定至該物件，使用在一般function時則是依function被呼叫時，其owner為何


4、react 編程模式1(programming pattern):

基本架構:

1個有狀態的父元件負責儲存資訊
1個無狀態的子元件負責顯示狀態內容
1個無狀態的子元件負責更新父元件的狀態
資訊狀態統一由父元件向下傳遞

流程如下:

1、一個有狀態(有getInitialState方法)的a元件定義一個有參數的方法，其內呼叫setState方法使用參數更新a元件的state

2、a元件傳遞這個更新state的方法給另一個無狀態的b元件

3、b元件定義一個可接收事件物件的方法，其內呼叫由a傳入的更新方法，並把事件物件的屬性傳遞進去，以更新a元件的state

4、b元件將可接收事件物件的方法做為事件handler

5、當特定事件觸發，a元件的state更新(例如從下拉式選單選擇一個值)

6、a元件傳遞其更新後state給另一個無狀態元件c

7、c元件接收a元件的state並將值嵌入jsx元素

8、渲染(render)a元件，c元件顯示state值，b元件顯示一個可供改變state值的途徑，例如下拉式選單


5、在react中不同檔案是互相獨立的，除了你require進來的部份，因此你可以有100個檔案，都有一個global變數叫style，它們也可以不互相衝突


6、react 編程模式2:

基本架構:

從表現元件(presentational)中分離容器元件(container)

分離表現邏輯與商業邏輯(類似view和controller的概念)

當一個元件必須擁有狀態或是根據傳入的props進行計算，或是其他任何複雜的邏輯處理，那麼它不該再負責render html-like的jsx元素，而是應該render另一個元件，由那個元件負責render html-like的jsx元素的工作

表現元件唯一的工作就是render html-like的jsx元素，如上述，容器元件會render表現元件，再由表現元件render html-like的jsx元素

有狀態的容器元件負責邏輯處理，將處理結果傳遞給無狀態的表現元件負責顯示工作

7、控制state的元件所在階層要適當，太低與太高皆不宜:

太低無法完整控制，會有難以傳遞給平行元件的問題

太高會有不必要的update情況，父元件update(setState時)代表所有子元件都會update(雖然dom不一定會更新，但檢查是會的)，當包含的內容太多時，update太頻繁會導致效能低下，反之子元件update時，上層元件並不會update，所以像是控制input內容這種工作，儘量讓底層元件控制狀態