未使用useState时更新值为何不触发重渲染？React Native面试题

近期面试遇到一道React Native问题，面试官给出如下代码片段，询问点击两个按钮后屏幕上的a和b值是否会更新。我回答错误后，面试官声称点击"Increment a"按钮时a的值会触发重渲染，而b不会，结论是组件外部更新变量会触发重渲染，内部则不会。但我实际测试后并未复现该现象，以下是完整场景解析：

面试官给出的代码 #

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

let a = 0;

const incrementA = () => {
  console.log(`a => ${a}`);
  a += 1;
  console.log(`a = ${a}`);
};

export default function App() {
  let b = 0;

  const incrementB = () => {
    console.log(`b => ${b}`);
    b += 1;
    console.log(`b = ${b}`);
  };

  return (
    <View style={styles.container}>
      <View>
        <Text>{a}</Text>
        <Button title="Increment a" onPress={incrementA} />
      </View>
      <View>
        <Text>{b}</Text>
        <Button title="Increment b" onPress={incrementB} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

核心机制解析 #

React/React Native的组件重渲染只由特定条件触发：组件的state变化、props变化，或者父组件触发重渲染。普通变量（无论在组件内部还是外部）的更新，都不会直接触发组件重渲染。

变量a的行为 #

• a是组件外部的全局变量，点击按钮后a的值确实会在内存中更新，控制台也能打印出变化后的数值，但组件不会自动重渲染，因此屏幕上的a不会同步更新。面试官的结论完全错误，全局变量的更新不会触发React组件的重渲染。

变量b的行为 #

• b是组件内部的普通变量，每次组件渲染时都会重新初始化b=0。点击按钮更新b后，同样不会触发重渲染，UI上的b始终显示0；而且即使强制触发组件重渲染，b也会被重新赋值为0，无法保留更新后的值。控制台打印的b只是当前函数调用栈中的临时值，和UI展示的变量并非同一生命周期的引用。

测试未复现的原因 #

面试官的结论违背了React的核心渲染机制，实际测试中无论是a还是b，点击按钮后屏幕上的数值都不会更新，只有控制台能看到变量的内存值变化——这才是符合React逻辑的正常表现。

正确实现UI更新的写法 #

如果需要点击按钮后同步更新UI，必须使用React的状态管理API（比如useState），示例如下：

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

export default function App() {
  const [a, setA] = useState(0);
  const [b, setB] = useState(0);

  const incrementA = () => {
    setA(prev => prev + 1);
  };

  const incrementB = () => {
    setB(prev => prev + 1);
  };

  return (
    <View style={styles.container}>
      <View>
        <Text>{a}</Text>
        <Button title="Increment a" onPress={incrementA} />
      </View>
      <View>
        <Text>{b}</Text>
        <Button title="Increment b" onPress={incrementB} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

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