React组件跨渲染存值：普通变量、useState与useRef用法疑问

1. 直接用普通变量o存储跨渲染数据完全不安全 #

你写的o属于函数内部的局部变量，而函数组件每次触发重渲染时，都会从头到尾执行一遍整个函数体的代码：

• 每次渲染都会重新声明let o，并且赋值为全新的对象
• 上一次渲染中你对o的任意修改，都会在新渲染执行时被完全覆盖，根本不可能跨渲染保留
  比如你在点击事件里修改了o.question = "修改后的值"，下次组件因为renderData更新重渲染时，o会直接变回初始的{question: "will this data persist through re-renders?"}，之前的修改会完全丢失。

2. 必须用useRef存储这类数据的原因 #

操作DOM只是useRef的其中一个使用场景，它的核心能力刚好匹配你跨渲染存非UI数据的需求：

• 它创建的引用对象会在组件的整个生命周期内保持唯一，不会因为重渲染被重新初始化
• 修改它的.current属性不会触发组件重渲染，不会干扰正常的UI更新逻辑
  正确的写法参考如下：

import { useState, useRef } from 'react'
export default function ExampleComponent(){
  const [renderData, setRenderData] = useState("I am render data/state")
  // 用useRef初始化跨渲染存储的数据
  const oRef = useRef({
    question: "will this data persist through re-renders?"
  })
  // 后续读写都操作oRef.current即可，重渲染也不会丢失修改
  return (
    <div>
      {renderData}
    </div>
  )
}

3. 现有认知的更正 #

你之前的理解存在两处偏差：

• 函数内部的普通局部变量不能跨渲染持久化保留，每次重渲染都会被重置，只有state、ref这类由React内部托管的数据才会在多次渲染之间保留
• useState确实是用来存储和UI渲染相关的状态，修改会触发重渲染，这个认知是正确的。

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