如何在React的setState中调用类的setter方法？相关实践探讨

一、能否在setState中调用类的setter？可行吗？ #

可行，但不能直接修改状态里的uiConfig实例后调用setter——因为React状态依赖引用不可变性，直接修改实例内部属性不会触发重渲染。必须先创建实例的副本，在副本上调用setter，再把副本作为新状态传入setUiConfig。

二、具体实现方式 #

方式1：基于原实例创建新实例 #

通过原实例的配置和组件列表初始化新的Global实例，再调用setter，最后更新状态：

// 更新配置的示例
const updateConfig = (newConfig: AddConfig) => {
  setUiConfig(prev => {
    // 基于原配置创建新实例
    const newGlobal = new Global({...prev.config});
    // 复制原组件列表
    newGlobal.components = [...prev.components];
    // 调用setter合并配置
    newGlobal.setConfig = newConfig;
    return newGlobal;
  });
};

// 添加组件的示例
const addComponent = (component: AddComponent) => {
  setUiConfig(prev => {
    const newGlobal = new Global({...prev.config});
    newGlobal.components = [...prev.components];
    try {
      newGlobal.setComponent = component;
    } catch (e) {
      console.error("添加组件失败：", e);
      return prev; // 出错时返回原状态，避免状态异常
    }
    return newGlobal;
  });
};

方式2：给Global类添加克隆方法 #

在Global类中实现一个clone方法，用来创建实例的深拷贝，再在拷贝上调用setter：

// 在Global类中添加克隆方法
public clone(): Global {
  // 深拷贝config和components，根据实际类型调整拷贝方式
  const clonedConfig = JSON.parse(JSON.stringify(this.config));
  const clonedComponents = JSON.parse(JSON.stringify(this.components));
  const cloned = new Global(clonedConfig);
  cloned.components = clonedComponents;
  return cloned;
}

然后使用：

const updateConfig = (newConfig: AddConfig) => {
  setUiConfig(prev => {
    const cloned = prev.clone();
    cloned.setConfig = newConfig;
    return cloned;
  });
};

三、这种做法算不算最佳实践？ #

不算。原因如下：

• React状态设计更适配普通对象/数组，自定义类实例的不可变性维护成本高，很容易不小心写出可变操作，导致React无法检测状态变化，不触发重渲染。
• 类的setter方法直接修改实例内部状态，违背了React的不可变数据范式，容易引发难以追踪的状态不一致问题。
• 类实例在React DevTools中展示不直观，序列化、调试都比普通对象麻烦。

四、最优实现方式：改用普通状态+纯函数 #

把Global类的逻辑拆解成普通状态对象和纯函数，完全贴合React的状态管理模式：

1. 定义状态类型 #

interface UiState {
  config: Config;
  components: Component[];
}

2. 初始化状态 #

const [uiState, setUiState] = useState<UiState>({
  config: initialConfig, // 你的初始配置
  components: []
});

3. 实现纯函数替代类方法 #

// 深合并配置的纯函数
const deepMergeConfig = (target: Config, source: AddConfig): Config => {
  const merged = {...target};
  for (const key in source) {
    if (typeof source[key] === 'object' && source[key] !== null && key in merged) {
      merged[key as keyof Config] = deepMergeConfig(merged[key as keyof Config] as any, source[key] as any);
    } else {
      merged[key as keyof Config] = source[key] as any;
    }
  }
  return merged;
};

// 添加组件的纯函数，返回新数组和错误信息
const addComponent = (components: Component[], newComponent: AddComponent): {newComponents: Component[], error?: Error} => {
  const tempComponent = {...newComponent};
  if (!tempComponent.id) {
    tempComponent.id = `UI__${nanoid()}`;
  }
  if (components.some(c => c.id === tempComponent.id)) {
    return {
      newComponents: components,
      error: new Error("两个组件不能拥有相同的id")
    };
  }
  return {newComponents: [...components, tempComponent]};
};

4. 更新状态 #

// 更新配置
const updateConfig = (newConfig: AddConfig) => {
  setUiState(prev => ({
    ...prev,
    config: deepMergeConfig(prev.config, newConfig)
  }));
};

// 添加组件
const handleAddComponent = (component: AddComponent) => {
  setUiState(prev => {
    const {newComponents, error} = addComponent(prev.components, component);
    if (error) {
      console.error(error);
      return prev;
    }
    return {...prev, components: newComponents};
  });
};

这种方式的优势：

• 完全遵循React不可变数据原则，状态变化清晰，React能准确触发重渲染。
• 纯函数独立于状态，更容易测试、调试和复用。
• 普通对象状态在DevTools中展示直观，序列化也更简单。

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