useRef 简单易懂解析（五）ref 的最佳实践**把 refs 视为逃生舱。**，当你使用外部系统或浏览器 API

这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战

当你希望组件“记住”一些信息，但是你不希望这些信息触发重新 render 的时候，你可以使用 ref，它像一个秘密的“口袋”，用于在组件中存储信息。

通常，当你的组件需要“跳出” React 并去与外部 API 通信时，你将会使用到 refs - 通常的情况是使用不会影响组件外观的浏览器 API。

以下是一些比较罕见的情况：

另外，如果你的组件需要存储一些值，但是这些值不会影响到 render 的逻辑，你可以选择使用 refs 来存储。

ref 的最佳实践会有下面几点，遵循下面的原则会使你的组件更具有可预测性：

把 refs 视为逃生舱。，当你使用外部系统或浏览器 API 时，refs 是一个很有用的方式。如果您的大部分应用程序逻辑和数据流依赖于 refs，您可能需要重新考虑您的方法是否正确，因为 ref 的可变性可能会使你的逻辑或数据流变得不好预测。
不要在 render 期间读取或写入 ref.current。 如果你在渲染过程中需要一些数据，请不要使用 ref，而是改用 state。由于 React 不知道 ref.current 是何时发生变化的，在渲染时读取它会使组件的行为难以预测。（唯一的例外是像 if (!ref.current) ref.current = new Thing() 这样的代码，它在第一次渲染期间只设置一次 ref。）

React state 的限制不适用于 refs。例如，state 就像每次 render 的快照，并且不会同步更新。但是当你改变 ref 的当前值时，它会立即改变：

ref.current = 5;
console.log(ref.current); // 5

这是因为 ref 本质上是一个普通的 JavaScript 对象，所以它的行为就像这样。

当你使用 ref 时，你也不需要担心避免突变。只要你正在突变的对象不用于渲染，React 就不会关心你对 ref 或它的内容做什么。