#题引:我认为跟着官方文档学习不会走歪路
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} />;
});