React状态提升：温度转换组件状态更新与转换逻辑疑问

先看核心代码：

render() {
    const scale = this.state.scale;
    const temperature = this.state.temperature;
    const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
    const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;

    return (
      <div>
            <TemperatureInput
          scale="c"
          temperature={celsius}
          onTemperatureChange={this.handleCelsiusChange} />
             <TemperatureInput
          scale="f"
          temperature={fahrenheit}
          onTemperatureChange={this.handleFahrenheitChange} />
            <BoilingVerdict
          celsius={parseFloat(celsius)} />
      </div>
    );
  }
}

当操作第一个（摄氏度）输入框时，触发的handleCelsiusChange会把组件内部状态的scale设为'c'，同时将输入的摄氏度数值存入state.temperature。

接下来看render阶段的逻辑：

• 此时scale的值是'c'，celsius的赋值逻辑里scale === 'f'不成立，所以celsius直接等于state.temperature（也就是你输入的摄氏度数值），这个值会传给摄氏度输入框显示。
• 而fahrenheit的赋值逻辑里scale === 'c'成立，会调用tryConvert把state.temperature里的摄氏度数值转换成华氏度，转换后的结果会传给华氏度输入框显示。

你的理解有偏差：操作摄氏度输入框时，不是做“摄氏度转摄氏度”的无效转换，而是直接用输入值显示在自身输入框，同时把该值转成华氏度同步到另一个输入框。

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