使用 React ref 存储类实例？

Question

React Refs 最常见的用途是存储 DOM 元素。然而，React 文档表明 refs 可以用来存储任何不可变的值，所以我想知道是否有人能够实现类的实际实例并将其分配给 ref。例如：

// Example class
class MyBlueCar {
  constructor(options) {

  }
  ...
}

// React component
import { MyBlueCar } from "./mybluecar.js";

function StartCar() {
  const startEngineRef = useRef();

  useEffect(() => {
    const myBlueCar = new MyBlueCar();
    startEngineRef.startEngine = myBlueCar
  }, []);
}

但是我收到startEngineRef is not extensible错误。

Answer 1

refstartEngineRef是只读的。startEngineRef.current是可变的。

startEngineRef.current.startEngine = myBlueCar

对于您的情况，您可以考虑

const startEngine = React.useMemo(() => new MyBlueCar(), [])

如果您只想在组件的整个生命周期中拥有一个实例。