React-组件-列表渲染优化

列表渲染优化

• 由于 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 的取值唯一，否则会报错