摘要：

     最近公司要做一個巢狀在app中的應用，考慮著用Facebook的react來開發view，所以就研究了下。下面是我在開發中遇到的坑，希望能給你幫助。

專案地址：https://github.com/baixuexiyang/react

Issue：https://github.com/baixuexiyang/react/issues

歡迎star和fork！

react優勢：

• 僅僅只要表達出你的應用程式在任一個時間點應該長的樣子，然後當底層的資料變了，React 會自動處理所有使用者介面的更新。
• 資料變化後，React 概念上與點選“重新整理”按鈕類似，但僅會更新變化的部分。
• React 都是關於構建可複用的元件，使程式碼複用、測試和關注分離（separation of concerns）更加簡單。

注意點：

1. 載入元件的首字母大寫，比如：<HeaderComponent />
   
2. 每一個元件的render最外層都要有一個包裹元素
3. this.props不能修改，this.state可以修改
4. 頁面oclick事件在ios中的Safari不起效果，onClick={this.detail.bind(this, item)} 需要使用其他方式，比如jQuery的繫結事件
5. string轉換成html，dangerouslySetInnerHTML={{__html: “}}
6. getInitialState：在元件掛載之前呼叫一次。返回值將會作為 this.state 的初始值。
   getDefaultProps：在元件類建立的時候呼叫一次，然後返回值被快取下來。如果父元件沒有指定 props 中的某個鍵，則此處返回的物件中的相應屬性將會合併到 this.props （使用 in 檢測屬性）。

   該方法在任何例項建立之前呼叫，因此不能依賴於 this.props。另外，getDefaultProps() 返回的任何複雜物件將會在例項間共享，而不是每個例項擁有一份拷貝。

元件的生命週期：

　　componentWillMount：

　　　　伺服器端和客戶端都只呼叫一次，在初始化渲染執行之前立刻呼叫。
　　componentDidMount：

　　　　在初始化渲染執行之後立刻呼叫一次，僅客戶端有效（伺服器端不會呼叫）。
　　componentWillReceiveProps：

　　　　在元件接收到新的 props 的時候呼叫。在初始化渲染的時候，該方法不會呼叫。
　　shouldComponentUpdate：

　　　　在接收到新的 props 或者 state，將要渲染之前呼叫。該方法在初始化渲染的時候不會呼叫，在使用 forceUpdate 方法的時候也不會。

如果確定新的 props 和 state 不會導致元件更新，則此處應該 返回 false。
　　componentWillUpdate：

　　　　在接收到新的 props 或者 state 之前立刻呼叫。在初始化渲染的時候該方法不會被呼叫。
　　componentDidUpdate：

　　　　在元件的更新已經同步到 DOM 中之後立刻被呼叫。該方法不會在初始化渲染的時候呼叫。

　　componentWillUnmount：

　　　　在元件從 DOM 中移除的時候立刻被呼叫。

 

 

小結：

　　使用react開發，所有html都寫在js檔案裡，所以開發起來不是很順暢。推薦一個chrome外掛：React Developer Tools