react Ref 什么时候用，怎么用

何时使用 ref 通常，当你的组件需要“跳出” React 并与外部 API 通信时，你会用到 ref —— 通常是不会影响组件外观的浏览器 API。以下是这些罕见情况中的几个：

• 存储 timeout ID

• 存储和操作 DOM 元素

存储不需要被用来计算 JSX 的其他对象。 如果你的组件需要存储一些值，但不影响渲染逻辑，请选择 ref。

例子：

• 在我们在react使用定时器去操作一些事情，清楚定时器时候我们需要使用ref来记录定时器的id，比如我们开启定时器后，需要在它执行前销毁定时器

 

上面记录定时器使用的是常规局部变量，我们可以在 handleUndo 函数输出timeoutID，发现它是null。为什么呢？我们要理解这个问题需要明白react的渲染机制 一旦组件被初次渲染，您就可以通过使用 set 函数 更新其状态来触发之后的渲染。 在重新渲染之后这个局部变量会丢失原来记录的id所以会输出空，这个时候ref的用处就体现出来了。React 会在每次重新渲染之间保留 ref,所以这种情况下我们应该使用ref。

• useRef Hook 返回一个对象，该对象有一个名为 current 的属性。最初，myRef.current 是 null。当 React 为这个 
  创建一个 DOM 节点时，React 会把对该节点的引用放入 myRef.current。然后，你可以从 事件处理器 访问此 DOM 节点，并使用在其上定义的内置浏览器 API。

 

React 不允许组件访问其他组件的 DOM 节点。甚至自己的子组件也不行！这是故意的。Refs 是一个应急方案，应该谨慎使用。手动操作 另一个 组件的 DOM 节点会使你的代码更加脆弱。

 

总结：

• ref 是一个应急方案，用于保留不用于渲染的值。 你不会经常需要它们。
• ref 是一个普通的 JavaScript 对象，具有一个名为 current 的属性，你可以对其进行读取或设置。
• 你可以通过调用 useRef Hook 来让 React 给你一个 ref。
• 与 state 一样，ref 允许你在组件的重新渲染之间保留信息。
• 与 state 不同，设置 ref 的 current 值不会触发重新渲染。
• 不要在渲染过程中读取或写入 ref.current。这使你的组件难以预测。