React：设置key，实现部分render

最新推荐文章于 2024-08-03 09:04:16 发布

原创最新推荐文章于 2024-08-03 09:04:16 发布 · 434 阅读

0 ·

CC 4.0 BY-SA版权

React 专栏收录该内容

54 篇文章

订阅专栏

本文详细讲解了在React应用中如何通过为列表项设置唯一key来提升渲染性能。探讨了state中包含persons数组时，利用person.id作为key的重要性，避免不必要的组件重绘，提高应用程序响应速度。

在state中增加id参数

state={
    persons:[
      {id:'asfa1', name:'Max' , age:28},
      {id:'asfa2', name:'manu' , age:24},
      {id:'asfa3', name:'Snie' , age:26}
    ],
    isshow:false
  };

为person设置key

if(this.state.isshow){
    person=(
      <div>
        {
          this.state.persons.map((person,index)=>{
            return <Person 
                    name={person.name}
                    age={person.age}
                    click={this.deletePersonHandler.bind(this,index)}
                    key={person.id}
                    />
          })
        }
      </div>
    );
  }else{
    person=null;
  }