深入探討前端框架react_javascript技巧

摘要：

      最近公司要做一個嵌套在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.載入元件的首字母大寫，例如：
 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

對於React，有一些認識誤區，在此總結一下：

React不是完整的MVC框架，最多可以認為是MVC中的V（View），甚至React並不非常認可MVC開發模式；
React的伺服器端Render能力只能算是一個錦上添花的功能，並不是其核心出發點，事實上React官方網站幾乎沒有提及其在伺服器端的應用；

有人拿React和Web Component相提並論，但兩者並不是完全的競爭關係，你完全可以用React去開發一個真正的Web Component；

React不是一個新的模板語言，JSX只是一個表象，沒有JSX的React也能運作。

以上所述是關於前端框架react相關知識的全部內容，希望大家喜歡。