caasih.net

狀態好像泡泡

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

由 Isaac Huang 發佈於