摘要：

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

項目地址：https://github.com/baixuexiyang/react
Issue：https://github.com/baixuexiyang/react/issues

歡迎star和fork！

react優(yōu)勢：

 •僅僅只要表達出你的應用程序在任一個時間點應該長的樣子，然后當?shù)讓拥臄?shù)據(jù)變了，React 會自動處理所有用戶界面的更新。

•數(shù)據(jù)變化后，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：在組件類創(chuàng)建的時候調用一次，然后返回值被緩存下來。如果父組件沒有指定 props 中的某個鍵，則此處返回的對象中的相應屬性將會合并到 this.props （使用 in 檢測屬性）。

 該方法在任何實例創(chuàng)建之前調用，因此不能依賴于 this.props。另外，getDefaultProps() 返回的任何復雜對象將會在實例間共享，而不是每個實例擁有一份拷貝。

 組件的生命周期：

　　componentWillMount：

　　　　服務器端和客戶端都只調用一次，在初始化渲染執(zhí)行之前立刻調用。

　　componentDidMount：

　　　　在初始化渲染執(zhí)行之后立刻調用一次，僅客戶端有效（服務器端不會調用）。

　　componentWillReceiveProps：

　　　　在組件接收到新的 props 的時候調用。在初始化渲染的時候，該方法不會調用。

　　shouldComponentUpdate：

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

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

　　componentWillUpdate：

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

　　componentDidUpdate：

　　　　在組件的更新已經同步到 DOM 中之后立刻被調用。該方法不會在初始化渲染的時候調用。

　　componentWillUnmount：

　　　　在組件從 DOM 中移除的時候立刻被調用。

小結：

　　使用react開發(fā)，所有html都寫在js文件里，所以開發(fā)起來不是很順暢。推薦一個chrome插件：React Developer Tools

對于React，有一些認識誤區(qū)，在此總結一下：

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

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

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

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

最新評論