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

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

1. 使用 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;

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

import React, { Component } from 'react';

class ChildComponent extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 比较新旧 props，如果相同则不重新渲染
    return this.props !== nextProps || this.state !== nextState;
  }

  // 子组件渲染逻辑
}

export default ChildComponent;

3. 使用 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;

通过使用这些方法，可以有效地避免子组件在父组件渲染时的重复渲染，从而提高应用程序的性能。