React中利用 key 实现组件重新渲染
程序员文章站
2024-02-22 10:13:16
...
最近在项目实践中,发现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都会执行 )。
上一篇: 第一个Servlet程序
下一篇: 神奇的串口通信