R:

這幾個月都在寫 React.js ，本來以為自己跟 React 滿合的，沒想到缺乏設計軟體系統的經驗讓自己吃了大虧。整個狀況大概可以簡化成下面這個例子：

一切都很好

一開始，要作個開關。

React 好棒棒，一下就做好了！還可以封裝到 <Button> 裡面！萬歲！

加點什麼吧？

那麼，變成三個開關吧！

那就把開關排三次就好啦，沒什麼難的！還做了個 <ButtonGroup> 出來咧！

需求又改了

那如果我希望按下一個開關，可以自動把其他開關都關掉呢？只好把狀態都移上來。

下一步要往哪走？

可是隔壁的老王說，他想要一組原來的開關，只好。

這樣一來， <ButtonGroup> 要嘛有兩種，要嘛得在 this.props 加個值，好決定該表現哪種行為。

Single Source of Truth

還不如讓最上層管理所有的狀態。

於是...

才知道為什麼 React 要分 props 和 state ，也知道寫個 stateless 的 component 到底方便在哪裡。如果按以前慣用的做法，讓各個 component 保有自己的狀態，然後到處發事件，光是聽事件的 code 就會扭成一團。對開發中的應用，哪些狀態彼此相關，常常在改變，甚至在不同層級間移動。

也看出 Flux 這個架構好在哪裡，如果 component 沒有狀態，那麼它就是個把 props/attributes 轉換成 HTML 的函式，對一種輸入只會有一種輸出。

只是知道得好像有點晚了 XDD

但沒關係，對系統外面來說，沒有時間也就沒有狀態，自然也沒有狀態該擺哪裡這種煩惱。

EDIT

• 感謝 @lyforever 建議直接嵌入 fiddles 。