是否有一种反应方式可以将可变类实例对象存储在状态中？

Question

不应直接改变 React 状态。但是，如果状态是一个类的实例，它应该可以通过自己的方法进行更改。除了必须使用新参数深度克隆和重新实例化对象之外，还有其他方法吗？

一般来说：在父组件中创建的类对象在子组件中使用同时保持其属性在父状态（通过 props/context 传递）的反应方式是什么？

示例类

class Car{
    constructor(data){
        this.data = data
    }
    changeColor = (newcolor) => this.data.color = newcolor
}

示例父组件

const App = ({data}) => {
 const [car, setCar] = useState(new Car(data))
  return (
    <div>
      <CarViewer car={car} />
    </div>
  );
};

示例子组件

const CarViewer = ({car}) => {
  return (
    <div>
      The color is: {car.data.color}
    <button onClick={()=>car.changeColor("blue")}>Change color to blue </button>
    </div>
  );
};

Answer 1

我认为您需要做的是改变您将类存储在反应状态中的心理模型，并尝试像这样的不同模型，这种模型更具反应方式：

const CarViewer = ({ carData, changeColor }) => {
  return (
    <div>
      The color is: {carData.color}
      <button onClick={() => changeColor("blue")}>Change color to blue</button>
    </div>
  );
};

const App = ({ data }) => {
  const [carData, setCarData] = useState(data);

  const changeColor = (newcolor) =>
    setCarData((data) => ({ ...data, color: newcolor }));

  return (
    <div>
      <CarViewer carData={carData} changeColor={changeColor} />
    </div>
  );
};

编辑：根据您的评论，我认为您需要的是这样的自定义钩子：

const App = ({ data }) => {
  const { carData, changeColor } = useCar(data);
  
  return (
    <div>
      <CarViewer carData={carData} changeColor={changeColor} />
    </div>
  );
};

function useCar(defaultData = {}) {
  const [carData, setCarData] = useState(defaultData);

  const changeColor = (newcolor) =>
    setCarData((data) => ({ ...data, color: newcolor }));

  return {
    carData,
    changeColor,
    //... your other methods
  };
}