useRef
。看着他们的例子...
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>
</>
);
}
…看起来useRef
可以被createRef
替代。
function TextInputWithFocusButton() {
const inputRef = createRef(); // what's the diff?
const onButtonClick = () => {
// `current` points to the mounted text input element
inputRef.current.focus();
};
return (
<>
<input ref={inputRef} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
为什么我需要使用Ref钩子?useRef
有何作用?
ref
不受限制,甚至可以容纳一个简单的数字;但为什么需要.current
(不像useState
钩子)? 找到原因: 只是为了使.current
可以按引用传递,就像真正的类字段一样,而无需奇怪的 setter。 (哈哈,我想知道现在函数与真正的类相比慢多少。) - Top-Master