React-useRef与DOM操作

#题引：我认为跟着官方文档学习不会走歪路

ref使用

组件重新渲染时，react组件函数里的代码会重新执行，返回新的JSX，当你希望组件“记住”某些信息，但又不想让这些信息触发新的渲染时，你可以使用ref，ref 是一个普通的 JavaScript 对象，具有可以被读取和修改的current属性。

import { useRef } from 'react';
const ref = useRef(0);

useRef 返回一个这样的对象:

{ current: 0 // 你向 useRef 传入的值
}

更改 ref 不会重新渲染组件，它像一个 React 追踪不到的、用来存储组件信息的秘密“口袋”。（这就是让它成为 React 单向数据流的“脱围机制”的原因），你可以将其视为没有设置函数的常规 state 变量。

通常，当你的组件需要“跳出” React 并与外部 API 通信时，你会用到 ref ，以下是这些罕见情况中的几个：

• 存储 timeout ID
• 存储和操作 DOM 元素
• 存储不需要被用来计算 JSX 的其他对象。

ref和DOM

有时你可能需要访问由 React 管理的 DOM 元素 —— 例如，让一个节点获得焦点、滚动到它或测量它的尺寸和位置。在 React 中没有内置的方法来做这些事情，所以你需要一个指向 DOM 节点的 ref 来实现。

在你的组件中使用它声明一个 ref：

const myRef = useRef(null);

将 ref 作为 ref 属性值传递给想要获取的 DOM 节点的 JSX 标签：

<div ref={myRef}>

当 React 为这个 div创建一个 DOM 节点时，React 会把对该节点的引用放入 myRef.current。然后，你可以从 事件处理器 访问此 DOM 节点，并使用在其上定义的内置浏览器 API。

// 你可以使用任意浏览器 API，例如：
myRef.current.scrollIntoView();

如果你尝试将 ref 放在你自己的组件上，例如MyInput ，默认情况下你会得到null，控制台报错，因为默认情况下，React 不允许组件访问其他组件的 DOM 节点。甚至自己的子组件也不行。这是react的安全限制。

非要使用：使用 forwardRef 并将第二个 ref 参数传递给特定节点来暴露 DOM 节点

const MyInput = forwardRef((props, ref) => {return <input {...props} ref={ref} />;
});