React-----温度转换案例分析React的思想

概述：以温度转换为例，分析React的封装思想和抽象

1.上效果图

功能介绍：无论在哪个输入框进行输入，另个框值会动态改变，同时下面的文本也会跟着改变（Celsius>100 水开始沸腾了，反之）

2.分析：

React的目标：封装Component进行复用

抽离相同点：1.上面两个大框框起来是相同的结构，都是一个名称和输入框

抽离不同点：1.名称后面单词是不同

2.隐含两个输入框计算的公式是不一样的

3.后面的文本框不同

3.上代码分析：

const scaleNames = {
  c: 'Celsius',
  f: 'Fahrenheit'
};

function toCelsius(fahrenheit) {
  return (fahrenheit - 32) * 5 / 9;
}

function toFahrenheit(celsius) {
  return (celsius * 9 / 5) + 32;
}

function tryConvert(temperature, convert) {
  const input = parseFloat(temperature);
  if (Number.isNaN(input)) {
    return '';
  }
  const output = convert(input);
  const rounded = Math.round(output * 1000) / 1000;
  return rounded.toString();
}

function BoilingVerdict(props) {
  if (props.celsius >= 100) {
    return <p>The water would boil.</p>;
  }
  return <p>The water would not boil.</p>;
}

class TemperatureInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.props.onTemperatureChange(e.target.value);
  }

  render() {
    const temperature = this.props.temperature;
    const scale = this.props.scale;
    return (
      <fieldset>
        <legend>Enter temperature in {scaleNames[scale]}:</legend>
        <input value={temperature}
               onChange={this.handleChange} />
      </fieldset>
    );
  }
}

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
    this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
    this.state = {temperature: '', scale: 'c'};
  }

  handleCelsiusChange(temperature) {
    this.setState({scale: 'c', temperature});
  }

  handleFahrenheitChange(temperature) {
    this.setState({scale: 'f', temperature});
  }

  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>
    );
  }
}

ReactDOM.render(
  <Calculator />,
  document.getElementById('root')
);

总结：1.写出基础组件和常量：scaleNames、toCelsius、toFahrenheit、BoilingVerdict

    2.开始拼接，两种计算要整合toCelsius和toFahrentheit   => tryConvert

            3.html标签要拼接标题和输入框还有触发事件成TemperatureInput（也就是改变React状态）类似java接口的写法，格式就是这样的，具体实现取决调用者

    4.合成一个整体Calculator

技术点学习：

1.请看Calculator中的render()中有个tryConvert(temperature, toCelsius)  toCelsius函数的名称，也就是toCelsius当做对象传入

·       2.请看Calculator中handleCelsiusChange(temperature)设置值  this.setState({scale: 'c', temperature}); 中temperature本应该是键值对的形式，直接更新temperature值

3.观察temperature值的传递从

        a.Calculator 中render()中<TemperatureInput scale="c"   temperature={celsius} onTemperatureChange={this.handleCelsiusChange} />

                b.TemperatureInput 中render()中    const temperature = this.props.temperature;  <input value={temperature} onChange={this.handleChange} />

c.TemperatureInput 中handleChange()中 this.props.onTemperatureChange(e.target.value);

d.Calculator 中handleCelsiusChange(temperature)   this.setState({scale: 'c', temperature});

c.temperature转换成celsius或fahrenheit值

4.Number.isNaN(input)判断是不是数字

5.===表示类型和值都相等
6.Math.round(output * 1000) / 1000;保留三个小数

7.parseFloat(celsius)将值转换为float的值

总结：慢慢锻炼自己抽象事物的能力和观察事物相同点和不同点，利用分久必合合久必分的思想，哈哈