列表渲染优化
- 由于 diff 算法在比较的时候默认情况下只会进行同层同位置的比较
- 所以在渲染列表时可能会存在性能问题
往后添加元素
往前添加元素
让 diff 算法递归比较同层所有元素
- 给列表元素添加 key, 告诉 React 除了和同层同位置比, 还需要和同层其它位置比
官方文档:https://zh-hans.reactjs.org/docs/reconciliation.html#the-diffing-algorithm
App.js:
import React from 'react';
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
heroList: ['鲁班', '虞姬', '黄忠']
}
}
render() {
return (
<div>
<ul>{
this.state.heroList.map(name => {
return <li key={name}>{name}</li>
})
}</ul>
<button onClick={() => {
this.btnClick()
}}>按钮
</button>
</div>
)
}
btnClick() {
this.setState({
heroList: ['阿珂', this.state.heroList]
})
}
}
class App extends React.Component {
render() {
return (
<div>
<Home/>
</div>
)
}
}
export default App;
key 注意点
- 如果列表中出现相同的 key, 所以我们必须保证列表中 key 的取值唯一,否则会报错