useEffect()：行为

Question

我在做我的工作，我想知道为什么useEffect会在useState()变量以默认值开头时检测到更改，以及如何防止这种变化。

  const [startDate, setStartDate] = useState(0);

  useEffect(() => {
  console.log(startDate)
  }, [startDate])

首先呈现值为0的useEffect，如何防止useEffect检测默认值？

Answer 1

默认情况下，useEffect在组件挂载上运行。

为了防止出现这种情况，您需要使用一个ref来告诉您它是否是第一个效果。

const isMountedRef = useRef(false)

useEffect(()=>{
    if(isMountedRef.current)
        console.log(startDate)
    else
        isMountedRef.current=true
},[startDate])

您可以在自定义钩子中提取逻辑。

const useUpdateEffect=(effect, deps)=>{
    const isMountedRef = useRef(false)

    useEffect(()=>{
        if(isMountedRef.current)
            effect()
        else
            isMountedRef.current=true
    },deps)
}

并按以下方式使用

useUpdateEffect(()=>{
    console.log(startDate)
},[startDate])

Answer 2

const [startDate, setStartDate] = useState(0);

  useEffect(() => {
    if (startDate != 0) {
      console.log(startDate)
    }
  })

这将检测当值为0时所期望的更改(默认值)。