如何仅在特定setState()调用时触发useEffect()执行？

可行实现方案 #

方案1：新增独立的触发标识状态 #

你可以额外声明一个独立的状态变量存储是否需要触发副作用的标识，和原状态var分开存储，完全不会污染原状态的值：

export const HookComponent = () => {
  const [var, setVar] = useState(null);
  // 新增独立的触发标识状态，默认不触发
  const [shouldRunEffect, setShouldRunEffect] = useState(false);

  // 封装自定义的set方法，支持传入触发标识
  const setVarWithFlag = (newValue, needTriggerEffect = false) => {
    setVar(newValue);
    setShouldRunEffect(needTriggerEffect);
  };

  useEffect(() => {
    // 只有标识为true时才执行目标逻辑
    if (shouldRunEffect) {
      // do things
      // 执行完重置标识，避免后续非必要触发
      setShouldRunEffect(false);
    }
  }, [var, shouldRunEffect]);

  // 调用示例：
  // 需要触发副作用时：setVarWithFlag('newVal', true)
  // 不需要触发时：setVarWithFlag('newVal')
}

该方案逻辑直观，符合React Hook的常规使用范式，无黑盒逻辑，调试成本低。

方案2：使用useRef存储触发标记（无额外渲染开销） #

如果你不想新增状态导致额外的重渲染，可以用useRef存储标记，ref的更新不会触发组件重渲染：

export const HookComponent = () => {
  const [var, setVar] = useState(null);
  const effectFlagRef = useRef(false);

  const setVarWithFlag = (newValue, needTriggerEffect = false) => {
    effectFlagRef.current = needTriggerEffect;
    setVar(newValue);
  };

  useEffect(() => {
    if (effectFlagRef.current) {
      // do things
      effectFlagRef.current = false;
    }
  }, [var]);
}

该方案不会产生额外的重渲染，性能更优，适合对渲染性能要求较高的场景。

方案3：封装自定义Hook复用逻辑 #

如果你需要在多个组件里用到这类能力，可以把逻辑封装成自定义Hook，直接复用：

// 自定义Hook
const useStateWithEffectFlag = (initialValue) => {
  const [state, setState] = useState(initialValue);
  const effectFlagRef = useRef(false);

  const setStateWithFlag = (newValue, needTriggerEffect = false) => {
    effectFlagRef.current = needTriggerEffect;
    setState(newValue);
  };

  const useCustomEffect = (callback) => {
    useEffect(() => {
      if (effectFlagRef.current) {
        callback();
        effectFlagRef.current = false;
      }
    }, [state, callback]);
  };

  return [state, setStateWithFlag, useCustomEffect];
};

// 组件内使用
export const HookComponent = () => {
  const [var, setVar, useVarEffect] = useStateWithEffectFlag(null);

  // 只有调用setVar传true的时候才会执行这里的逻辑
  useVarEffect(() => {
    // do things
  });
}

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