React PureRenderMixin

PureRenderMixin

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

繼續閱讀

React 不變性的輔助函式

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

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

繼續閱讀

React cloneWithProps 與實作 Tabs

實作一個 Tabs 元件

複合式(組合)元件

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

繼續閱讀

在 CodePen 中使用 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
繼續閱讀

理解 Function.prototype.bind

前言

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

繼續閱讀

React 複製元件

複製元件

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

繼續閱讀

React 單元測試

單元測試

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

繼續閱讀

React 與 DOM 的差異

DOM 的差異

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

繼續閱讀

React classSet 方法

操作樣式名稱(Class)

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

繼續閱讀

React 雙向資料繫結

雙向繫結(Two-way binding)輔助函式

React 可以搭配 ReactLink 是一種實作雙向資料繫結較簡單的方式。

繼續閱讀