React Native变量与State的区别：加法动态更新应用疑问

嘿，这个问题问得特别戳中新手开发者的痛点！我刚学状态管理的时候也纠结过这个，咱们一步步理清楚：

先搞懂State的核心作用 #

State本质是组件内部需要主动追踪、且变化会触发组件重渲染的可变数据。它是组件的「单一可信数据源」——当这个数据变了，组件就会重新渲染，更新UI展示。

输入文本为什么需要State？ #

输入框的内容是用户直接操作改变的，它是整个加法逻辑的源头数据：

• 用户输入时，输入框需要实时显示最新的内容，这就需要组件能感知到输入值的变化，并触发重渲染来更新输入框的显示；
• 如果你不用State存输入值，而是用普通变量，那变量变化时组件不会触发重渲染，输入框就会一直停留在旧值，完全没法正常工作。

举个简单的代码例子：

// 正确的做法：用State存输入值
const [inputA, setInputA] = useState('0');

// 输入框绑定value和onChange，用户输入时更新State
<input 
  type="text" 
  value={inputA} 
  onChange={(e) => setInputA(e.target.value)} 
/>

这里的inputA是用户操作的直接结果，必须用State来追踪，才能保证UI和数据同步。

加法结果为什么不需要State？ #

结果是完全依赖输入值的衍生数据——它不需要被单独存储，因为：

• 当输入的State变化时，组件会自动重渲染，你只需要在渲染过程中实时计算结果就行；
• 如果硬把结果存进State，反而会造成冗余，甚至可能出现「输入变了但结果没更新」的数据不一致问题。

比如这样写就足够了：

// 直接在渲染时计算结果，不需要State
const result = Number(inputA) + Number(inputB);

// 直接渲染结果就行
<div>结果：{result}</div>

每次组件重渲染（因为输入State变化），result都会重新计算，完全能实时展示最新的加法结果。

总结判断要不要用State的小技巧 #

问自己两个问题：

• 这个值是不是用户直接操作或者外部事件触发的源头数据？（是→用State）
• 这个值能不能通过已有的State/Props直接计算出来？（能→不用State）

内容的提问来源于stack exchange，提问作者Ansis Spruģevics