当前位置：首页 > news >正文

hook函数——useRef

news 来源：原创 2024/5/9 23:26:27

useRef

useRef 是一个 React Hook，它能帮助引用一个不需要渲染的值。也就是说useRef可以存储一个值，但是不被组件渲染，仅仅只是引用，主要包括两个方面，例如使用ref引用一个值，使用ref引用一个dom节点，本文将会从计数器，文本框聚焦的案例来进一步说明这useRef的用法

const ref = useRef(initialValue)

initialValue：ref 对象的 current 属性的初始值。可以是任意类型的值。
current：初始值为传递的 initialValue。之后可以将其设置为其他值。如果将 ref 对象作为一个 JSX 节点的 ref 属性传递给 React，React 将为它设置 current 属性。

1.使用ref引用一个值

在这个计数器案例中，我们使用了useRef来引用一个变量ref,初始值为0，ref.current代表引用当前ref的值，在点击后获取到当前的值再加1，按道理来说组件应该渲染{ref.current}，但是因为useRef的特点，他只在组件初始渲染的时候显示一次，后续便不会参与渲染，仅仅只是作为当前值的引用，通过current属性获取到值，可以从结果图中看到，渲染的值没有变，组件中的ref也没有变

import { useRef } from 'react';
import './App.css';
function App() {const ref = useRef(0);function handleClick() {ref.current = ref.current + 1;alert('You clicked ' + ref.current + ' times!');}return (<div className="App"><button onClick={handleClick}>点击！</button><p>{ref.current}</p></div>);
}export default App;

在这里插入图片描述

2.使用ref引用dom节点

在这里使用useRef来引用输入框dom节点，初始设置为空，给输入框绑定一个ref属性，点击按钮之后将引用当前的dom进行聚焦，可以看见组件的ref上有输入框的dom,并且点击之后输入框聚焦

import { useRef } from 'react';
import './App.css';function App() {const inputRef = useRef<HTMLInputElement>(null);const handleClick = () => {if (inputRef.current) {inputRef.current.focus();}}return (<div className="App"><input ref={inputRef} /><button onClick={handleClick}>聚焦输入框</button></div>);
}export default App;

在这里插入图片描述

3.注意事项

不要在渲染期间写入或者读取 ref.current。

React 期望组件主体表现得像一个纯函数：

如果输入的（props、state 与上下文）都是一样的，那么就应该返回一样的 JSX。
以不同的顺序或用不同的参数调用它，不应该影响其他调用的结果。
在渲染期间读取或写入 ref 会破坏这些预期行为。

function MyComponent() {// ...// 不要在渲染期间写入 refmyRef.current = 123;// ...// 不要在渲染期间读取 refreturn <h1>{myOtherRef.current}</h1>;
}

可以在事件处理程序或者 Effect 中读取和写入 ref。

function MyComponent() {// ...useEffect(() => {// 可以在 Effect 中读取和写入 refmyRef.current = 123;});// ...function handleClick() {// 可以在事件处理程序中读取和写入 refdoSomething(myOtherRef.current);}// ...
}