React Hooks问题：类属性变化时useEffect为何未触发？

核心原因 #

React的组件重新渲染和useEffect的依赖检测，仅对React state/props的变化做出响应。你的GoodsSetupWizardController是普通JavaScript类实例，它的step属性变化不属于React的状态管理机制：

1. 修改类实例的step不会触发组件重新渲染，useEffect根本没有机会执行依赖检查；
2. 即便组件偶然重新渲染，React对依赖的浅比较也无法感知到类实例内部属性的变化（因为实例本身的引用没改）。

解决办法 #

方案1：将step迁移至React State（推荐）

把step从类实例中抽离，用useState管理，让step的变化触发组件重新渲染，useEffect就能正常响应依赖变化。

1. 组件中初始化State并创建类实例：

import { useState, useMemo } from 'react';

const ProductSetup = ({ product, initialStep }) => {
  const [step, setStep] = useState(initialStep);
  
  // 用useMemo避免每次渲染都创建新的类实例
  const productSetupWizard = useMemo(() => new GoodsSetupWizardController({
    product,
    step,
    setStep // 把setStep传入类用于更新状态
  }), [product, step]);

  // ...其他组件逻辑
};

2. 修改类的构造函数和increaseDecreaseStep方法：

class GoodsSetupWizardController {
  constructor(props) {
    this.product = props.product;
    this.step = props.step;
    this.setStep = props.setStep; // 接收setStep方法
  }

  increaseDecreaseStep(direction) {
    switch (direction) {
      case '+':
        this.setStep(prev => prev + 1); // 通过setStep更新React State
        break;
      case '-':
        this.setStep(prev => prev - 1);
        break;
      default:
        throw new Error();
    }
  }

  // ...其他原有方法
}

3. 调整useEffect的依赖：

useEffect(() => {
  // ...你的业务逻辑
}, [step]); // 直接依赖React State中的step

方案2：重构为自定义Hook（更符合React设计理念）

放弃类的写法，用自定义Hook封装向导逻辑，天然适配React状态管理：

import { useState } from 'react';

const useGoodsSetupWizard = (product, initialStep) => {
  const [step, setStep] = useState(initialStep);

  const getComponent = (currentStep) => {
    // ...原有getComponent逻辑
  };

  const isNextButtonDisabled = (currentStep) => {
    // ...原有isNextButtonDisabled逻辑
  };

  const needsNextStepToBeSkipped = (direction) => {
    // ...原有needsNextStepToBeSkipped逻辑
  };

  const increaseDecreaseStep = (direction) => {
    switch (direction) {
      case '+':
        setStep(prev => prev + 1);
        break;
      case '-':
        setStep(prev => prev - 1);
        break;
      default:
        throw new Error();
    }
  };

  return {
    step,
    getComponent,
    isNextButtonDisabled,
    needsNextStepToBeSkipped,
    increaseDecreaseStep
  };
};

组件中使用：

const ProductSetup = ({ product, initialStep }) => {
  const { step, increaseDecreaseStep, getComponent } = useGoodsSetupWizard(product, initialStep);

  useEffect(() => {
    // ...你的业务逻辑
  }, [step]);

  // ...其他组件渲染逻辑
};

方案3：手动触发重新渲染（不推荐，仅作兼容参考）

如果无法重构类，可通过useRef保存实例，并用一个空State触发重新渲染：

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

const ProductSetup = ({ product, initialStep }) => {
  const [dummy, setDummy] = useState(0);
  const wizardRef = useRef(null);

  // 初始化类实例
  useEffect(() => {
    wizardRef.current = new GoodsSetupWizardController({
      product,
      step: initialStep
    });
  }, [product]);

  // 修改step后手动触发渲染
  const updateStep = (direction) => {
    wizardRef.current.increaseDecreaseStep(direction);
    setDummy(prev => prev + 1); // 通过修改dummy触发组件重新渲染
  };

  useEffect(() => {
    // ...你的业务逻辑
  }, [wizardRef.current?.step, dummy]); // 依赖dummy确保渲染时能获取最新step

  // ...其他组件逻辑
};

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