refs

规则详情

🌐 Rule Details

Refs 保存的值不会用于渲染。与 state 不同，改变 ref 不会触发重新渲染。在渲染期间读取或写入 ref.current 会破坏 React 的预期。当你尝试读取它们时，refs 可能尚未初始化，而且它们的值可能是过时的或不一致的。

🌐 Refs hold values that aren’t used for rendering. Unlike state, changing a ref doesn’t trigger a re-render. Reading or writing ref.current during render breaks React’s expectations. Refs might not be initialized when you try to read them, and their values can be stale or inconsistent.

如何检测引用

🌐 How It Detects Refs

lint 仅将这些规则应用于它知道是引用的值。当编译器看到以下任何模式时，某个值会被推断为引用：

🌐 The lint only applies these rules to values it knows are refs. A value is inferred as a ref when the compiler sees any of the following patterns:

• 从 useRef() 或 React.createRef() 返回。

  const scrollRef = useRef(null);

• 名为 ref 或以 Ref 结尾的标识符，从 .current 读取或写入。

  buttonRef.current = node;

• 通过 JSX ref 属性传递（例如 <div ref={someRef} />）。

  <input ref={inputRef} />

一旦某样东西被标记为 ref，这种推断会通过赋值、解构或辅助调用跟踪该值。这使得即使在另一个函数中访问 ref.current 且该函数接收了 ref 作为参数时，lint 也能显示违规情况。

🌐 Once something is marked as a ref, that inference follows the value through assignments, destructuring, or helper calls. This lets the lint surface violations even when ref.current is accessed inside another function that received the ref as an argument.

常见违规

🌐 Common Violations

• 在渲染过程中读取 ref.current
• 在渲染过程中更新 refs
• 对于应该是状态的值使用 refs

无效

🌐 Invalid

此规则的错误代码示例：

🌐 Examples of incorrect code for this rule:

// ❌ Reading ref during render
function Component() {
  const ref = useRef(0);
  const value = ref.current; // Don't read during render
  return <div>{value}</div>;
}

// ❌ Modifying ref during render
function Component({value}) {
  const ref = useRef(null);
  ref.current = value; // Don't modify during render
  return <div />;
}

有效

🌐 Valid

此规则的正确代码示例：

🌐 Examples of correct code for this rule:

// ✅ Read ref in effects/handlers
function Component() {
  const ref = useRef(null);

  useEffect(() => {
    if (ref.current) {
      console.log(ref.current.offsetWidth); // OK in effect
    }
  });

  return <div ref={ref} />;
}

// ✅ Use state for UI values
function Component() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

// ✅ Lazy initialization of ref value
function Component() {
  const ref = useRef(null);

  // Initialize only once on first use
  if (ref.current === null) {
    ref.current = expensiveComputation(); // OK - lazy initialization
  }

  const handleClick = () => {
    console.log(ref.current); // Use the initialized value
  };

  return <button onClick={handleClick}>Click</button>;
}

故障排除

🌐 Troubleshooting

lint 用 .current 标记了我的普通对象

🌐 The lint flagged my plain object with .current

名称启发式方法有意将 ref.current 和 fooRef.current 视为真实引用。如果你正在建模一个自定义容器对象，选择一个不同的名称（例如 box）或将可变值移入状态。重命名可以避免 lint，因为编译器会停止将其推断为引用。

🌐 The name heuristic intentionally treats ref.current and fooRef.current as real refs. If you’re modeling a custom container object, pick a different name (for example, box) or move the mutable value into state. Renaming avoids the lint because the compiler stops inferring it as a ref.