React Native：为何App()内变量频繁重置，外部变量却不会？

核心结论 #

是的，每次点击按钮触发状态更新后，App组件函数都会重新执行——这是React的渲染机制导致的，也是两类变量行为不同的根本原因。

1. 全局变量（globalVar）的正常更新逻辑 #

• globalVar声明在App函数外部，属于模块级作用域，整个应用生命周期中只会初始化一次，不会随组件重新渲染被重置。
• 每次点击按钮执行globalVar += 10时，都是直接修改这个全局唯一的变量值，所以每次更新都是持续累加，表现为10→20→30…的预期效果。

2. 函数内部变量（localVar）的波动原因 #

• localVar是在App函数内部声明的，组件每一次重新渲染（也就是App函数重新执行）时，都会重新声明并赋值为10。
• 第一次点击按钮：localVar从10变为20，调用setThing更新state触发组件重渲染；重渲染时localVar被重置回10；第二次点击又会把它变成20，如此循环，就出现了在10和20之间静态波动的现象。

替代方案：组件内持久化可变值 #

如果想在组件内部维护一个不随渲染重置的可变值，应该使用React的useRef钩子：

import { Text, Button, View, useRef, useState } from 'react-native';

let globalVar = 10;

export default function App() {
  const localVarRef = useRef(10);
  const [thing, setThing] = useState(0);
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>{thing}</Text>
      <Button
        title="press global"
        onPress={() => setThing((globalVar += 10))}></Button>
      <Button 
        title="press local" 
        onPress={() => {
          localVarRef.current += 10;
          setThing(localVarRef.current);
        }}></Button>
    </View>
  );
}

useRef的current属性会在组件整个生命周期中保持引用，不会随渲染重置，能实现和全局变量类似的累加效果，但作用域被限制在组件内部，更符合组件封装的原则。

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