React中不重渲染组件时显示useRef递增计数器值的问题

问题核心 #

useRef的current属性变更不会触发组件重渲染，所以你JSX中写的{changes.current}只会在组件初始渲染时读取一次值，后续即使changes.current递增，页面也不会自动更新。而之前用document.getElementById("p_id")无效，大概率是因为React的虚拟DOM机制或DOM元素查找时机的问题，直接用React提供的ref绑定DOM元素才是更可靠的方式。

解决方案：用useRef绑定DOM元素并直接更新内容 #

我们可以给<p>标签绑定一个ref，然后在点击事件中直接修改该DOM元素的文本内容，全程不会触发组件重渲染。

修改后的代码：

import "./styles.css";
import React, { useRef } from "react";

export default function App() {
  const changes = useRef(0);
  // 绑定显示计数器的p元素
  const countDisplayRef = useRef(null);

  const changingValue = () => {
    changes.current++;
    console.log("New Value: " + changes.current);
    // 直接更新DOM文本
    if (countDisplayRef.current) {
      countDisplayRef.current.textContent = changes.current;
    }
  };

  console.log("rendering not happening");

  return (
    <div className="App">
      <button onClick={changingValue}>
        <b>Click me</b>
      </button>
      {/* 将ref绑定到p元素 */}
      <p ref={countDisplayRef}>{changes.current}</p>
    </div>
  );
}

说明 #

• 点击按钮时，changes.current递增，同时通过countDisplayRef.current.textContent直接修改真实DOM的内容，这个操作完全绕开了React的重渲染机制，控制台的rendering not happening只会在初始渲染时打印一次。
• 用useRef绑定DOM元素比document.getElementById更符合React的设计理念，能避免因组件挂载顺序、DOM结构变化导致的元素查找失败问题。

内容的提问来源于stack exchange，提问作者Arpit Goel