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)了于样。
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 繼承它們秀又。