React中利用 key 實現組件重新渲染

最近在項目實踐中，發現react中可以利用key實現子組件的重新渲染，具體場景：需要切換下拉菜單時，對應的榜單也要替換成該輪的數據

代碼如下

render()
{
    let {round, sid} = this.state;  //round表示選中的菜單的索引

    return (
        <div className="record-wrap">
            <Header share={this.goShare}/>
            <DropDown data={this.getDropDownData()} selectedIndex={round - 1} showMenu={false}
                      onChange={this.fetchData}/>
            {$content}
            <FansRank key={round} round={round} sid={sid}/>
        </div>
    )
}

FansRank是引入的榜單業務組件，開始時沒有使用key，改變DropDown組件的選中值，雖然把索引值round傳遞給了FansRank組件，但是FansRank並不會重新渲染。
但是給FansRank加上key標識之後，可以實現切換菜單，FansRank重新渲染，即時更新。

我們一般使用key都是在列表中，必須加上key標識，不然會報警告，但是key也可以給自定義的組件加，起到標識的作用。

【key 的作用】
react 中的 key 屬性，它是一個特殊的屬性，它是出現不是給開發者用的，而是給 react 自己用的。
react 利用 key 來識別組件，它是一種身份標識。每個 key 對應一個組件，相同的 key ，react 認爲是同一個組件，這樣後續相同 key 對應的組件都不會被創建，而是會被傳入新的數據，更新組件。
有了 key 屬性後，就可以與組件建立了一種對應關係，react 根據 key 來決定是銷燬重新創建組件還是更新組件。

• key 相同，若組件屬性有所變化，則 react 只更新組件對應的屬性；沒有變化則不更新。
• key 值不同，則 react 先銷燬該組件( 有狀態組件的componentWillUnmount會執行 )，然後重新創建該組件（ 有狀態組件的constructor和componentWillUnmount都會執行 ）。