react js note

let sometimes makes the code cleaner when inner functions are used.

var list = document.getElementById('list');

for (let i = 1; i <= 5; i++) {
  let item = document.createElement('li');
  item.appendChild(document.createTextNode('Item ' + i));

  item.onclick = function(ev) {
    console.log('Item ' + i + ' is clicked.');
  };
  list.appendChild(item);
}

// to achieve the same effect with 'var'
// you have to create a different context
// using a closure to preserve the value
for (var i = 1; i <= 5; i++) {
  var item = document.createElement('li');
  item.appendChild(document.createTextNode('Item ' + i));

    (function(i){
        item.onclick = function(ev) {
            console.log('Item ' + i + ' is clicked.');
        };
    })(i);
  list.appendChild(item);
}


https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions


如何告訴 React 它應(yīng)該編譯生產(chǎn)環(huán)境版本?
通常情況下我們會(huì)使用 Webpack 的 DefinePlugin 方法來將 NODE_ENV 變量值設(shè)置為 production披蕉。編譯版本中 React 會(huì)忽略 propType 驗(yàn)證以及其他的告警信息颈畸,同時(shí)還會(huì)降低代碼庫的大小,React 使用了 Uglify 插件來移除生產(chǎn)環(huán)境下不必要的注釋等信息没讲。
為什么我們需要使用 React 提供的 Children API 而不是 JavaScript 的 map眯娱?
React.Children.map(props.children, () => )
instead of props.children.map(() => )

props.children并不一定是數(shù)組類型,譬如下面這個(gè)元素:

<Parent>
  <h1>Welcome.</h1>
</Parent>

如果我們使用props.children.map函數(shù)來遍歷時(shí)會(huì)受到異常提示爬凑,因?yàn)樵谶@種情況下props.children是對(duì)象(object)而不是數(shù)組(array)徙缴。React 當(dāng)且僅當(dāng)超過一個(gè)子元素的情況下會(huì)將props.children設(shè)置為數(shù)組,就像下面這個(gè)代碼片:

<Parent>
  <h1>Welcome.</h1>
  <h2>props.children will now be an array</h2>
</Parent>

這也就是我們優(yōu)先選擇使用React.Children.map函數(shù)的原因嘁信,其已經(jīng)將props.children不同類型的情況考慮在內(nèi)了于样。


image.png

React Router頁面?zhèn)髦档娜N方法 https://blog.csdn.net/qq_23158083/article/details/68488831

https://github.com/rt2zz/redux-persist


  • 代碼重用主要通過組合而非繼承達(dá)成

我們強(qiáng)烈反對(duì)你自己創(chuàng)建組件的基類。 In React components, 代碼重用主要通過組合而非繼承達(dá)成潘靖。

如果你想要在組件間復(fù)用非 UI 的功能穿剖,我們建議將其提取為一個(gè)單獨(dú)的 JavaScript 模塊,如函數(shù)卦溢、對(duì)象或者類糊余。組件可以直接引入(import)而無需通過 extend 繼承它們秀又。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市啄刹,隨后出現(xiàn)的幾起案子涮坐,更是在濱河造成了極大的恐慌凄贩,老刑警劉巖誓军,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異疲扎,居然都是意外死亡昵时,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門椒丧,熙熙樓的掌柜王于貴愁眉苦臉地迎上來壹甥,“玉大人,你說我怎么就攤上這事壶熏【淠” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵棒假,是天一觀的道長溯职。 經(jīng)常有香客問我,道長帽哑,這世上最難降的妖魔是什么谜酒? 我笑而不...
    開封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮妻枕,結(jié)果婚禮上僻族,老公的妹妹穿的比我還像新娘。我一直安慰自己屡谐,他們只是感情好述么,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著愕掏,像睡著了一般度秘。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上亭珍,一...
    開封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天敷钾,我揣著相機(jī)與錄音,去河邊找鬼肄梨。 笑死阻荒,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的众羡。 我是一名探鬼主播侨赡,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了羊壹?” 一聲冷哼從身側(cè)響起蓖宦,我...
    開封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎油猫,沒想到半個(gè)月后稠茂,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡情妖,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年睬关,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片毡证。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡电爹,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出料睛,到底是詐尸還是另有隱情丐箩,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布恤煞,位于F島的核電站屎勘,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏阱州。R本人自食惡果不足惜挑秉,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望苔货。 院中可真熱鬧犀概,春花似錦、人聲如沸夜惭。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽诈茧。三九已至产喉,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間敢会,已是汗流浹背曾沈。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留鸥昏,地道東北人塞俱。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像吏垮,于是被迫代替她去往敵國和親障涯。 傳聞我的和親對(duì)象是個(gè)殘疾皇子罐旗,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

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

  • GUIDS 第一章 為什么使用React? React 一個(gè)提供了用戶接口的JavaScript庫唯蝶。 誕生于Fac...
    jplyue閱讀 3,544評(píng)論 1 11
  • 本筆記基于React官方文檔九秀,當(dāng)前React版本號(hào)為15.4.0。 1. 安裝 1.1 嘗試 開始之前可以先去co...
    Awey閱讀 7,729評(píng)論 14 128
  • react 基本概念解析 react 的組件聲明周期 react 高階組件粘我,context, redux 等高級(jí)...
    南航閱讀 1,070評(píng)論 0 1
  • 深入JSX date:20170412筆記原文其實(shí)JSX是React.createElement(componen...
    gaoer1938閱讀 8,075評(píng)論 2 35
  • 最近看了一本關(guān)于學(xué)習(xí)方法論的書鼓蜒,強(qiáng)調(diào)了記筆記和堅(jiān)持的重要性。這幾天也剛好在學(xué)習(xí)React涂滴,所以我打算每天堅(jiān)持一篇R...
    gaoer1938閱讀 1,692評(píng)論 0 5