React.useMemo 与 React.useState

Question

我看到其他人询问useState + useEffect 。 但我想知道这两个实现中未更改的（const）变量有什么不同：

function optionA(){
  const [Mesh]  = useState(()=> new Mesh)
  
 return "...someRender"
}

function optionB(){
 const Mesh = useMemo(()=> new Mesh)

 return "...someRender"
}

编辑：

我知道useRef(someValue)更适合这个，但我发现它“不明确地”在任何地方写Mesh.current

Answer 1

关键是你说“不变”的地方。 在 state 中设置一个永远不会改变的值是没有意义的。 state 的目的是保存信息，这些信息在更改时会导致渲染更新。 如果你从不改变它，就没有理由把它放在 state 中。

但是，不要为此使用useMemo 。 从文档中：

您可能依赖 useMemo 作为性能优化，而不是语义保证。 将来，React 可能会选择“忘记”一些以前记忆的值并在下一次渲染时重新计算它们，例如为屏幕外组件释放 memory。 编写您的代码，使其在没有useMemo的情况下仍能正常工作——然后添加它以优化性能。

（他们的重点）

如果您有想要在组件的整个生命周期内静态保存的信息，请使用useRef而不是useMemo ：

function Example() {
    const refMesh = useRef(null);
    if (!refMesh.current) {
        // One-time initialization
        refMesh.current = new Mesh();
    }
    const mesh = refMesh.current;
    // ...use `mesh` from here on out...
}

与useMemo不同，您可以确定在组件的生命周期内只会创建一个Mesh实例。 （这还有一个小优点，即您不必不断创建 function 来在每次渲染时传递useMemo 。）

我有时会使用存储 object 的单个 ref 来保存不适合 state 的多条实例信息（包括子组件的稳定回调函数）。 这很方便。

---

重新编辑：

我知道useRef(someValue)更适合这个，但我发现它“不明确地”在任何地方写Mesh.current

你不知道。 见const mesh = refMesh.current; 在上面，您将在整个组件的其余部分使用mesh而不是refMesh.current 。

如果你发现if很尴尬，你可以将它包装在一个钩子中，它提供了useMemo不提供的语义保证，代价是在每个渲染上创建一个 function（与useMemo ， useCallback等）：

const useData = (instanceInitializer) => {
    const ref = useRef(null);
    if (!ref.current) {
        ref.current = instanceInitializer();
    }
    return ref.current;
};

那么它将是：

function Example() {
    const mesh = useData(() => new Mesh());
    // ...use `mesh` from here on out...
}

与 function 的创建相比，这有（非常）轻微的额外成本，但更好的人体工程学。