在开发 React 应用时，组件重复渲染是个常见问题，它会拖慢应用速度，影响用户体验。下面咱们就来聊聊怎么避免组件重复渲染，提升应用流畅度。
一、理解组件重复渲染
在 React 里，组件重复渲染就是同一个组件在不必要的时候多次重新渲染。打个比方，有个显示用户信息的组件，当页面上其他不相关的部分更新时，这个组件也跟着重新渲染，这就属于重复渲染。
示例（React 技术栈）
// 定义一个简单的组件
function UserInfo() {
console.log('UserInfo 组件渲染');
return <div>用户信息</div>;
}
// 父组件
function App() {
const [count, setCount] = React.useState(0);
return (
<div>
{/* 点击按钮增加 count 的值 */}
<button onClick={() => setCount(count + 1)}>增加计数</button>
{/* 这里 UserInfo 组件会随着 count 的变化而重复渲染 */}
<UserInfo />
</div>
);
}
// 渲染 App 组件
ReactDOM.render(<App />, document.getElementById('root'));
在这个例子中，每次点击按钮，count 的值会改变，App 组件会重新渲染，同时 UserInfo 组件也会跟着重新渲染，尽管 UserInfo 组件和 count 没有任何关系。
二、找出重复渲染的原因
1. 状态更新
当组件的状态发生变化时，组件会重新渲染。如果状态更新过于频繁，就会导致重复渲染。
示例（React 技术栈）
function Counter() {
const [count, setCount] = React.useState(0);
// 每秒更新一次 count 的值
React.useEffect(() => {
const interval = setInterval(() => {
setCount(count + 1);
}, 1000);
return () => clearInterval(interval);
}, [count]);
console.log('Counter 组件渲染');
return <div>计数: {count}</div>;
}
ReactDOM.render(<Counter />, document.getElementById('root'));
在这个例子中，Counter 组件的 count 状态每秒更新一次，导致组件每秒都会重新渲染。
2. 父组件重新渲染
当父组件重新渲染时，它的子组件也会跟着重新渲染。
示例（React 技术栈）
function Child() {
console.log('Child 组件渲染');
return <div>子组件</div>;
}
function Parent() {
const [count, setCount] = React.useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>增加计数</button>
{/* 父组件重新渲染时，子组件也会重新渲染 */}
<Child />
</div>
);
}
ReactDOM.render(<Parent />, document.getElementById('root'));
在这个例子中，点击按钮会更新 Parent 组件的 count 状态，导致 Parent 组件重新渲染，同时 Child 组件也会跟着重新渲染。
三、避免组件重复渲染的方法
1. 使用 React.memo
React.memo 是一个高阶组件，它可以对组件进行浅比较，如果组件的 props 没有发生变化，就不会重新渲染。
示例（React 技术栈）
// 使用 React.memo 包装组件
const MemoizedUserInfo = React.memo(function UserInfo({ name }) {
console.log('UserInfo 组件渲染');
return <div>用户姓名: {name}</div>;
});
function App() {
const [count, setCount] = React.useState(0);
const name = '张三';
return (
<div>
<button onClick={() => setCount(count + 1)}>增加计数</button>
{/* 即使 count 变化，只要 name 不变，MemoizedUserInfo 组件就不会重新渲染 */}
<MemoizedUserInfo name={name} />
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
在这个例子中，MemoizedUserInfo 组件使用 React.memo 进行包装，只有当 name 属性发生变化时，组件才会重新渲染。
2. 使用 React.useMemo 和 React.useCallback
React.useMemo 用于缓存计算结果，React.useCallback 用于缓存函数。
示例（React 技术栈）
function ExpensiveComponent({ data }) {
// 模拟一个耗时的计算
const result = React.useMemo(() => {
console.log('进行耗时计算');
return data.reduce((acc, val) => acc + val, 0);
}, [data]);
console.log('ExpensiveComponent 组件渲染');
return <div>计算结果: {result}</div>;
}
function App() {
const [count, setCount] = React.useState(0);
const data = [1, 2, 3, 4, 5];
// 使用 useCallback 缓存函数
const handleClick = React.useCallback(() => {
setCount(count + 1);
}, [count]);
return (
<div>
<button onClick={handleClick}>增加计数</button>
{/* 只要 data 不变，ExpensiveComponent 组件就不会重新计算结果 */}
<ExpensiveComponent data={data} />
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
在这个例子中，React.useMemo 缓存了计算结果，只有当 data 发生变化时，才会重新计算。React.useCallback 缓存了 handleClick 函数，避免每次 App 组件重新渲染时都创建新的函数。
3. 拆分组件
将大组件拆分成多个小组件，这样可以减少不必要的重新渲染。
示例（React 技术栈）
// 拆分成两个小组件
function Header() {
console.log('Header 组件渲染');
return <div>头部</div>;
}
function Content() {
console.log('Content 组件渲染');
return <div>内容</div>;
}
function App() {
const [count, setCount] = React.useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>增加计数</button>
{/* 只有 Header 组件和 Content 组件的 props 发生变化时，才会重新渲染 */}
<Header />
<Content />
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
在这个例子中，将 App 组件拆分成 Header 和 Content 两个小组件，当 count 变化时，只有 App 组件会重新渲染，Header 和 Content 组件不会重新渲染，除非它们的 props 发生变化。
四、应用场景
1. 列表渲染
在渲染大量列表时，避免列表项的重复渲染可以显著提升性能。
示例（React 技术栈）
function ListItem({ item }) {
console.log('ListItem 组件渲染');
return <div>{item}</div>;
}
const MemoizedListItem = React.memo(ListItem);
function List() {
const items = ['苹果', '香蕉', '橙子'];
return (
<div>
{items.map((item, index) => (
<MemoizedListItem key={index} item={item} />
))}
</div>
);
}
ReactDOM.render(<List />, document.getElementById('root'));
在这个例子中，使用 React.memo 包装 ListItem 组件，避免列表项的重复渲染。
2. 表单组件
在表单组件中，避免不必要的重新渲染可以提升用户输入的响应速度。
示例（React 技术栈）
function InputComponent({ value, onChange }) {
console.log('InputComponent 组件渲染');
return <input value={value} onChange={onChange} />;
}
const MemoizedInputComponent = React.memo(InputComponent);
function Form() {
const [inputValue, setInputValue] = React.useState('');
const handleChange = (e) => {
setInputValue(e.target.value);
};
return (
<div>
<MemoizedInputComponent value={inputValue} onChange={handleChange} />
</div>
);
}
ReactDOM.render(<Form />, document.getElementById('root'));
在这个例子中，使用 React.memo 包装 InputComponent 组件，只有当 value 或 onChange 发生变化时，组件才会重新渲染。
五、技术优缺点
优点
- 提升性能：避免组件重复渲染可以减少不必要的计算和渲染，提高应用的流畅度。
- 节省资源：减少了 CPU 和内存的使用，降低了设备的负担。
- 提高用户体验：应用响应速度更快，用户操作更加流畅。
缺点
- 增加代码复杂度：使用
React.memo、React.useMemo和React.useCallback等方法会增加代码的复杂度，需要开发者对 React 有更深入的理解。 - 可能导致意外结果：如果浅比较的逻辑不正确，可能会导致组件不更新或更新不及时。
六、注意事项
- 正确使用 key：在列表渲染时，要为每个列表项提供唯一的
key，这样 React 才能正确识别每个列表项，避免不必要的重新渲染。 - 避免传递新对象：尽量避免在每次渲染时传递新的对象或函数作为 props，因为这会导致组件重新渲染。可以使用
React.useMemo和React.useCallback来缓存对象和函数。 - 谨慎使用 React.memo：
React.memo只进行浅比较，如果组件的 props 是复杂对象，可能需要自定义比较函数。
七、文章总结
在 React 开发中，避免组件重复渲染是提升应用流畅度的关键。通过理解组件重复渲染的原因，使用 React.memo、React.useMemo 和 React.useCallback 等方法，以及合理拆分组件，可以有效地避免组件重复渲染。同时，要注意正确使用 key，避免传递新对象，谨慎使用 React.memo。在实际开发中，要根据具体的应用场景选择合适的优化方法，以达到最佳的性能提升效果。
评论