Immutable 是函數式的概念之一，一旦創建出來之后，就不能再改變。因此，當你想對其做修改，就得弄一個新的。  好奇的同學要問了，但是 React 看起來是面向對象的啊。?`createClass`?，?`state`?，函數式有狀態和 class 嗎？ > If a tree falls in a forest and no one is around to hear it, does it make a sound??[2](http://blog.oyanglul.us/javascript/react-cookbook-mini.html#fn.2) 首先，函數式和面向對象并不沖突，兩種編程范式分別有各自的方式解決問題。 其次： ## 3.1?狀態 如果狀態只存在于 Component 中又并沒有影響任何人，它還是狀態嗎？ ClojureScript 的 React 庫 om，只有一個 app 級別的 state。因此所有的 component，其實并無狀態。 [https://youtu.be/5yHFTN-_mOo](https://youtu.be/5yHFTN-_mOo) ## 3.2?Class 想象一下使用一個 React Component 的時候 ~~~ <AFancyHelloWord message="Good News Everyone!"/> ~~~ 來想象一下 1. 尖括號?`<`?往右移 2. 尖括號變成圓括號 3. 里面再加個大括號 4. 等號變冒號 ~~~ AFancyHelloWord({message:"Good News Everyone!"}) ~~~ [./images/futurama_August_26__2015_at_0617AM.gif?](http://blog.oyanglul.us/javascript/images/futurama_August_26__2015_at_0617AM.gif)ok, 如果把每個 Component 看成一個函數，為了我們的代碼更好 reason about 而且更 loose couple，我們應該盡量要**消除**?每一個 Component 的狀態。 這樣在 Component 的樹中，我們可以隨意切換 Component，以 Star Wars 為例，Anakin 有兩樣東西，Luke 和光劍：  當 Anakin 變成 Darth Vader，光劍的顏色變紅時，Darth Vadar 有 Luke 和 紅色光劍。  實際上我們需要盡量減少 Component 中的狀態，而且對著少數的狀態，由于他們是我們的 source of truth，并不希望他是 mutable 的，這樣我很難知道誰動了我的 source of truth。 ## 3.3?讓你的數據結構 immutable 的工具們 ### [Immutablility helper](http://facebook.github.io/react/docs/update.html) 這是 react addon 中自帶的工具，如果你并不想完整的 Immutable 數據結構，這個工具可以幫助 copy 一份來做改動 ~~~ var update = require('react-addons-update'); var inc = x=>x+1 var fancyPropsForChild=update(this.state, { x: {y: {z: {$set: 7}}}, a: {b: {$push: [9]}}, h: {$merge: {i: "j"}}, e: {$apply: inc} }); ~~~ ### [mori](https://github.com/swannodette/mori) 更為徹底的選擇是，使用 ClojureScript 的 Immutable 數據結構。benchmark 要比 facebook 的 Immutable.js 好上許多，但是使用上跟 ClojureScript 一致， 用慣JavaScript的人可能不太能習慣，alternative 是使用我 fork 的 mori 版本[conjs](http://github.com/jcouyang/conjs)。 ### [Immutable.js](https://facebook.github.io/immutable-js/) facebook 實現的 immutable 數據結構，使用上比較符合 JavaScript 習慣一些， 不過跑分低一些。