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都会执行 ）。