React组件中能否使用普通let/const变量替代useState或useRef？
2026-10-3
第一个问题：是否存在可以直接声明普通变量的场景？
存在，并不是所有组件内的变量都需要用useState或useRef包裹，符合以下两种情况的变量直接用普通let/const声明是完全正确的写法：
- 变量是不会变化的静态常量：比如组件内固定的枚举值、分页大小、静态配置参数等，例如
const MAX_UPLOAD_SIZE = 10 * 1024 * 1024，这类值从始至终不会变，完全不需要用到Hook。 - 变量仅在单次执行逻辑中使用，不需要跨渲染保留值，也不需要触发视图更新：比如事件处理函数内的临时计算变量、渲染过程中的临时中间值，例如在提交表单的函数里声明
let formData = new FormData()，这个变量只在本次提交逻辑里生效，不需要留存到下一次渲染，直接写普通声明即可。
只有满足以下两个需求之一的变量，才需要用到Hook：
- 变量变化后需要触发组件重新渲染、更新视图 → 用
useState - 变量值需要跨多次渲染留存，不会在组件重渲染时被重置，但不需要触发重渲染 → 用
useRef
第二个问题：能否把let a = useRef(null)直接替换为let a = null？
绝对不能，二者的核心作用完全不同：
useRef返回的是一个引用对象，这个对象在组件的整个生命周期内都是同一个实例，你修改a.current的值后，无论组件重渲染多少次，后续读取到的a.current都是最新修改后的值。- 如果直接写成
let a = null，组件每次重渲染都会重新执行一遍组件函数的代码，变量a会被重新初始化赋值为null，你之前对a的所有修改都会直接丢失。
举个实际场景的例子：如果你要存定时器的ID用于后续清除，用普通变量的话，只要组件因为其他状态变化触发重渲染，存的定时器ID就会被重置为null，后续无法正常清除定时器，会导致内存泄漏，这种场景必须用useRef来存值。
内容的提问来源于stack exchange，提问作者Gregory Kafanov
相关产品推荐
相关产品推荐
