如何在 React 项目中优化列表渲染性能，避免不必要的重绘？

大白话如何在 React 项目中优化列表渲染性能，避免不必要的重绘？

在 React 项目里，要是列表数据量很大，每次数据变化都重新渲染列表，会严重影响性能。

1. 使用 `key` 属性

key 属性能帮助 React 识别哪些元素发生了变化，这样在更新列表时，React 就只更新那些真正改变的元素，而不是重新渲染整个列表。

import React from 'react';// 假设这是我们的数据列表
const data = [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' },{ id: 3, name: 'Charlie' },
];const ListComponent = () => {return (<ul>{/* 遍历数据列表，为每个列表项添加唯一的 key */}{data.map(item => (<li key={item.id}>{item.name}</li>))}</ul>);
};export default ListComponent;

在这个例子中，key 属性被设置为 item.id，因为 id 是唯一的，这样 React 就能准确知道哪些元素改变了。

2. 使用 `React.memo` 进行组件缓存

React.memo 是一个高阶组件，它能对组件进行浅比较，如果组件的 props 没有变化，就不会重新渲染。

import React from 'react';// 定义一个简单的列表项组件
const ListItem = React.memo(({ item }) => {// 这里返回列表项的 JSXreturn <li>{item.name}</li>;
});// 假设这是我们的数据列表
const data = [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' },{ id: 3, name: 'Charlie' },
];const ListComponent = () => {return (<ul>{/* 遍历数据列表，使用 ListItem 组件 */}{data.map(item => (<ListItem key={item.id} item={item} />))}</ul>);
};export default ListComponent;

在这个例子中，ListItem 组件被 React.memo 包裹，当 item props 没有变化时，这个组件就不会重新渲染。

3. 使用 `shouldComponentUpdate`（类组件）

在类组件中，可以使用 shouldComponentUpdate 生命周期方法来控制组件是否需要重新渲染。

import React from 'react';// 定义一个类组件作为列表项
class ListItem extends React.Component {// shouldComponentUpdate 方法，用于控制组件是否重新渲染shouldComponentUpdate(nextProps) {// 比较当前 props 和下一个 props 的 item 是否相同return this.props.item.name !== nextProps.item.name;}render() {// 这里返回列表项的 JSXreturn <li>{this.props.item.name}</li>;}
}// 假设这是我们的数据列表
const data = [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' },{ id: 3, name: 'Charlie' },
];const ListComponent = () => {return (<ul>{/* 遍历数据列表，使用 ListItem 组件 */}{data.map(item => (<ListItem key={item.id} item={item} />))}</ul>);
};export default ListComponent;

在这个例子中，shouldComponentUpdate 方法会比较当前的 item props 和下一个 item props 是否相同，如果相同就不重新渲染组件。

4. 虚拟列表

当列表数据量非常大时，可以使用虚拟列表只渲染用户可见区域的列表项，从而提高性能。下面是一个简单的虚拟列表示例：

import React, { useState } from 'react';// 假设这是我们的大数据列表
const bigData = Array.from({ length: 1000 }, (_, i) => ({ id: i, name: `Item ${i}` }));const VirtualList = () => {// 定义每个列表项的高度const itemHeight = 30;// 定义容器的高度const containerHeight = 300;// 定义显示的列表项数量const visibleItemCount = Math.floor(containerHeight / itemHeight);// 使用 useState 来管理滚动偏移量const [scrollOffset, setScrollOffset] = useState(0);// 计算开始索引const startIndex = Math.floor(scrollOffset / itemHeight);// 计算结束索引const endIndex = startIndex + visibleItemCount;// 截取可见区域的数据const visibleData = bigData.slice(startIndex, endIndex);return (<divstyle={{ height: containerHeight, overflowY: 'auto' }}onScroll={(e) => setScrollOffset(e.target.scrollTop)}>{/* 为不可见区域预留高度 */}<div style={{ height: startIndex * itemHeight }} />{/* 渲染可见区域的列表项 */}{visibleData.map(item => (<div key={item.id} style={{ height: itemHeight }}>{item.name}</div>))}{/* 为不可见区域预留高度 */}<div style={{ height: (bigData.length - endIndex) * itemHeight }} /></div>);
};export default VirtualList;

在这个例子中，VirtualList 组件只渲染用户可见区域的列表项，当用户滚动时，动态更新可见区域的数据，这样可以显著提高性能。

通过以上这些方法，就能在 React 项目中优化列表渲染性能，避免不必要的重绘。

除了使用 key 属性，还有哪些方法可以优化 React 列表渲染性能？

在 React 里，除了使用 key 属性，还有不少方法可以优化列表渲染性能，下面详细介绍：

1. 使用 React.memo 进行组件缓存

React.memo 是一个高阶组件，它可以对函数组件进行浅比较，若组件的 props 没有变化，就不会重新渲染该组件。

import React from 'react';// 使用 React.memo 包裹组件，对传入的 props 进行浅比较
const ListItem = React.memo(({ item }) => {// 渲染列表项return <li>{item.name}</li>;
});const data = [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' },{ id: 3, name: 'Charlie' }
];const ListComponent = () => {return (<ul>{/* 遍历数据数组，渲染列表项 */}{data.map(item => (<ListItem key={item.id} item={item} />))}</ul>);
};export default ListComponent;

在上述代码中，ListItem 组件被 React.memo 包裹。当 item 属性没有改变时，ListItem 组件不会重新渲染，以此减少不必要的渲染。

2. 类组件使用 shouldComponentUpdate

在类组件里，shouldComponentUpdate 生命周期方法能够控制组件是否重新渲染。你可以在这个方法里比较 props 和 state，依据比较结果决定是否重新渲染。

import React from 'react';class ListItem extends React.Component {// shouldComponentUpdate 方法，用于决定组件是否重新渲染shouldComponentUpdate(nextProps) {// 比较当前和下一个 props 的 item 属性return this.props.item.name!== nextProps.item.name;}render() {// 渲染列表项return <li>{this.props.item.name}</li>;}
}const data = [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' },{ id: 3, name: 'Charlie' }
];const ListComponent = () => {return (<ul>{/* 遍历数据数组，渲染列表项 */}{data.map(item => (<ListItem key={item.id} item={item} />))}</ul>);
};export default ListComponent;

在这个例子中，shouldComponentUpdate 方法会比较当前 props 和下一个 props 的 item.name 是否相同，若相同则不重新渲染组件。

3. 使用 PureComponent

React.PureComponent 和 React.Component 类似，但它自动实现了 shouldComponentUpdate 方法，会对 props 和 state 进行浅比较。

import React from 'react';// 继承 React.PureComponent
class ListItem extends React.PureComponent {render() {// 渲染列表项return <li>{this.props.item.name}</li>;}
}const data = [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' },{ id: 3, name: 'Charlie' }
];const ListComponent = () => {return (<ul>{/* 遍历数据数组，渲染列表项 */}{data.map(item => (<ListItem key={item.id} item={item} />))}</ul>);
};export default ListComponent;

在上述代码中，ListItem 组件继承自 React.PureComponent，当 props 或 state 发生浅层次的变化时，组件才会重新渲染。

4. 虚拟列表

当列表数据量非常大时，可采用虚拟列表技术，只渲染用户可见区域的列表项。

import React, { useState } from 'react';// 模拟大量数据
const bigData = Array.from({ length: 1000 }, (_, i) => ({ id: i, name: `Item ${i}` }));const VirtualList = () => {// 每个列表项的高度const itemHeight = 30;// 容器的高度const containerHeight = 300;// 可见列表项的数量const visibleItemCount = Math.floor(containerHeight / itemHeight);// 滚动偏移量状态const [scrollOffset, setScrollOffset] = useState(0);// 计算开始索引const startIndex = Math.floor(scrollOffset / itemHeight);// 计算结束索引const endIndex = startIndex + visibleItemCount;// 获取可见区域的数据const visibleData = bigData.slice(startIndex, endIndex);return (<divstyle={{ height: containerHeight, overflowY: 'auto' }}onScroll={(e) => setScrollOffset(e.target.scrollTop)}>{/* 为不可见区域预留高度 */}<div style={{ height: startIndex * itemHeight }} />{/* 渲染可见区域的列表项 */}{visibleData.map(item => (<div key={item.id} style={{ height: itemHeight }}>{item.name}</div>))}{/* 为不可见区域预留高度 */}<div style={{ height: (bigData.length - endIndex) * itemHeight }} /></div>);
};export default VirtualList;