React中能否用全局变量替代state存储可变值？是否为不良实践？

答案是可以这么做，但几乎所有场景下这都属于不良开发实践，下面拆解具体原因和替代方案：

为什么可行？ #

全局变量独立于React的渲染周期，修改它不会触发任何组件的重渲染，确实能实现“存储变化值但不触发重绘”的需求。举个简单例子：

// 全局变量
let globalClickCount = 0;

function ClickButton() {
  const handleClick = () => {
    globalClickCount++;
    console.log(`点击次数：${globalClickCount}`);
    // 组件不会因为globalClickCount变化而重渲染
  };

  return <button onClick={handleClick}>点击我</button>;
}

为什么这是不良实践？ #

• 调试难度飙升：全局变量可以在代码任何位置被修改，一旦出现值异常，你很难快速定位到修改的源头，排查问题成本极高。
• 破坏组件封装性：组件依赖外部全局状态后，复用性会大幅下降——把组件放到其他项目、页面甚至同一项目的不同位置，都可能因为全局变量的缺失或状态不一致而失效。
• 与React理念冲突：React的核心是“状态驱动UI”，全局变量脱离了这个机制，后续如果需要基于这个值更新UI，你会发现React根本不知道这个值已经变化，只能手动强制重渲染，反而引入更多问题。
• 并发渲染风险：React 18+的并发渲染会让组件渲染过程更灵活，全局变量没有React的状态保护机制，可能出现状态不一致的诡异问题。

更优的替代方案 #

如果确实需要存储不需要触发UI更新的可变值，React官方推荐用useRef：

import { useRef } from 'react';

function ClickButton() {
  const clickCountRef = useRef(0);

  const handleClick = () => {
    clickCountRef.current++;
    console.log(`点击次数：${clickCountRef.current}`);
    // ref.current变化不会触发组件重渲染
  };

  return <button onClick={handleClick}>点击我</button>;
}

useRef的优势在于：

• 属于组件内部状态，不会污染全局作用域
• 能在组件的整个生命周期内保持引用
• 符合React的设计模式，后续如果需要关联UI，也能方便地转为state或结合其他hooks处理

如果需要跨组件共享这类值，可以用useContext配合useRef（注意单独封装ref的context，避免不必要的组件重渲染）。

内容的提问来源于stack exchange，提问作者Aries Ha