---
url: /docs/guide/usage/linter/rules/react/refs.md
---

### 功能

验证 refs 的正确用法：不得在渲染期间读取或写入 `ref.current`，只能在事件处理程序和 effect 中进行。

由 React Compiler 提供支持，该编译器每个文件运行一次，并与其他 React Compiler 规则共享。移植自
[`react-hooks/refs`](https://react.dev/reference/eslint-plugin-react-hooks/lints/refs)。

### 为什么这是不好的？

React 在渲染期间可能尚未附加 ref，并且读取它不会使组件订阅更新——UI 会在不知不觉中过时。

### 示例

此规则中**不正确**的代码示例：

```jsx
import { useRef } from "react";
function Component() {
  const ref = useRef(null);
  const value = ref.current; // read during render
  return <div>{value}</div>;
}
```

此规则中**正确**的代码示例：

```jsx
import { useEffect, useRef } from "react";
function Component() {
  const ref = useRef(null);
  useEffect(() => {
    ref.current.focus();
  }, []);
  return <input ref={ref} />;
}
```

## 如何使用

## 版本

此规则在 v1.79.0 中添加。

## 参考