面试题：React动态增删列表项时的性能优化策略

可能出现的性能问题

渲染性能问题：每次增删操作都会触发重新渲染，大量列表项会导致渲染时间变长，影响用户体验。因为React默认会重新渲染整个组件树，即使只有部分数据发生变化。
内存占用问题：频繁的增删操作可能导致内存频繁分配和释放，引发内存抖动，严重时甚至导致页面卡顿。

性能优化策略

虚拟DOM：
- 原理：React使用虚拟DOM来减少直接操作真实DOM的次数。当数据发生变化时，React会先构建新的虚拟DOM树，与旧的虚拟DOM树进行对比，通过Diff算法找出差异，然后只更新变化的部分到真实DOM上。
- 应用：在这个项目中，React的虚拟DOM机制已经内置并自动工作。但开发过程中要确保数据结构的合理设计，避免不必要的深层嵌套，以减少Diff算法的复杂度，提高更新效率。例如尽量扁平化数据结构，避免多层嵌套对象。
shouldComponentUpdate：
- 原理：在类组件中，shouldComponentUpdate方法用于控制组件是否需要重新渲染。它接收新的props和state作为参数，返回一个布尔值。如果返回true，则组件会重新渲染；返回false，则阻止组件重新渲染。
- 应用：对于列表项组件（假设是类组件），可以在shouldComponentUpdate方法中通过比较新旧props和state，判断只有当与列表项相关的关键数据（如标识、内容等）发生变化时才返回true进行重新渲染。例如：

class ListItem extends React.Component {
    shouldComponentUpdate(nextProps, nextState) {
        return this.props.item.id!== nextProps.item.id || this.props.item.content!== nextProps.item.content;
    }
    render() {
        return <div>{this.props.item.content}</div>;
    }
}

memo：
- 原理：React.memo是一个高阶组件，用于对函数组件进行浅比较优化。它会自动比较组件的props，如果props没有变化，就不会重新渲染该组件。
- 应用：对于列表项函数组件，可以使用React.memo进行包裹。例如：

const ListItem = React.memo(({ item }) => {
    return <div>{item.content}</div>;
});

使用唯一稳定的key值：
- 原理：在渲染列表时，为每个列表项提供一个唯一稳定的key值。React利用key来识别列表项，在增删操作时可以更高效地更新列表，避免不必要的重新渲染。
- 应用：确保列表项的key值在其生命周期内保持唯一且稳定。例如使用数据库中的唯一ID作为key，而不是使用数组索引。

const listItems = data.map(item => <ListItem key={item.id} item={item} />);

批量更新：
- 原理：React默认会批量处理状态更新，以减少不必要的重新渲染。但在某些情况下（如在原生事件处理函数中调用setState），React不会批量更新。
- 应用：可以使用unstable_batchedUpdates（React 18之前）或React 18之后自带的自动批处理机制。例如在原生事件处理函数中，手动进行批量更新：

import React, { useState } from'react';
import ReactDOM from'react-dom';
import { unstable_batchedUpdates } from'react-dom';

function App() {
    const [list, setList] = useState([]);
    const handleClick = () => {
        unstable_batchedUpdates(() => {
            setList([...list, { id: Date.now(), content: 'new item' }]);
            setList(list.filter(item => item.id!== 1));
        });
    };
    return (
        <div>
            <button onClick={handleClick}>操作列表</button>
            {list.map(item => <div key={item.id}>{item.content}</div>)}
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));

星途面试题库

面试题：React动态增删列表项时的性能优化策略

知识考点

面试题答案

可能出现的性能问题

性能优化策略