摘要:
最近公司要做一個嵌套在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 都是關(guān)于構(gòu)建可復用的組件,使代碼復用、測試和關(guān)注分離(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轉(zhuǎn)換成html,dangerouslySetInnerHTML={{__html: ''}}
6.getInitialState:在組件掛載之前調(diào)用一次。返回值將會作為 this.state 的初始值。
getDefaultProps:在組件類創(chuàng)建的時候調(diào)用一次,然后返回值被緩存下來。如果父組件沒有指定 props 中的某個鍵,則此處返回的對象中的相應屬性將會合并到 this.props (使用 in 檢測屬性)。
該方法在任何實例創(chuàng)建之前調(diào)用,因此不能依賴于 this.props。另外,getDefaultProps() 返回的任何復雜對象將會在實例間共享,而不是每個實例擁有一份拷貝。
組件的生命周期:
componentWillMount:
服務器端和客戶端都只調(diào)用一次,在初始化渲染執(zhí)行之前立刻調(diào)用。
componentDidMount:
在初始化渲染執(zhí)行之后立刻調(diào)用一次,僅客戶端有效(服務器端不會調(diào)用)。
componentWillReceiveProps:
在組件接收到新的 props 的時候調(diào)用。在初始化渲染的時候,該方法不會調(diào)用。
shouldComponentUpdate:
在接收到新的 props 或者 state,將要渲染之前調(diào)用。該方法在初始化渲染的時候不會調(diào)用,在使用 forceUpdate 方法的時候也不會。
如果確定新的 props 和 state 不會導致組件更新,則此處應該 返回 false。
componentWillUpdate:
在接收到新的 props 或者 state 之前立刻調(diào)用。在初始化渲染的時候該方法不會被調(diào)用。
componentDidUpdate:
在組件的更新已經(jīng)同步到 DOM 中之后立刻被調(diào)用。該方法不會在初始化渲染的時候調(diào)用。
componentWillUnmount:
在組件從 DOM 中移除的時候立刻被調(diào)用。
小結(jié):
使用react開發(fā),所有html都寫在js文件里,所以開發(fā)起來不是很順暢。推薦一個chrome插件:React Developer Tools
對于React,有一些認識誤區(qū),在此總結(jié)一下:
React不是一個完整的MVC框架,最多可以認為是MVC中的V(View),甚至React并不非常認可MVC開發(fā)模式;
React的服務器端Render能力只能算是一個錦上添花的功能,并不是其核心出發(fā)點,事實上React官方站點幾乎沒有提及其在服務器端的應用;
有人拿React和Web Component相提并論,但兩者并不是完全的競爭關(guān)系,你完全可以用React去開發(fā)一個真正的Web Component;
React不是一個新的模板語言,JSX只是一個表象,沒有JSX的React也能工作。
以上所述是關(guān)于前端框架react相關(guān)知識的全部內(nèi)容,希望大家喜歡。
新聞熱點
疑難解答