当前位置：首页 > news >正文

【React篇】父组件渲染时避免重复渲染子组件的3种处理方法

news 来源：原创 2024/9/29 23:34:37

在 React 中，父组件渲染时要避免重复渲染子组件，可以使用以下方法：

使用 React.memo（仅适用于函数式组件）或 PureComponent（适用于类组件）：
这些方法可以帮助你创建在接收到新的 props 时仅在有必要的情况下重新渲染的组件。它们通过浅比较新旧 props 来判断是否需要重新渲染。

对于函数式组件：

import React from 'react';const ChildComponent = React.memo(function({ prop }) {// 子组件渲染逻辑
});export default ChildComponent;

对于类组件：

import React, { PureComponent } from 'react';class ChildComponent extends PureComponent {// 子组件渲染逻辑
}export default ChildComponent;

使用 shouldComponentUpdate 生命周期方法（适用于类组件）：
这个方法允许你在子组件渲染之前自定义是否进行渲染的逻辑。你需要返回一个布尔值，表示是否应该继续渲染。

import React, { Component } from 'react';class ChildComponent extends Component {shouldComponentUpdate(nextProps, nextState) {// 比较新旧 props，如果相同则不重新渲染return this.props !== nextProps || this.state !== nextState;}// 子组件渲染逻辑
}export default ChildComponent;

使用 React.useMemo 和 React.useCallback Hooks（适用于函数式组件）：
这两个 Hooks 可以帮助你分别缓存值和函数，以避免不必要的重新渲染。

例如，如果你有一个依赖于父组件状态的事件处理程序，你可以使用 useCallback 来确保事件处理程序在父组件状态未更改时保持不变：

import React, { useCallback } from 'react';function ParentComponent() {const [parentState, setParentState] = useState('initial');const handleClick = useCallback(() => {console.log('Parent state:', parentState);}, [parentState]);return (<div><button onClick={handleClick}>Click me</button><ChildComponent onClick={handleClick} /></div>);
}function ChildComponent({ onClick }) {// 子组件渲染逻辑
}export default ParentComponent;