React:当只有子组件需要重新渲染时，我如何防止父组件在鼠标移动上重新渲染状态改变？

import React from 'react';

const ChildComponent = React.memo(({ data }) => {
  // 子组件的渲染逻辑
});

const ParentComponent = () => {
  const [state, setState] = React.useState();

  return (
    <div onMouseMove={() => { /* 鼠标移动处理逻辑 */ }}>
      <ChildComponent data={state} />
    </div>
  );
};

export default ParentComponent;

import React from 'react';

class ChildComponent extends React.Component {
  // 子组件的渲染逻辑

  shouldComponentUpdate(nextProps) {
    return this.props.data !== nextProps.data;
  }
}

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  handleMouseMove() {
    // 鼠标移动处理逻辑
  }

  render() {
    return (
      <div onMouseMove={this.handleMouseMove}>
        <ChildComponent data={this.state} />
      </div>
    );
  }
}

export default ParentComponent;