如何在React中不使用state或this实现增减计数功能？

数据老陈

2026-9-27

可以实现，以下是两种可落地的实现方案：

方案1：全局变量+原生DOM操作

和你提供的原生JS实现逻辑最接近，直接把计数变量定义在组件外部，点击时更新变量后直接修改对应DOM的内容即可，代码示例：

// 计数变量定义在组件外部，不受组件重渲染影响
let count = 0;

function Counter() {
  const up = () => {
    count++;
    document.querySelector('.up').textContent = count;
  };

  return (
    <div>
      <button onClick={up}>点击+1</button>
      <div className="up">{count}</div>
    </div>
  );
}

注意：该方案的计数变量是全局共享的，如果你在页面中渲染多个Counter组件实例，所有实例会共用同一个count值，互相影响。

方案2：useRef存储计数

useRef的current属性可以存储可变数据，更新时不会触发组件重渲染，同时不需要用到state和this关键字，每个组件实例会有独立的ref存储，不会出现多实例互相影响的问题，代码示例：

import { useRef } from 'react';

function Counter() {
  // 用ref存储计数初始值
  const countRef = useRef(0);

  const up = () => {
    countRef.current++;
    document.querySelector('.up').textContent = countRef.current;
  };

  return (
    <div>
      <button onClick={up}>点击+1</button>
      <div className="up">{countRef.current}</div>
    </div>
  );
}