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

Question

React 状态不应该直接改变。但是，如果状态是一个类的实例，它应该可以通过自己的方法进行更改。除了必须使用新参数深度克隆和重新实例化对象之外，还有其他方法吗？
一般来说:在父组件中创建的类对象在子组件中使用的 react 方式是什么，同时将其属性保持在父状态(通过 Prop /上下文传递)？
样本类

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

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

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>
  );
};

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

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
  };
}