如何避免父组件重新渲染，子组件也跟着渲染

最新推荐文章于 2024-06-21 11:40:44 发布

珊珊而川

最新推荐文章于 2024-06-21 11:40:44 发布

阅读量466

点赞数 4

文章标签： react.js

本文链接：https://blog.csdn.net/weixin_63681863/article/details/138897494

版权

当父组件重新渲染时，通常情况下，子组件也会跟着重新渲染。但是，有一些方法可以避免这种情况发生，让子组件在父组件重新渲染时不进行渲染。以下是五种常见的方法：

使用 React.memo 或 PureComponent：
- 使用 React.memo（函数组件）或 PureComponent（类组件）来包裹子组件。这些高阶组件会对组件的 props 进行浅比较，如果 props 没有变化，就不会触发重新渲染。

const MemoizedComponent = React.memo(MyComponent);
// or
class MyComponent extends React.PureComponent {
  // Component definition
}

将子组件的 props 抽离到父组件外部：
- 将会导致子组件重新渲染的 props 放到父组件外部，以确保在父组件重新渲染时，子组件不会收到变化的 props。

const parentProps = { ... };
function ParentComponent() {
  return <ChildComponent {...parentProps} />;
}

使用 useCallback：
- 使用 useCallback 将回调函数进行记忆化，以确保在父组件重新渲染时，回调函数不会改变引用，从而避免触发子组件的重新渲染。

const memoizedCallback = useCallback(() => {
  // Callback implementation
}, [dependency]);

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

使用 React Context：
- 使用 React Context 将父组件的状态提升到共享的上下文中，以确保在父组件重新渲染时，子组件不会重新渲染，除非它们依赖于上下文中的变化。

这些方法可以根据实际情况和需求来选择和组合使用，以达到在父组件重新渲染时不触发子组件重新渲染的目的。

关注