javascript - 我应该使用 useRef 来存储一次性初始化数据吗？

Question

今天使用 react 的 ref 可能有点令人困惑。
回到类组件的时代，文档中非常清楚。

我们应该将 refs 主要用于 DOM 元素 :

https://reactjs.org/docs/refs-and-the-dom.html

但是今天我们将钩子(Hook)与功能组件结合在一起。
我们正在使用useRef钩。

而且，这给我们带来了新的模式。使用 ref 包含 回调 , 或任何 数据 我们想保留(某种状态)但不需要重新渲染。
它是一个强大的 API，也出现在文档中:

https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables

所以现在 ref 可以用于:

存储可变数据

一种内存

但这些文档相互矛盾。并导致开发团队中的许多错误和冲突。

医生说了两件事，这是一个问题。

那么，在这样的情况下，“正确”的做法是什么？

const MyComponent = (props) => {
   const [myMap1, _] = useState(new Map());    // 1.
   const myMap2 = useMemo(()=> new Map(), []); // 2.
   const myMap3 = useRef(new Map());           // 3.

   ...
};

Answer 1

useMemo是声明性 performance optimization技术。
声明性的，因为它依赖于属于特定渲染的周围范围的状态或 Prop 依赖关系，并自动(重新)创建内存值。我们不必告诉 useMemo要做到这一点。useRef是任何值的可变存储盒，例如值更新独立于当前渲染范围。useRef没有任何依赖关系，因此不会自动更改任何值。您必须通过编写 ref.current = ... 手动执行此操作。 (DOM 节点是一个异常(exception))。
这就是为什么你可以看到 useRef作为进入命令世界的逃生口。
现在，我们可以尝试混合他们的usage interchangeably用于存储，例如:

// instead of 
const val = useMemo(() => 42, [myDep]); // 42 stands for some complex calculation
// do this
const ref = useRef();
ref.current = 42 // assign 42 imperatively to ref somewhere in render

甚至 replace useRef由 useState :

const [ref] = useState({current:null});
ref.current = "hello";

缺点:我们又回到了旧的 jQuery 时代:-)。操作必须强制设置，这意味着更多的手动工作和可能的错误。不可变的值操作也比突变更可预测(包括其他好处)。这就是为什么 React 中几乎所有东西都是不可变的。
相反，在可能的情况下保持声明性(React 惯用语)并针对其特定情况使用预期的优化工具是有意义的:

useState对于以声明方式的不可变值，触发重新渲染

useMemo用于声明性内存来自状态和 Prop 的昂贵值

useRef对于可变值或 DOM 节点 - 独立于渲染闭包范围，不需要 deps ，不会触发重新渲染，更多手动命令式工作