详解 React 中的 ref
ref 是什么
- 在 React 中，ref 主要用于获取组件实例或访问 DOM 节点，也可以用于组件间通信。它是一个普通的 JavaScript 对象，拥有一个名为 current 的属性。
- 它的创建方式有两种，createRef 和 useRef。
createRef
调用 createRef 在类组件中声明一个 ref，createRef 不接收任何参数。调用 createRef 声明的 ref 会在组件每次渲染的时候重新创建，每次渲染都会返回一个新的引用。
import { Component, createRef } from 'react';
export default class Form extends Component {
inputRef = createRef();
handleClick = () => {
this.inputRef.current.focus();
}
render() {
return (
<>
);
}
}
useRef
函数组件中使用 useRef 来创建 ref。接收一个任意初始值，如字符串、对象，甚至是函数等。使用 useRef 创建的 ref 只会在组件首次渲染时创建，每次都会返回相同的引用，所以通过 ref 可以拿到最新的值。
useRef(initialValue) returns { current: initialValue }
import { useState, useRef } from 'react';
export default function Chat() {
const [text, setText] = useState('');
const textRef = useRef(text);
function handleChange(e) {
setText(e.target.value);
textRef.current = e.target.value;
}
function handleSend() {
setTimeout(() => {
alert('Sending: ' + textRef.current);
}, 3000);
}
return (
<>
{text}
);
}
上面例子中，输入文本后点击发送，alert 会在3秒后显示，在这期间，如果修改文本内容，alert 会显示修改后的文本内容。
const ref = useRef() 相当于 const [ref, _] = useState(() => createRef(null))
什么时候用 ref
When you want a component to “remember” some information, but you don’t want that information to trigger new renders, you can use a ref.
当您希望组件“记住”某些信息，但不希望该信息触发新的渲染时，可以使用 ref。
ref 的使用场景
存储定时器 ID
import { useState, useRef } from 'react';
export default function Chat() {
const [text, setText] = useState('');
const [isSending, setIsSending] = useState(false);
// let timeoutID = null;
const timeoutRef = useRef(null);
function handleSend() {
setIsSending(true);
// timeoutID = setTimeout(() => {
// alert('Sent!');
// setIsSending(false);
// }, 3000);
timeoutRef.current = setTimeout(() => {
alert('hahaha!');
setIsSending(false);
}, 3000);
}
function handleUndo() {
setIsSending(false);
// clearTimeout(timeoutID);
clearTimeout(timeoutRef.current);
}
return (
<>
setText(e.target.value)}
/>
{isSending &&
}
);
}
上面例子输入文本后点击发送按钮，3秒后才会 alert 文本内容，点击取消按钮可以取消 alert 的弹出。
存储和操作 DOM 节点
import { useRef } from 'react';
export default function Form() {
const inputRef = useRef(null);
function handleClick() {
inputRef.current.focus();
}
return (
<>
);
}
上面例子是通过点击按钮让输入框聚焦
import { useRef } from 'react';
export default function CatFriends() {
const firstCatRef = useRef(null);
const secondCatRef = useRef(null);
const thirdCatRef = useRef(null);
function handleScrollToFirstCat() {
firstCatRef.current.scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'center'
});
}
function handleScrollToSecondCat() {
secondCatRef.current.scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'center'
});
}
function handleScrollToThirdCat() {
thirdCatRef.current.scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'center'
});
}
return (
<>
-
-
-
);
}
上面这个例子的按钮通过在相应的 DOM 节点上调用浏览器的 rollIntoView() 方法来将图像居中。
用于组件间的通信
访问子组件的方法
假设你有一个 ChildComponent，它有一个可以被父组件调用的方法 childMethod。
// ChildComponent.js
import React from 'react';
class ChildComponent extends React.Component {
childMethod() {
console.log('Child method called');
}
render() {
return 子组件;
}
}
父组件可以使用 ref 来调用这个方法：
// ParentComponent.js
import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const childRef = useRef();
const callChildMethod = () => {
childRef.current.childMethod();
};
return (
控制子组件的状态
如果子组件有内部状态或行为需要从父组件触发，可以通过 ref 实现。
// ChildComponent.js
import { useState, forwardRef, useImperativeHandle } from 'react';
const ChildComponent = forwardRef((props, ref) => {
const [count, setCount] = useState(0);
// useImperativeHandle 钩子用于自定义 ref 暴露给父组件的实例值。它应与 forwardRef 一起使用。
useImperativeHandle(ref, () => ({
incrementCount() {
setCount((prevCount) => prevCount + 1);
},
}));
return Count: {count};
});
父组件可以控制子组件的状态
// ParentComponent.js
import { useRef } from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const childRef = useRef();
return (
注意：不推荐使用 ref 代替 props 和 state 来管理组件间的数据流
ref 和 state 的区别
注意事项
- useRef 是一个 hook，所以不能在循环、条件或 map() 调用中调用 useRef。如何在列表中使用 ref
参考文档：
react 官网