React 揭秘

關於這篇文章將會試著解釋關於 React 核心的概念。

PureRenderMixin

如果您的 React 元件的 render 函式非常單純(相對來說，就只是單純想把 props 和 state 輸出)，您就可以使用 PureRenderMixin 來提升效能:

不變性的輔助函式(Immutability Helpers)

在一開始我們必須先對這文鄒鄒的術語做個解釋: 所謂的 Immutability 英文的意思就是不能夠或不輕易受外界影響而改變。而在程式領域中我們舉的例子來說明: 即當資料或物件建立之後就不能或者輕易改變。
以 C# 來說明就是 Array 和 List 的關係，Object-C 的 NSArray 和 NSMutableArray 對應的關係。

實作一個 Tabs 元件

複合式(組合)元件

在 React 中任何東西都是元件，就像樂高一樣，你可以用小片的積木組成大塊的，再組合出您想到的東西。
同樣的道理您也可以用許多的小元件(小功能模組)來組合出您的應用程式。所謂的複合式元件或稱作組合元件，
他其實就是由多個元件去組成一個多功能的大元件。

在 codepen.io 上使用 React

為了能夠在 CodePen 上使用 React 和 JSX 您必須要:

1. 加入這支 script 到 CodePen http://codepen.io/chriscoyier/pen/yIgqi.js
2. React: http://fb.me/react-0.11.1.js
3. JSX Transformer: http://fb.me/JSXTransformer-0.11.0.js

前言

自從 2013 年 Reactjs 開放原始碼後就被其單純的架構和理念所吸引。但由於沒有迫切的需求一直沒有將其使用于產品中。
且在當時 Angular 正流行，大部份的人都被 two-way binding 神奇簡練的寫法給嚇傻了，相較之下在第一眼看到 Reactjs 其給人的感受為: 怎麼好像要多打很多 Code 啊!?
而在 2014 因為 Facebook 提出 Flux 與 Jest 等東西的使我決定認真的研究一下並將其使用在產品上。
但由於 React 相關文章大多很散且中文文章不多，所以接下來的 30 天我將逐步根據官網教學與一些國內外高手的文章心得，佐以實作驗證後，記錄為此系列文章。

複製元件

在少數的情況下，某個元件可能想要變更不屬於自己的 props(例如: 修改 this.props.children 的 className )。
或者是複製多個被傳入的元件。cloneWithProps() 是這件事變的可能。

單元測試

React.addons.TestUtils 讓您可以在您的測試框架中更簡單的測試您的元件(官方使用 Jest)。
簡單的來說它是一系列輔助的方法以協助您測試 React 元件。

DOM 的差異

React 為了跨瀏覽器和提升效能的因素，實作一套和瀏覽器本身無關的 events 以及模擬 DOM 的機制。我們可以借由這個機制處理一些關於原始 DOM 設計上一些不足的地方。

操作樣式名稱(Class)

classSet() 是一個協助您快速操作 DOM 裏 class 字串的工具。
這裡有一些常見的情況，當沒有使用 classSet() 的時候: