1、例子：
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
React.render(
<LikeButton />,
document.getElementById('example')
);
2、事件處理與合成事件（Synthetic Events)
React裏面只需要把時間處理器（event handler）以駝峯命名（camelCased）形式當作組建的props傳入即可，就像使用普通的HTML那樣。React內部創建一套合成事件系統來使所有時間在IE8和以上瀏覽器表現一致。也就是說React知道如何冒泡和撥着事件，而且你的時間處理器接受到的events參數與W3C規範一致，無論你使用哪種瀏覽器。
如果需要在手機或者平板等設備上使用React，需要調用React.initializeTouchEvents(true)；啓用觸摸事件進行處理。
3、幕後原理：自動綁定和時間代理
Autobinding：在JavaScript中創建回調的時候爲了this的正確性，一般需要顯示的綁定方法到它的實例上，有了React，所有方法被自動綁定到了它的組件實例上，React還緩存這些綁定的方法，CPU和內存都是非常高效的。
事件代理:React實際並沒有把事件處理器綁定大節點本身，當React啓動的時候它最外層使用唯一 一個事件監聽處理所有事件。當組件被加載和卸載時，只有在內部應設立添加和刪除事件處理器。
4、組件其實就是狀態機（State Machines)
React把用戶界面當作簡單的狀態機。把用戶界面想象成擁有不同狀態然後渲染這些狀態，可以輕鬆讓用戶界面和數據保持一致。
React裏，只需更新組建的state，然後根據新的state重新渲染用戶界面(不要操作DOM），React決定最搞笑的更新DOM。
5、State工作原理
常用過的通知React數據變化的方法是調用setState(data,cllback)。這個方法會合並（merge）data到this.state,並重新渲染組件，渲染完成後，調用可選的callback回調。
State 應該包括那些可能被組件的事件處理器改變並觸發用戶界面更新的數據。 真實的應用中這種數據一般都很小且能被 JSON 序列化。當創建一個狀態化的組件時，想象一下表示它的狀態最少需要哪些數據，並只把這些數據存入 this.state。在 render() 裏再根據 state 來計算你需要的其它數據。你會發現以這種方式思考和開發程序最終往往是正確的，因爲如果在 state 裏添加冗餘數據或計算所得數據，需要你經常手動保持數據同步，不能讓 React 來幫你處理。
this.state 應該僅包括能表示用戶界面狀態所需的最少數據。因此，它不應該包括：
- 計算所得數據： 不要擔心根據 state 來預先計算數據 —— 把所有的計算都放到render() 裏更容易保證用戶界面和數據的一致性。例如，在 state 裏有一個數組（listItems），我們要把數組長度渲染成字符串， 直接在 render() 裏使用this.state.listItems.length + ' list items' 比把它放到 state 裏好的多。
- React 組件： 在 render() 裏使用當前 props 和 state 來創建它。
- 基於 props 的重複數據： 儘可能使用 props 來作爲惟一數據來源。把 props 保存到 state 的一個有效的場景是需要知道它以前值的時候，因爲未來的 props 可能會變化。
