最初使用React時艘儒，沒有太注意細(xì)節(jié)聋伦，只是會使用，實現(xiàn)功能界睁，當(dāng)使用一段時間再回過頭來看官方文檔時發(fā)現(xiàn)有些東西原來是這樣的觉增，下面就把再次看文檔時覺得柳暗花明的地方總結(jié)一下，也算是對React基礎(chǔ)學(xué)習(xí)告一段落翻斟，開啟下一篇章逾礁。
key應(yīng)該是穩(wěn)定的，且唯一的访惜，盡量不要用索引作為key
都知道React組件渲染列表時需要為每個列表元素分配一個在列表中獨一無二的key嘹履，key可以在DOM中的某些元素被增加或刪除視乎幫助React識別哪些發(fā)生了變化，通常列表數(shù)據(jù)都會有id字段债热，習(xí)慣用id值作為key砾嫉，當(dāng)沒有id或其他唯一標(biāo)識時，也會用序列號索引index作為key窒篱，之前并沒有覺得用index有什么不好之處焕刮，再次看文檔發(fā)現(xiàn)序列號索引作為key有一些弊端。
如果列表可以重新排序墙杯，不建議使用索引作為key配并，因為會導(dǎo)致渲染變得很慢，如果不重排霍转，沒問題荐绝。
為什么變得很慢避消？
React通過對比算法來更新組件低滩，使用key來匹配原本樹的子節(jié)點和新樹的子節(jié)點召夹，比如以下列表，在開始插入元素：
<ul>
<li key='6'>6</li>
<li key='7'>7</li>
</ul>
<ul>
<li key='5'>5</li>
<li key='6'>6</li>
<li key='7'>7</li>
</ul>
沒有使用index作為key恕沫，React知道key為'5'的元素是新的监憎，僅移動key為'6'、'7'的元素就可以了婶溯。
如果使用index作為key鲸阔，上述列表的變化會導(dǎo)致key值的變化，列表元素不能復(fù)用迄委，造成不必要的重建褐筛，也可能會以意想不到的方式更新，所以會變慢叙身。
注意：不要使用不穩(wěn)定的key（類似Math.random()生成的）
React中布爾值渔扎、Null和Undefined被忽略，數(shù)字0不會被忽略
React使用條件渲染時信轿，通常用JavaScript的邏輯與&&晃痴，當(dāng)showHeader為true時渲染<Header />，如下：
<div>
{showHeader && <Header />}
</div>
但數(shù)字0不會像預(yù)期的哪樣運行财忽，如下：
<div>
{props.messages.length &&
<MessageList messages={props.messages} />
}
</div>
props.messages為空數(shù)組時倘核，仍然會渲染<MessageList />，要解決這個問題即彪，確保 && 前面的表達(dá)式始終為布爾值：
<div>
{props.messages.length > 0 &&
<MessageList messages={props.messages} />
}
</div>
使用PropTypes進(jìn)行類型檢查是很必要的
最開始寫React的時候從來都不加PropTypes紧唱，覺得沒什么必要，現(xiàn)在發(fā)現(xiàn)PropTypes進(jìn)行類型檢查是很必要的祖凫，如果父組件傳給子組件的參數(shù)不符合PropTypes配置琼蚯，控制臺就會報錯，給出錯誤信息惠况，這樣可以快速定位問題遭庶。
另外通過defaultProps為props定義默認(rèn)值時，類型檢查也會應(yīng)用在 defaultProps 上面稠屠，因為類型檢查發(fā)生在 defaultProps 賦值之后峦睡。
使用說明請查看官方文檔：https://doc.react-china.org/docs/typechecking-with-proptypes.html
React中獲取真實DOM節(jié)點或 React 元素時使用Refs
獲取在 render 方法中創(chuàng)建的 DOM 節(jié)點或 React 元素時，最好使用“回調(diào) ref”的方式权埠，不要用DOM操作也不要用舊版 API：String 類型的 Refs
render() {
return (
//回調(diào)ref
<input ref={input => this.inputRef = input}/>
//string類型的ref
<input ref=“inputRef”/>
);
}
不要在函數(shù)式組件中使用ref屬性來進(jìn)行回調(diào)函數(shù)的綁定榨了，因為函數(shù)式組件是沒有實例的，準(zhǔn)確的說函數(shù)式組件不是一個真正的類
React.Fragment組件的使用
在React中組件返回多個元素時要被一個元素包裹攘蔽，不然會報錯龙屉，我們通常用div元素，這個div元素沒有什么實際的意義，并且會在DOM中增加額外節(jié)點转捕，建議用React.Fragment組件作岖，不會增加額外的節(jié)點，目前key 是唯一可以傳遞給 Fragment 的屬性五芝。
render() {
return (
<React.Fragment>
<h1>React 文檔</h1>
<div>React內(nèi)容</div>
</React.Fragment>
);
}
