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

Posted 2023-06-21 Keep Learning

我们可以结合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` 的值，从而触发子组件的重新渲染过程。