如何避免useEffect首次渲染默认触发，仅在计数≥1时执行逻辑

问题原因 #

useEffect 天生会在组件首次挂载完成后执行一次，之后再每次监听的依赖项发生变化时重新执行，你现在的依赖是num，所以组件刚加载完num初始值为0的时候就会触发弹窗逻辑。

解决方案 #

三种实现方式按需选择即可： #

方案1：useEffect内加判断（最简单快速）

直接在useEffect回调里加条件过滤，只有num >= 1时才执行弹窗逻辑，修改后代码如下：

import React, { useEffect, useState } from 'react';

function Demo() {
  const [num, setNum] = useState(0)

  const change = () => {
    setNum(num + 1)
  }

  useEffect(() => {
    if (num >= 1) {
      alert(`item clicked ${num} times`)
    }
  }, [num])

  return(
    <div>
      <h1>{num}</h1>
      <button onClick={change}>Count</button>
    </div>
  )
}

export default Demo;

方案2：用ref标记首次渲染（通用兼容方案）

如果后续逻辑复杂度提升，有多个依赖需要跳过首次执行场景，可以用ref变量做全局标记，避免重复写值判断：

import React, { useEffect, useState, useRef } from 'react';

function Demo() {
  const [num, setNum] = useState(0)
  const isFirstMount = useRef(true)

  const change = () => {
    setNum(num + 1)
  }

  useEffect(() => {
    // 首次渲染直接跳过，更新标记
    if (isFirstMount.current) {
      isFirstMount.current = false
      return
    }
    alert(`item clicked ${num} times`)
  }, [num])

  return(
    <div>
      <h1>{num}</h1>
      <button onClick={change}>Count</button>
    </div>
  )
}

export default Demo;

方案3：直接把弹窗写在点击事件里（性能最优）

如果你的弹窗逻辑仅和点击动作绑定，完全可以不用依赖useEffect，直接把逻辑写到点击回调里，彻底避免生命周期执行问题：

import React, { useState } from 'react';

function Demo() {
  const [num, setNum] = useState(0)

  const change = () => {
    const newNum = num + 1
    setNum(newNum)
    alert(`item clicked ${newNum} times`)
  }

  return(
    <div>
      <h1>{num}</h1>
      <button onClick={change}>Count</button>
    </div>
  )
}

export default Demo;

内容的提问来源于stack exchange，提问作者user15793040