如何避免useEffect在特定事件触发时执行？

当然可以实现这个需求，给你几个实用的方案：

方案1：拆分状态 #

把原本的myState拆成两个独立状态，分别对应需要触发useEffect和不需要触发的场景，职责划分清晰，逻辑简单直观：

import { useState, useEffect } from 'react';

function MyComponent() {
  // 此状态更新会触发useEffect
  const [triggerState, setTriggerState] = useState(0);
  // 此状态更新不会触发useEffect
  const [nonTriggerState, setNonTriggerState] = useState(0);

  useEffect(() => {
    console.log('执行useEffect逻辑');
  }, [triggerState]);

  return (
    <div>
      <button onClick={() => setTriggerState(prev => prev + 1)}>Button1（触发）</button>
      <button onClick={() => setNonTriggerState(prev => prev + 1)}>Button2（不触发）</button>
    </div>
  );
}

方案2：用标记变量控制逻辑执行 #

如果必须共用同一个状态，可通过useRef存储标记，区分本次更新是否需要执行useEffect的核心逻辑：

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

function MyComponent() {
  const [myState, setMyState] = useState(0);
  const shouldTrigger = useRef(true);

  useEffect(() => {
    if (!shouldTrigger.current) {
      shouldTrigger.current = true; // 重置标记，避免影响下一次更新
      return;
    }
    // 这里是需要执行的核心逻辑
    console.log('执行useEffect逻辑');
  }, [myState]);

  return (
    <div>
      <button onClick={() => {
        shouldTrigger.current = true;
        setMyState(prev => prev + 1);
      }}>Button1（触发）</button>
      <button onClick={() => {
        shouldTrigger.current = false;
        setMyState(prev => prev + 1);
      }}>Button2（不触发）</button>
    </div>
  );
}

方案3：给状态附加元信息（进阶） #

把状态改成对象格式，携带更新来源的标记，在useEffect里通过判断标记决定是否执行逻辑，适合复杂场景：

import { useState, useEffect } from 'react';

function MyComponent() {
  const [myState, setMyState] = useState({ value: 0, source: '' });

  useEffect(() => {
    if (myState.source === 'button1') {
      console.log('执行useEffect逻辑');
    }
  }, [myState]);

  return (
    <div>
      <button onClick={() => setMyState({
        value: myState.value + 1,
        source: 'button1'
      })}>Button1（触发）</button>
      <button onClick={() => setMyState({
        value: myState.value + 1,
        source: 'button2'
      })}>Button2（不触发）</button>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Aris Setya Bhakti