REACT.JS細節(jié)總結

1.JSX語法:HTML寫在JAVASCRIPE中不加引號

2.render:將模板轉(zhuǎn)為HTML語言,并插入指定節(jié)點,獲取節(jié)點是只能使用document.getelement畸陡。。输莺。不能使用JQuery選取頁面元素

3.babel.min.js:可以將ES6代碼轉(zhuǎn)為ES5代碼

4.react-dom.min.js- 提供與 DOM 相關的功能

前輩吊炸天的代碼<script href="#link(.../home.js)" ?defer ?async ?type="text/javascript"></script>

5.defer:腳本文件會被延遲到整個文本解析完成后在運行答憔。第一個延遲腳本會先于第二個延遲腳本執(zhí)行,而這兩個腳本會先于DOMContentLoaded事件執(zhí)行彬伦。在現(xiàn)實當中滔悉,延遲腳本并不一定會按照順序執(zhí)行,也不一定會在DOMContentLoad時間觸發(fā)前執(zhí)行单绑,因此最好只包含一個延遲腳本氧敢。

6.async:與defer類似,只適用于外部腳本語言询张,并告訴瀏覽器快速下載文件孙乖。但與defer不同的是,標記為async的腳本并不保證按照它們的先后順序執(zhí)行份氧。第二個腳本文件可能會在第一個腳本文件之前執(zhí)行唯袄。因此確保兩者之間互不依賴非常重要。指定async屬性的目的是不讓頁面等待兩個腳本下載和執(zhí)行蜗帜,從而異步加載頁面其他內(nèi)容恋拷。

7.

8.?

9. history 及其方法


10. shouldComponentUpdate():避免組件重復渲染

11. immutable.js:使用===可以比較兩個immutabel,直接比較內(nèi)存厅缺,性能最好蔬顾。。湘捎。诀豁。。窥妇。使用is判斷值是否相等

12. getInitialState(){}:設置組件mount以后的初始state的舷胜。。活翩。烹骨。翻伺。與constructor相似。在ES6語法中使用constructor

13. 使用ES6語法重構Reac代碼:http://www.cnblogs.com/yongjz/p/5356914.html

14. getDefaultProps:設置默認的props沮焕,如果父組件沒有給某個prop那就用默認的

15. // 以后任意類型加上 `isRequired` 來使 prop 不可空(使用isRequired后吨岭,prop必須有值)。

? ? ? ? ? requiredFunc : React . PropTypes . func . isRequired ,

16. typeof會返回一個變量的基本類型峦树,只有以下幾種:number,boolean,string,object,undefined,function........

可以判斷一個變量是否存在 ? if ( typeof a != 'undefined' ) {

//變量存在

}

或判斷變量的基本類型 alert ( typeof ( m ) ) ; //undefined

17. instanceof返回的是一個布爾值(需要注意的是未妹,instanceof只能用來判斷對象和函數(shù),不能用來判斷字符串和數(shù)字等)

var a = {};

alert(a instanceof Object);? //true

18. Redux 中已經(jīng)有了 select 來做檢索空入,Action 來更新數(shù)據(jù)

19. immutable詳解及react中實踐:https://www.w3ctech.com/topic/1595

Immutable 可以給應用帶來極大的性能提升络它,但是否使用還要看項目情況。由于侵入性較強歪赢,新項目引入比較容易化戳,老項目遷移需要評估遷移。對于一些提供給外部使用的公共組件埋凯,最好不要把 Immutable 對象直接暴露在對外接口中

注意:與Redux搭配使用





二点楼、React生命周期

首次實例化

1.getDefaultProps:設置默認的prop

2.getInitialState:設置初始狀態(tài)的state

3.componentWillMount

4.render

5.componentDidMount

實例化后的更新

1.getInitialState

2.componentWillMount

3.render

4.componentDidMount

存在期

1.componentWillReceiveProps:組件接收到新的props時調(diào)用,并將其作為參數(shù)nextProps使用白对,此時可以更改組件props及state掠廓。

componentWillReceiveProps: function(nextProps) {

if (nextProps.bool) {

this.setState({

bool: true

});

}

}

2.shouldComponentUpdate

3.componentWillUpdate

4.render

5.componentDidUpdate

銷毀&清理期

1.componentWillUnmount

render

必選的方法,創(chuàng)建虛擬DOM甩恼,該方法具有特殊的規(guī)則:

1.只能通過this.props和this.state訪問數(shù)據(jù)

2.可以返回null蟀瞧、false或任何React組件

3.只能出現(xiàn)一個頂級組件(不能返回數(shù)組)

4.不能改變組件的狀態(tài)

5.不能修改DOM的輸出




三、聲明周期新添特新

1. componentWillReceiveProps(object nextProps):已加載組件收到新的參數(shù)時調(diào)用

2. shouldComponentUpdate(object nextProps, object nextState):組件判斷是否重新渲染時調(diào)用

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末条摸,一起剝皮案震驚了整個濱河市悦污,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌钉蒲,老刑警劉巖切端,帶你破解...
    沈念sama閱讀 206,378評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異顷啼,居然都是意外死亡踏枣,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評論 2 382
  • 文/潘曉璐 我一進店門钙蒙,熙熙樓的掌柜王于貴愁眉苦臉地迎上來茵瀑,“玉大人,你說我怎么就攤上這事仪搔●觯” “怎么了蜻牢?”我有些...
    開封第一講書人閱讀 152,702評論 0 342
  • 文/不壞的土叔 我叫張陵烤咧,是天一觀的道長偏陪。 經(jīng)常有香客問我,道長煮嫌,這世上最難降的妖魔是什么笛谦? 我笑而不...
    開封第一講書人閱讀 55,259評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮昌阿,結果婚禮上饥脑,老公的妹妹穿的比我還像新娘。我一直安慰自己懦冰,他們只是感情好灶轰,可當我...
    茶點故事閱讀 64,263評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著刷钢,像睡著了一般笋颤。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上内地,一...
    開封第一講書人閱讀 49,036評論 1 285
  • 那天伴澄,我揣著相機與錄音,去河邊找鬼阱缓。 笑死非凌,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的荆针。 我是一名探鬼主播敞嗡,決...
    沈念sama閱讀 38,349評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼航背!你這毒婦竟也來了秸妥?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,979評論 0 259
  • 序言:老撾萬榮一對情侶失蹤沃粗,失蹤者是張志新(化名)和其女友劉穎粥惧,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體最盅,經(jīng)...
    沈念sama閱讀 43,469評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡突雪,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,938評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了涡贱。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片咏删。...
    茶點故事閱讀 38,059評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖问词,靈堂內(nèi)的尸體忽然破棺而出督函,到底是詐尸還是另有隱情箕宙,我是刑警寧澤,帶...
    沈念sama閱讀 33,703評論 4 323
  • 正文 年R本政府宣布剩瓶,位于F島的核電站菊匿,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏宛篇。R本人自食惡果不足惜娃磺,卻給世界環(huán)境...
    茶點故事閱讀 39,257評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望叫倍。 院中可真熱鬧偷卧,春花似錦、人聲如沸吆倦。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蚕泽。三九已至蛇更,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間赛糟,已是汗流浹背派任。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留璧南,地道東北人掌逛。 一個月前我還...
    沈念sama閱讀 45,501評論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像司倚,于是被迫代替她去往敵國和親豆混。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,792評論 2 345

推薦閱讀更多精彩內(nèi)容

  • 深入JSX date:20170412筆記原文其實JSX是React.createElement(componen...
    gaoer1938閱讀 8,048評論 2 35
  • It's a common pattern in React to wrap a component in an ...
    jplyue閱讀 3,252評論 0 2
  • 原教程內(nèi)容詳見精益 React 學習指南动知,這只是我在學習過程中的一些閱讀筆記皿伺,個人覺得該教程講解深入淺出,比目前大...
    leonaxiong閱讀 2,810評論 1 18
  • 目前盒粮,react組件有三種寫法鸵鸥,分別是es5的createClass寫法,es6的class寫法丹皱,以及statel...
    ZoomFunc閱讀 1,618評論 0 1
  • 自己最近的項目是基于react的妒穴,于是讀了一遍react的文檔,做了一些記錄(除了REFERENCE部分還沒開始讀...
    潘逸飛閱讀 3,339評論 1 10