面试题：React 列表条件渲染中的性能优化

Question

在 React 应用中，有一个长列表，其中每个列表项根据某个复杂条件进行条件渲染。随着用户交互，这个条件可能频繁变化，导致列表重新渲染。请阐述如何在这种情况下优化性能，避免不必要的渲染，并给出关键代码片段。

Answer 1

优化方法

1. 使用 React.memo：对于列表项组件，使用 React.memo 包裹，它会浅比较 props，如果 props 没有变化，组件不会重新渲染。这适用于列表项根据 props 中的条件进行渲染的情况。
2. shouldComponentUpdate：在类组件中，可以通过重写 shouldComponentUpdate 方法来自定义组件是否需要更新。通过对比前后的 props 和 state，只有在真正需要更新时才返回 true。
3. 虚拟列表：对于长列表，使用虚拟列表技术，只渲染当前视口可见的列表项。这样可以显著减少渲染的 DOM 数量，提升性能。常用的库有 react - virtualized 或 react - window。

关键代码片段

1. React.memo 示例

import React from'react';

const ListItem = React.memo(({ item, complexCondition }) => {
    if (complexCondition) {
        return <li>{item}</li>;
    }
    return null;
});

const LongList = ({ data, complexCondition }) => {
    return (
        <ul>
            {data.map((item, index) => (
                <ListItem key={index} item={item} complexCondition={complexCondition} />
            ))}
        </ul>
    );
};

export default LongList;

2. 虚拟列表示例（以 react - window 为例）

import React from'react';
import { FixedSizeList as List } from'react - window';

const ListItem = React.memo(({ index, data, complexCondition }) => {
    const item = data[index];
    if (complexCondition) {
        return <div>{item}</div>;
    }
    return null;
});

const LongList = ({ data, complexCondition }) => {
    const rowCount = data.length;
    const rowHeight = 50;

    return (
        <List
            height={rowCount * rowHeight}
            rowCount={rowCount}
            rowHeight={rowHeight}
            width={300}
        >
            {({ index }) => (
                <ListItem index={index} data={data} complexCondition={complexCondition} />
            )}
        </List>
    );
};

export default LongList;

3. shouldComponentUpdate 示例（类组件）

import React, { Component } from'react';

class ListItem extends Component {
    shouldComponentUpdate(nextProps) {
        return this.props.complexCondition!== nextProps.complexCondition || this.props.item!== nextProps.item;
    }

    render() {
        const { item, complexCondition } = this.props;
        if (complexCondition) {
            return <li>{item}</li>;
        }
        return null;
    }
}

class LongList extends Component {
    render() {
        const { data, complexCondition } = this.props;
        return (
            <ul>
                {data.map((item, index) => (
                    <ListItem key={index} item={item} complexCondition={complexCondition} />
                ))}
            </ul>
        );
    }
}

export default LongList;