前端框架react研究

摘要：

     最近公司要作一個嵌套在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