React中不用state改用普通变量能否触发渲染？useRef是替代方案吗

1. 普通let变量能否直接渲染，为什么修改后不触发界面更新 #

你可以直接在JSX中引用普通let变量的值做渲染，但是普通变量的修改永远不会触发React组件重渲染。
React组件的重渲染仅会被三种场景触发：

• 组件自身的useState/useReducer状态更新
• 父组件重渲染连带当前子组件重渲染
• 组件消费的Context value发生更新
  普通let变量不属于上述任意一种触发源，修改后React无法感知到变化，自然不会重新执行组件函数渲染最新值。另外如果是定义在组件作用域顶层的let变量，组件每次重渲染时函数会重新执行，变量会被直接初始化重置，之前修改的数值也无法保留。

示例代码对应问题表现：

function Demo() {
  let count = 0 // 组件每次重渲染都会重置为0

  const add = () => {
    count += 1
    console.log(count) // 控制台打印数值会累加，但界面永远显示0
  }

  return <button onClick={add}>{count}</button>
}

2. useRef是不是处理这类变量的方案 #

首先明确：useRef也不能触发组件重渲染，它的核心作用只是帮你在组件多次渲染之间持久化保存同一个变量引用，不会因为组件重渲染就被重置。
如果你要存储的是不需要展示在界面上的数据（比如定时器ID、DOM引用、上一次状态缓存这类后台运行的中间数据），那useRef完全可以替代普通let变量，解决值被重置的问题。但如果你要存储的是需要渲染到界面上的数据，useRef也无法满足需求，修改ref.current不会触发重渲染，界面依然不会更新。

3. 能否用基础let变量实现渲染更新 #

可以实现，但非常不推荐，本质还是绕不开React的状态更新机制：你需要额外搭配一个state用来手动触发重渲染，同时要把let变量提到组件作用域外部，或者用闭包存储避免被重置，示例如下：

// 把let变量提到组件外，避免组件重渲染时被重置
let outCount = 0
function Demo() {
  // 专门用来触发强制刷新的状态
  const [, forceUpdate] = useState(0)

  const add = () => {
    outCount += 1
    forceUpdate(prev => prev + 1) // 手动触发组件重渲染
  }

  return <button onClick={add}>{outCount}</button>
}

这种写法会带来全局变量污染、多组件实例共享变量互相干扰的问题，完全没有实用价值。需要渲染到界面的响应式数据直接使用useState就是最优解，不存在更轻量的合法实现方案。

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