我们可以结合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` 的值,从而触发子组件的重新渲染过程。
标签:useRef,const,counter,react,prevCounterRef,useState,组件,监听 From: https://www.cnblogs.com/johnnyzhao/p/17495907.html