React.js中如何在useEffect触发和未触发时分别执行不同函数

你原本的写法无法实现预期效果，useEffect 本身不会返回表示是否触发的布尔值，它的返回值为可选的清理函数，不能直接用于if条件判断。

要实现「hello变化时执行指定函数、未变化时执行另一函数」的需求，核心思路是通过useRef存储上一次渲染的hello值，每次渲染时对比当前值和历史值即可判断是否发生变化，具体实现如下：

基础实现（无副作用场景） #

如果要执行的函数为纯计算逻辑，可直接在组件顶层做判断：

import { useEffect, useRef } from 'react';

function YourComponent({ hello }) {
  // 初始化存储上一次的hello值
  const prevHelloRef = useRef(hello);

  // 逻辑判断
  if (hello === prevHelloRef.current) {
    // hello未变化时调用的函数
    handleUnchanged();
  } else {
    // hello变化时调用的函数
    handleChanged();
  }

  // 渲染完成后更新历史值，供下一次渲染对比
  useEffect(() => {
    prevHelloRef.current = hello;
  }, [hello]);

  // 剩余组件逻辑
  return <div>{hello}</div>;
}

优化实现（含副作用场景） #

如果要执行的函数包含修改状态、发送请求、操作DOM等副作用操作，不要直接放在组件顶层执行，避免重复渲染导致多次触发，可调整为以下写法：

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

function YourComponent({ hello }) {
  const prevHelloRef = useRef(hello);

  // 用useCallback包裹函数，避免不必要的触发
  const handleChanged = useCallback(() => {
    // 示例：hello变化时的逻辑
    console.log('hello已更新，执行对应操作');
  }, []);

  const handleUnchanged = useCallback(() => {
    // 示例：hello未变化时的逻辑
    console.log('hello无更新，执行对应操作');
  }, []);

  // 所有逻辑放在useEffect中执行
  useEffect(() => {
    if (hello === prevHelloRef.current) {
      handleUnchanged();
    } else {
      handleChanged();
    }
    // 更新历史值
    prevHelloRef.current = hello;
  }, [hello, handleChanged, handleUnchanged]);

  return <div>{hello}</div>;
}

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