useEffect（）：行为[关闭]答案

【问题标题】：useEffect(): behavior [closed]useEffect（）：行为[关闭]
【发布时间】：2021-04-18 17:14:19
【问题描述】：

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

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

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

useEffect首次渲染的值为0，如何防止useEffect检测到默认值？

【问题讨论】：

This 可能有帮助
useEffect 在组件安装时至少运行一次......它不会对具有初始值的useState 做出反应。
这能回答你的问题吗？ Make React useEffect hook not run on initial render
你可以随时在useEffect里面添加一个if来检查它是否是初始值

标签： javascript reactjs react-native redux

【解决方案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])

【讨论】：

【解决方案2】：

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

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

当值为 0（默认值）时，这将检测预期的变化

【讨论】：