React性能优化：避免不必要渲染，提升组件渲染效率

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

• • • 使用PureComponent或React.memo
    • 合理使用shouldComponentUpdate
    • 使用Immutable数据结构
    • 优化列表渲染
    • 其他优化措施

在React应用开发中，随着应用规模的增大，组件数量和数据量的增加，渲染性能问题可能逐渐凸显。避免不必要的渲染是提高React组件渲染效率的关键，以下是一些常见的优化方法。

使用PureComponent或React.memo

• PureComponent：React提供了 PureComponent 类，它会对 props 和 state 进行浅比较。只有当 props 或 state 的值发生变化时，才会触发组件重新渲染。例如，创建一个简单的 PureCounter 组件：

import React, { PureComponent } from'react';

class PureCounter extends PureComponent {
state = {
count: 0
};

handleClick = () => {
this.setState(prevState => ({ count: prevState.count + 1 }));
};

render() {
console.log('PureCounter rendered');
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.handleClick}>Increment</button>
</div>
);
}
}

export default PureCounter;

在这个例子中，PureCounter 组件继承自 PureComponent。当点击按钮更新 count 状态时，只有 count 的值发生变化才会触发重新渲染，其他无关的 props 或 state 变化不会导致不必要的渲染。

• React.memo：对于函数式组件，React.memo 起到类似的作用。它是一个高阶组件，用于对函数式组件进行 memoization 优化。例如，创建一个 MemoizedButton 函数式组件：

import React from'react';

const MemoizedButton = React.memo(({ label, onClick }) => {
console.log('MemoizedButton rendered');
return <button onClick={onClick}>{label}</button>;
});

export default MemoizedButton;

React.memo 会默认对组件的 props 进行浅比较，只有当 props 发生变化时才重新渲染组件。

合理使用shouldComponentUpdate

对于类组件，如果 PureComponent 的默认浅比较不能满足需求，可以手动实现 shouldComponentUpdate 方法来自定义更新逻辑。该方法接收 nextProps 和 nextState 作为参数，通过比较当前的 props 和 state 与即将更新的 nextProps 和 nextState，返回一个布尔值来决定组件是否需要更新。例如，在一个复杂的表单组件中，可能只需要在某些特定的 props 变化时才更新：

class FormComponent extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
// 仅当formData或isSubmitted发生变化时才更新组件
return this.props.formData!== nextProps.formData || this.props.isSubmitted!== nextProps.isSubmitted;
}

render() {
// 表单渲染逻辑
}
}

使用Immutable数据结构

Immutable数据结构一旦创建就不可变，任何对它的修改都会返回一个新的对象，而不是修改原对象。这使得在比较数据是否变化时更加高效，因为可以直接比较对象的引用。React中有一些库可以帮助使用Immutable数据结构，如 immutable-js。例如，使用 immutable-js 来管理组件的状态：

import React from'react';
import { Map } from 'immutable';

class ImmutableComponent extends React.Component {
state = {
data: Map({ name: 'John', age: 30 })
};

handleUpdate = () => {
// 使用Immutable的更新方式
this.setState(prevState => ({
data: prevState.data.set('age', prevState.data.get('age') + 1)
}));
};

render() {
console.log('ImmutableComponent rendered');
const { data } = this.state;
return (
<div>
<p>Name: {data.get('name')}</p>
<p>Age: {data.get('age')}</p>
<button onClick={this.handleUpdate}>Update Age</button>
</div>
);
}
}

export default ImmutableComponent;

在这个例子中，state 中的 data 使用了 immutable-js 的 Map 类型。当更新 age 时，会返回一个新的 Map 对象，通过引用比较可以准确判断数据是否发生变化，避免了不必要的渲染。

优化列表渲染

• 使用key属性：在渲染列表时，为每个列表项提供一个唯一的 key 属性。key 有助于React识别哪些列表项发生了变化、添加或删除，从而更高效地更新列表。例如，渲染一个用户列表：

import React from'react';

const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' }
];

const UserList = () => {
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
};

export default UserList;

• 虚拟列表：当列表数据量非常大时，可以使用虚拟列表技术。虚拟列表只渲染可见区域的列表项，而不是一次性渲染所有项。当用户滚动列表时，动态加载和渲染新的可见项。有一些React库可以帮助实现虚拟列表，如 react-virtualized 和 react-window。

其他优化措施

• 组件拆分与懒加载：将大型组件拆分成多个小型组件，并且使用懒加载来延迟加载不常用的组件。这样可以减少初始渲染的工作量，提高页面的加载速度。例如，使用 React.lazy 和 Suspense 来实现组件的懒加载：

import React, { lazy, Suspense } from'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

const App = () => {
return (
<div>
<Suspense fallback={<div>Loading…</div>}>
<LazyComponent />
</Suspense>
</div>
);
};

export default App;

• 避免内联函数定义：在 render 方法中避免定义内联函数，因为每次渲染时都会创建新的函数实例，导致组件的 props 看起来发生了变化，从而可能触发不必要的渲染。可以将函数定义在组件外部或者使用 useCallback 钩子来缓存函数。

通过以上这些方法的综合运用，可以有效地避免React组件的不必要渲染，提高组件的渲染效率，从而提升整个应用的性能和用户体验。在实际开发中，需要根据具体的应用场景和性能瓶颈，选择合适的优化方法，并进行不断的测试和调优。