react学习，实现子组件监听父组件对像的变化

我们可以结合useEffet，useRef, useState来实现子组件监听父组件对像的变化：

import { useEffect, useRef, useState } from "react";

interface MyProps = {
  counter: number;
};

const MyChildComponent:React.FC<MyProps> = ({ counter }) => {
  const prevCounterRef = useRef<number>(counter);

  useEffect(() => {
    prevCounterRef.current = counter;
  }, [counter]);

  const isCounterIncreased = counter > prevCounterRef.current;

  return (
    <>
      <p>Current counter: {counter}</p>
      <p>Counter increased: {isCounterIncreased ? "Yes" : "No"}</p>
    </>
  );
};

//父组件
const MyParentComponent = () => {
  const [counter, setCounter] = useState<number>(0);
  const handleButtonClick = () => {
        setCounter(counter + 1);
    };

    return (
    <>
    <MyChildComponent counter={counter} />
    <button onClick={handleButtonClick}>Increase counter</button>
    </>
    );
};

　　以上例子，我们定义了一个名为 `MyChildComponent` 的子组件，并在组件的 props 中添加了一个名为 `counter` 的数字型变量。

　　在组件中，我们使用 `useRef` 钩子来声明 `prevCounterRef` 引用，并使用 `useEffect` 钩子在 `counter` 变化时更新 `prevCounterRef` 的值，然后将 `prevCounterRef` 的值与 `counter` 进行比较，以判断计数器是否被增加。

　　同时，在 `MyParentComponent` 中，我们定义了名为 `counter` 的状态，并将其传递给子组件的 `counter` 属性。

　　在父组件的按钮单击事件中，我们使用 `setCounter` 函数更新 `counter` 的值，从而触发子组件的重新渲染过程。