这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战
翻译自：beta.reactjs.org/learn/refer…
当你希望组件“记住”一些信息，但是你不希望这些信息触发重新 render 的时候，你可以使用 ref，它像一个秘密的“口袋”，用于在组件中存储信息。
系列文章
useRef 简单易懂解析（三）ref 和 state 的对比
Refs 和 DOM
您可以将 ref 指向任何值。但是，ref 最常见的例子是访问 DOM 元素。比如，如果你想通过编程的方式，让输入框获得焦点，使用 ref 是很方便的。当您将 ref 传递给 JSX 中的 ref 属性时，例如 <div ref={myRef}>，React 会将对应的 DOM 元素放入 myRef.current。
举一个简单的例子，我们有一个 input 框，希望在页面载入后让 input 框获取到焦点，就可以这样做：
首先需要创建下 ref，这里初始值是 null，我们不用关心的
const inputRef = React.useRef(null)
然后把刚刚创建好的 ref 传递给 input，这个时候，就如上面所说的，inputRef.current 会被赋值成 DOM 元素，也就是 input 元素了：
<input ref={input} />
最后在页面载入后，让 input 获得焦点：
useEffect(()=> {
inputRef.current.focus();
}, [])
这样就完成了简单的例子，当然这只是最简单的用法，我们可以用这种方式，调用 DOM 上的全部方法，完成更多比如页面滚动到任意的位置等功能。
更多详细的内容，比如更多 DOM 方法，相关的一些游泳池的 api，还有父子组件对于 refs 的传递方式，我们在下一个系列文章中详细的讲解，可以直接查看：juejin.cn/post/702954… 以及后面的文章。
总结
- refs 是一个逃生舱，它可以保存不被用于 render 的数据。你不会经常需要它们。
- ref 是一个纯 JavaScript 对象，它有一个名为
current的属性。你可以读取或设置它。 - 你可以通过调用
useRef这个 hook 让 React 生成一个 ref。 - 类似 state，refs 让你在组件 re-render 之间保存数据。
- 和 state 不同的是，设置 ref 的
current属性不会触发 re-render。 - 不要在 render 的过程中读或写
ref.current，这会使你的组件难以预测。
以上是本文的全部内容，下一篇文章将会通过一些有挑战的例子，看你对 ref 是否完全理解。
