在前端开发领域，React是一个被广泛使用的 JavaScript 库，它让我们能够创建可复用的 UI 组件。不过，有时候 React 组件可能会出现重复渲染的情况，这就会影响到应用的性能。接下来，咱们就来深入探讨一下 React 组件重复渲染的性能优化实践。
一、认识 React 组件重复渲染
在 React 里，组件渲染是一个常规操作。每当组件的状态（state）或者属性（props）发生变化的时候，组件就会重新渲染。可要是这些重新渲染没有必要，那就会导致性能问题。
举个例子：
// React 17 及以下版本
import React, { Component } from 'react';
class ExampleComponent extends Component {
// 初始化状态
state = {
count: 0
};
// 处理点击事件的函数
handleClick = () => {
// 更新状态，点击按钮时增加 count 的值
this.setState({ count: this.state.count + 1 });
};
render() {
console.log('组件重新渲染了');
return (
<div>
{/* 显示 count 的值 */}
<p>Count: {this.state.count}</p>
{/* 绑定点击事件，点击按钮触发 handleClick 函数 */}
<button onClick={this.handleClick}>增加计数</button>
</div>
);
}
}
export default ExampleComponent;
// 在 React 18 及以上版本
import React, { useState } from 'react';
const ExampleComponent = () => {
// 使用 useState 钩子初始化 count 状态
const [count, setCount] = useState(0);
// 处理点击事件的函数
const handleClick = () => {
// 更新 count 状态，点击按钮时增加 count 的值
setCount(count + 1);
};
console.log('组件重新渲染了');
return (
<div>
{/* 显示 count 的值 */}
<p>Count: {count}</p>
{/* 绑定点击事件，点击按钮触发 handleClick 函数 */}
<button onClick={handleClick}>增加计数</button>
</div>
);
};
export default ExampleComponent;
在这个例子中，每次点击按钮的时候，setState（旧版本）或者setCount（新版本）都会触发组件的重新渲染，即便有的时候重新渲染没必要。
二、应用场景
1. 列表渲染
当我们需要渲染一个很长的列表时，要是每次列表中有小的改动，所有列表项都重新渲染，那性能肯定会受到影响。比如一个电商网站的商品列表，当用户刷新商品评价的时候，要是所有商品都重新渲染，页面响应就会变慢。
2. 复杂组件嵌套
假如一个组件嵌套了很多子组件，当父组件的状态有变化，所有子组件都重新渲染，即便有些子组件的状态和属性并没有改变。就像一个大型的管理系统，页面上有很多子模块，当某个小模块数据更新时，没必要让整个页面所有模块重新渲染。
三、优化方法及示例（React 技术栈）
1. 使用 React.memo（函数组件）
React.memo 是一个高阶组件，它能够记忆组件的渲染结果。只有当组件的 props 发生变化时，组件才会重新渲染。
示例如下：
import React from 'react';
// 使用 React.memo 包裹组件
const MemoizedComponent = React.memo((props) => {
return (
<div>
{/* 显示接收到的 name 属性值 */}
<p>Name: {props.name}</p>
</div>
);
});
const ParentComponent = () => {
const [count, setCount] = React.useState(0);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
{/* 显示 count 的值 */}
<p>Count: {count}</p>
<button onClick={handleClick}>增加计数</button>
{/* 传递静态的 name 属性给 MemoizedComponent */}
<MemoizedComponent name="John" />
</div>
);
};
export default ParentComponent;
在这个例子中，MemoizedComponent 组件只会在 props.name 改变的时候重新渲染，即便 ParentComponent 中的 count 状态发生变化，MemoizedComponent 也不会重新渲染。
2. 使用 shouldComponentUpdate（类组件）
在类组件中，shouldComponentUpdate 是一个生命周期方法。我们可以在这个方法里定义组件是否需要重新渲染的条件。
示例如下：
import React, { Component } from 'react';
class MyComponent extends Component {
// 初始化状态
state = {
count: 0
};
// 判断是否需要重新渲染的函数
shouldComponentUpdate(nextProps, nextState) {
// 只有当 nextState.count 不等于当前的 this.state.count 时才重新渲染
return nextState.count!== this.state.count;
}
handleClick = () => {
// 更新状态，点击按钮时增加 count 的值
this.setState({ count: this.state.count + 1 });
};
render() {
console.log('组件渲染了');
return (
<div>
{/* 显示 count 的值 */}
<p>Count: {this.state.count}</p>
<button onClick={this.handleClick}>增加计数</button>
</div>
);
}
}
export default MyComponent;
在这个例子中，shouldComponentUpdate 方法只有在 count 状态改变的时候才会返回 true，也就是只有在 count 改变时组件才会重新渲染。
3. 使用 PureComponent
PureComponent 是一个类组件，它已经实现了浅比较。当组件的 state 或者 props 发生浅变化时，组件会重新渲染。
示例如下：
import React, { PureComponent } from 'react';
class PureExample extends PureComponent {
// 初始化状态
state = {
count: 0
};
handleClick = () => {
// 更新状态，点击按钮时增加 count 的值
this.setState({ count: this.state.count + 1 });
};
render() {
console.log('组件渲染了');
return (
<div>
{/* 显示 count 的值 */}
<p>Count: {this.state.count}</p>
<button onClick={this.handleClick}>增加计数</button>
</div>
);
}
}
export default PureExample;
这个例子中，PureExample 组件会自动进行浅比较，只有当 count 状态改变时才会重新渲染。
四、技术优缺点
1. React.memo
优点：用起来很简单，能有效避免不必要的渲染，对性能提升明显。 缺点：只能进行浅比较，如果 props 是复杂对象，可能不准确。
2. shouldComponentUpdate
优点：自定义程度高，我们可以根据具体业务逻辑来决定是否重新渲染。 缺点：需要手动编写比较逻辑，代码会变复杂，要是逻辑写错就会影响正确性。
3. PureComponent
优点：实现了自动浅比较，代码简洁。 缺点：同样是浅比较，对于复杂对象的比较会有局限性。
五、注意事项
1. 浅比较的局限性
前面提到的几种方法基本都是浅比较，对于嵌套的对象或者数组，浅比较可能无法正确判断内容是否改变。比如：
import React, { useState } from 'react';
const MyNestedComponent = () => {
const [data, setData] = useState({ items: [1, 2, 3] });
const handleClick = () => {
// 错误的更新方式，浅比较会认为对象未改变
data.items.push(4);
setData(data);
};
return (
<div>
<button onClick={handleClick}>添加元素</button>
</div>
);
};
export default MyNestedComponent;
在这个例子中，直接修改 data.items 数组，因为是浅比较，React 会认为 data 对象没有改变，不会触发重新渲染。正确的做法是创建一个新对象：
import React, { useState } from 'react';
const MyNestedComponent = () => {
const [data, setData] = useState({ items: [1, 2, 3] });
const handleClick = () => {
// 正确的更新方式，创建新对象
const newData = {
...data,
items: [...data.items, 4]
};
setData(newData);
};
return (
<div>
<button onClick={handleClick}>添加元素</button>
</div>
);
};
export default MyNestedComponent;
2. 函数引用问题
在 React 中，每次渲染都会创建新的函数引用。要是把函数作为 props 传递给子组件，可能会导致子组件不必要的重新渲染。可以使用 useCallback 来解决这个问题。
示例如下：
import React, { useState, useCallback } from 'react';
const ChildComponent = React.memo(({ onClick }) => {
console.log('子组件渲染了');
return (
<button onClick={onClick}>点击我</button>
);
});
const Parent = () => {
const [count, setCount] = useState(0);
// 使用 useCallback 缓存函数
const handleClick = useCallback(() => {
setCount(count + 1);
}, [count]);
return (
<div>
<p>Count: {count}</p>
<ChildComponent onClick={handleClick} />
</div>
);
};
export default Parent;
六、文章总结
在 React 开发中，组件的重复渲染是一个常见的性能问题。我们可以根据不同的场景选择合适的优化方法，比如函数组件使用 React.memo，类组件使用 shouldComponentUpdate 或者 PureComponent。同时，要注意浅比较的局限性和函数引用问题，避免因为这些问题导致优化失效。通过合理运用这些优化方法，能够显著提升 React 应用的性能，让用户有更好的体验。
评论