在React状态中使用类实例的问题及优化方案咨询

首先，咱们得先搞清楚为什么你最初的写法不生效：React的useState是通过引用的变化来判断状态是否更新，从而触发重渲染的。你直接修改同一个Booper实例的boops属性，然后把同一个实例传给setBooper，React发现前后状态的引用完全一样，就会认为“状态没变化”，自然不会重渲染。

你的克隆方案是可行的，但确实每次点击都会创建一个新的实例对象——不过在大多数普通场景下，这种开销其实可以忽略，现代JS引擎的垃圾回收机制处理这类小对象效率很高，不会有明显性能问题。但如果你的组件会频繁触发更新（比如每秒几十次），那确实可以考虑更优的方案，下面分几种情况给你推荐：

1. 放弃类实例，直接用原始值/普通对象（最推荐） #

React的状态设计本来就更适合用不可变的原始类型（数字、字符串、布尔）或者普通对象，这种写法最简洁，也完全符合React的最佳实践：

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  const [boops, setBoops] = useState(0);
  
  const handleClick = () => {
    // 用函数式更新更安全，避免闭包问题
    setBoops(prevBoops => prevBoops + 1);
  };

  return (
    <div>
      {boops}<br/>
      <button onClick={handleClick}>Boop! :)</button><br/>
    </div>
  );
};

ReactDOM.render(<App />, document.querySelector("#root"));

如果你的类里有多个状态属性，比如除了boops还有其他值，那可以用普通对象存状态，更新时用扩展运算符创建新对象：

const App = () => {
  const [booperState, setBooperState] = useState({ boops: 0, otherProp: 'foo' });
  
  const handleClick = () => {
    setBooperState(prev => ({
      ...prev,
      boops: prev.boops + 1
    }));
  };
  // ...
};

2. 用useReducer管理复杂状态 #

如果你的状态更新逻辑比较复杂（比如有多种操作类型、多个关联属性），useReducer会比useState更合适，它天然支持不可变更新，也能把状态逻辑和组件UI分离：

import React, { useReducer } from 'react';
import ReactDOM from 'react-dom';

// 定义reducer函数，处理所有状态更新逻辑
const booperReducer = (state, action) => {
  switch (action.type) {
    case 'BOOP':
      return { ...state, boops: state.boops + 1 };
    case 'RESET':
      return { ...state, boops: 0 };
    case 'UPDATE_OTHER':
      return { ...state, otherProp: action.payload };
    default:
      return state;
  }
};

const App = () => {
  // 初始化状态，和你的类实例属性对应
  const [booperState, dispatch] = useReducer(booperReducer, { boops: 0, otherProp: 'bar' });
  
  const handleClick = () => {
    dispatch({ type: 'BOOP' });
  };

  const handleReset = () => {
    dispatch({ type: 'RESET' });
  };

  return (
    <div>
      {booperState.boops}<br/>
      <button onClick={handleClick}>Boop! :)</button><br/>
      <button onClick={handleReset}>Reset</button><br/>
    </div>
  );
};

ReactDOM.render(<App />, document.querySelector("#root"));

3. 必须保留类封装？用useRef+强制更新 #

如果你确实需要保留Booper类的封装逻辑（比如类里有方法需要复用），那可以把类实例存在useRef里，然后用一个无关的状态变量来触发重渲染——这样就不用每次克隆实例了：

import React, { useState, useRef } from 'react';
import ReactDOM from 'react-dom';

class Booper { 
  constructor(){ 
    this.boops = 0; 
  }

  // 假设类里有自定义方法
  reset() {
    this.boops = 0;
  }
}

const App = () => {
  // 用useRef保存类实例，引用不会随重渲染变化
  const booperRef = useRef(new Booper());
  // 用一个空对象作为触发重渲染的信号，每次更新传新对象即可
  const [, forceUpdate] = useState({});

  const handleClick = () => {
    // 直接修改useRef里的实例属性
    booperRef.current.boops += 1;
    // 触发重渲染：传一个新的空对象，让React检测到状态变化
    forceUpdate({});
  };

  const handleReset = () => {
    booperRef.current.reset();
    forceUpdate({});
  };

  return (
    <div>
      {booperRef.current.boops}<br/>
      <button onClick={handleClick}>Boop! :)</button><br/>
      <button onClick={handleReset}>Reset</button><br/>
    </div>
  );
};

ReactDOM.render(<App />, document.querySelector("#root"));

这种方案的好处是不用频繁创建新的类实例，垃圾回收的压力更小，适合需要频繁更新的场景。

总结一下 #

• 简单状态优先用原始类型的useState，最直观高效；
• 复杂状态用useReducer，代码更易维护；
• 必须保留类逻辑时，用useRef+forceUpdate的组合，避免克隆开销。

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