[react] 请说说什么是useRef？ - CroatiaParanoia - 沸点 - 掘金

前端

[react] 请说说什么是useRef？
"在 React 中，useRef 是一个 Hook 函数，用于在函数组件中创建一个可变的引用。它类似于 class 组件中的实例属性，可以用来存储和访问 DOM 元素、定时器、或者其他需要在组件的整个生命周期中保持稳定的值。

使用 useRef 需要先引入 React：

```jsx
import React, { useRef } from 'react';
```

然后可以在函数组件中使用 useRef 创建一个引用：

```jsx
const MyComponent = () => {
const myRef = useRef();

// 其他逻辑...

return <div ref={myRef}>Hello, useRef!</div>;
}
```

在上面的例子中，myRef 就是一个创建的引用。我们可以通过将其赋值给组件的 ref 属性，将引用与 DOM 元素关联起来。

useRef 返回一个可变的 ref 对象，该对象的 current 属性可以被赋值。我们可以使用 current 属性来读取或修改引用的值。这个值可以在组件的整个生命周期中保持稳定。

```jsx
const MyComponent = () => {
const myRef = useRef();

// 修改引用的值
myRef.current = someValue;

// 读取引用的值
console.log(myRef.current);

return <div>Hello, useRef!</div>;
}
```

使用 useRef 的一个常见场景是访问和操作 DOM 元素。通过将 useRef 返回的引用赋值给组件的 ref 属性，我们可以在函数组件中直接访问和操作 DOM 元素。例如，可以通过引用的 current 属性来修改元素的样式、绑定事件监听器等。

```jsx
const MyComponent = () => {
const myRef = useRef();

// 修改元素样式
myRef.current.style.backgroundColor = 'red';

// 绑定事件监听器
useEffect

展开

今天学到了