优化网站方法,影楼微网站建设方案,菠菜网站怎么做,关于企业网站建设#题引#xff1a;我认为跟着官方文档学习不会走歪路
ref使用
组件重新渲染时#xff0c;react组件函数里的代码会重新执行#xff0c;返回新的JSX#xff0c;当你希望组件“记住”某些信息#xff0c;但又不想让这些信息触发新的渲染时#xff0c;你可以使用ref#x…#题引我认为跟着官方文档学习不会走歪路
ref使用
组件重新渲染时react组件函数里的代码会重新执行返回新的JSX当你希望组件“记住”某些信息但又不想让这些信息触发新的渲染时你可以使用refref 是一个普通的 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} /;
});
