面试题：React优化嵌套列表渲染性能

性能优化方面

避免不必要的重渲染
- 使用React.memo：对于函数式组件，可以使用React.memo来包裹组件。它会对组件的props进行浅比较，如果props没有变化，组件将不会重新渲染。例如：

import React from'react';

const MyComponent = React.memo((props) => {
    return <div>{props.value}</div>;
});

export default MyComponent;

shouldComponentUpdate：对于类组件，可以在类组件中定义shouldComponentUpdate(nextProps, nextState)方法。在这个方法中，手动比较当前和下一个props或state，如果没有变化，返回false来阻止不必要的重渲染。例如：

import React, { Component } from'react';

class MyClassComponent extends Component {
    shouldComponentUpdate(nextProps, nextState) {
        return this.props.value!== nextProps.value || this.state.someValue!== nextState.someValue;
    }
    render() {
        return <div>{this.props.value}</div>;
    }
}

export default MyClassComponent;

利用虚拟列表技术
- 原理：虚拟列表只渲染可视区域内的列表项，而不是渲染全部列表项。当用户滚动时，动态更新可视区域的列表项。这样可以显著减少渲染的DOM节点数量，提高性能。
- 常用库：如react - virtualized或react - window。以react - virtualized为例，其List组件可以实现虚拟列表。

虚拟列表实现代码示例（使用react - virtualized）

安装依赖：

npm install react - virtualized

代码示例：

import React from'react';
import { List } from'react - virtualized';

// 假设这是大量数据
const data = Array.from({ length: 10000 }, (_, i) => `Item ${i}`);

const rowRenderer = ({ index, key, style }) => {
    return (
        <div key={key} style={style}>
            {data[index]}
        </div>
    );
};

const MyVirtualList = () => {
    return (
        <List
            height={400}
            rowCount={data.length}
            rowHeight={50}
            rowRenderer={rowRenderer}
            width={300}
        />
    );
};

export default MyVirtualList;

在上述代码中，react - virtualized的List组件通过rowRenderer函数来渲染每一行数据。height指定了列表容器的高度，rowCount表示数据的总数量，rowHeight表示每一行的高度，width指定了列表容器的宽度。这样，在大量数据的情况下，只有可视区域内的列表项会被渲染，提升了渲染性能。

星途面试题库

面试题：React优化嵌套列表渲染性能

知识考点

面试题答案

性能优化方面

虚拟列表实现代码示例（使用react - virtualized）