PureComponent -效能優化案例
阿新 • • 發佈：2021-08-12
importReact,{PureComponent}from'react'
exportdefaultclassAppextendsPureComponent{ constructor(props){ super(props) this.state={ friends:[ {name:"lilei",age:20}, {name:"lily",age:25}, {name:"tom",age:30} ] } } render(){ return( <div> <h2>好友列表</h2> <ul> { this.state.friends.map((item,index)=>{ return( <likey={index}> 姓名：{item.name}， 年齡：{item.age}， <buttononClick={e=>this.incrementAge(index)}>age+1</button> </li> ) }) } </ul> <buttononClick={e=>this.insertDate()}>新增資料</button> </div> ) }
//shouldComponentUpdate(nextProps,nextState){ //if(nextState.friends!==this.state.friends){ //returntrue; //} //returnfalse; //} insertDate(){ letnewFriends=[...this.state.friends]; newFriends.push({name:"Eric",age:28}) this.setState({ friends:newFriends }) }
incrementAge(index){ letnewFriends=[...this.state.friends]; newFriends[index].age+=1 this.setState({ friends:newFriends }) }
} 我是Eric,手機號是13522679763
exportdefaultclassAppextendsPureComponent{ constructor(props){ super(props) this.state={ friends:[ {name:"lilei",age:20}, {name:"lily",age:25}, {name:"tom",age:30} ] } } render(){ return( <div> <h2>好友列表</h2> <ul> { this.state.friends.map((item,index)=>{ return( <likey={index}> 姓名：{item.name}， 年齡：{item.age}， <buttononClick={e=>this.incrementAge(index)}>age+1</button> </li> ) }) } </ul> <buttononClick={e=>this.insertDate()}>新增資料</button> </div> ) }
//shouldComponentUpdate(nextProps,nextState){ //if(nextState.friends!==this.state.friends){ //returntrue; //} //returnfalse; //} insertDate(){ letnewFriends=[...this.state.friends]; newFriends.push({name:"Eric",age:28}) this.setState({ friends:newFriends }) }
incrementAge(index){ letnewFriends=[...this.state.friends]; newFriends[index].age+=1 this.setState({ friends:newFriends }) }
} 我是Eric,手機號是13522679763