如何在子组件触发状态更改为父组件时防止父组件重新呈现

import React, { memo } from 'react';

const ParentComponent = () => {
  // 父组件的状态和状态更新函数
  const [parentState, setParentState] = useState('');

  // 子组件的状态更新函数
  const handleChildStateChange = (newState) => {
    setParentState(newState);
  };

  return (
    <div>
      <ChildComponent onStateChange={handleChildStateChange} />
    </div>
  );
};

const ChildComponent = memo(({ onStateChange }) => {
  // 子组件的状态和状态更新函数
  const [childState, setChildState] = useState('');

  const handleButtonClick = () => {
    const newState = 'New State';
    setChildState(newState);
    onStateChange(newState); // 触发父组件状态更新
  };

  return (
    <div>
      <button onClick={handleButtonClick}>Change State</button>
    </div>
  );
});

import React, { useState, useCallback } from 'react';

const ParentComponent = () => {
  // 父组件的状态和状态更新函数
  const [parentState, setParentState] = useState('');

  // 子组件的状态更新函数
  const handleChildStateChange = useCallback((newState) => {
    setParentState(newState);
  }, []);

  return (
    <div>
      <ChildComponent onStateChange={handleChildStateChange} />
    </div>
  );
};

const ChildComponent = ({ onStateChange }) => {
  // 子组件的状态和状态更新函数
  const [childState, setChildState] = useState('');

  const handleButtonClick = () => {
    const newState = 'New State';
    setChildState(newState);
    onStateChange(newState); // 触发父组件状态更新
  };

  return (
    <div>
      <button onClick={handleButtonClick}>Change State</button>
    </div>
  );
};