reactjs - useRef 只读值仅在初始化时

Question

转向功能性 React 组件，useRef 似乎是镜像类级别变量的方式。考虑:

class Component extends React.Component<Props> {
    private readonly foo: Something<Props>

    constructor(props: Props) {
      super(props)
      this.foo = new Something<Props>(props)
    }
}

在这种情况下，无法重新分配 foo 的值。

const Component : React.FunctionComponent<Props> = (props: Props) => {
    const foo = useRef(new Something<Props>(props));
    return null;
};

在这种情况下，foo.current 是可变的，因为 useRef 返回一个 MutableRefObject。而且它每次都会初始化，这是我不想要的。是否有内置的东西使它们不可变？

Answer 1

Hooks FAQ 包含关于 How to create expensive objects lazily 的部分.您可以使用 callback signature of useState() 达到您想要的效果:

const Component : React.FunctionComponent<Props> = (props: Props) => {
    const [foo] = React.useState(() => new Something<Props>(props) as const);
    return null;
};