React前端：多次调用parseInt、重复字符串比较与变量复用哪种更高效？

一、parseInt重复调用 vs 结果存变量复用 #

写法1：重复调用parseInt #

(input) => {
  setState(parseInt(input, 10))
  updateAuction(parseInt(input, 10))
  // ...其他重复调用parseInt的逻辑
}

写法2：将结果存入变量后复用 #

(input) => {
  const parsedInput = parseInt(input, 10)
  setState(parsedInput)
  updateAuction(parsedInput)
  // ...其他复用parsedInput的逻辑
}

结论：写法2更高效

每次调用parseInt都会完整执行一遍字符串转整数的解析逻辑，重复调用等于做了多次相同的冗余计算。把结果存在变量里，只需要执行一次parseInt，后续直接复用结果，既减少了不必要的性能消耗，还提升了代码可读性——parsedInput这个变量名能清晰表达含义，也避免了重复写函数调用时可能出现的失误（比如不小心把某一处的基数10写错）。

二、重复字符串比较 vs 结果存变量复用 #

写法1：重复做字符串比较 #

logoVariant === "small" && doSomething()
logoVariant === "small" && doSomethingElse()
// ...其他重复比较的逻辑

写法2：将比较结果存入变量后复用 #

const isLogoSmall = logoVariant === "small"
isLogoSmall && doSomething()
isLogoSmall && doSomethingElse()
// ...其他复用比较结果的逻辑

结论：写法2更优

虽然字符串全等比较本身是轻量操作，但重复多次执行还是会产生冗余的判断逻辑。如果logoVariant是需要从复杂状态、props或者计算属性中获取的值，重复访问也可能带来额外开销。更重要的是，写法2的可读性和可维护性更好：isLogoSmall这个变量名语义明确，后续如果要修改判断条件（比如改成判断logoVariant === "mini"），只需要修改变量赋值的那一行，不用逐个修改所有比较语句，大幅降低出错概率。

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