useRef
优质
小牛编辑
130浏览
2023-12-01
有时候,在编写组件时,我们不希望通过更改组件状态来重新渲染。例如,当创建一个 input 元素时,需要跟踪光标位置或者强制焦点时。使用类组件,我们可以跟踪将它们直接分配到这个属性上,但是函数组件没有我们可以那样引用的上下文。
useRef为这些情况提供了一种机制,返回一个可变的 ref 对象,其 .current 属性被初始化为传递的参数(initialValue)。返回的对象将存留在整个组件的生命周期中。
import { useRef } from 'rax';
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// `current` points to the mounted text input element
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}