React中函数的封装和数据的state数据存储【摄氏度和华氏度转化】

平时在写原声js项目的时候，我们经常会遇到函数的封装，但是突然之间，迁移到react上来，却有点不知所措，今天查了一些资料，找到一个很经典的例子，来解释说明react函数体的封装，以及state状态的唯一性

// 引入React
import React, { Component} from 'react';
import ReactDOM from 'react-dom';

//新建一个对象，并定义两个函数toCelsius和toFahrenheit
const scaleNames = {
  c: 'Celsius',
  f: 'Fahrenheit'
};

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

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

//定义函数tryConvert并传入两个参数，一个数input的值value，一个是将上面定义的两个函数作为参数的convert
function tryConvert(value, convert) {
  const input = parseFloat(value);
  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>;
}

//定义一个input的基本组件
class TemperatureInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

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

  render() {
    const value = this.props.value;
    const scale = this.props.scale;
    return (
      <fieldset>
        <legend>Enter temperature in {scaleNames[scale]}:</legend>
        <input value={value}
               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);

   //默认状态，一定注意，这里是数据的唯一来源并且setstate也必须是这里面的数据 
    this.state = {
      value: '',
      scale: 'c'
    };
  }

  //将‘scale’置为c，value等于value
  handleCelsiusChange(value) {
    this.setState({
      scale: 'c', 
      value: value
    });
  }

  //将‘scale’置为c，value等于value
  handleFahrenheitChange(value) {
    this.setState({
      scale: 'f',
      value: value 
    });
  }

  render() {
    const scale = this.state.scale;
    const value = this.state.value;
    //为scaleNames两个字符串赋值
    //定义函数tryConvert并传入两个参数，一个数input的值value，一个为形参convert传入toCelsius函数作为实参，一个为形参传入toFahrenheit函数作为实参
    const celsius = scale === 'f' ? tryConvert(value, toCelsius) : value;
    const fahrenheit = scale === 'c' ? tryConvert(value, toFahrenheit) : value;

    // 渲染TemperatureInput组件的时候，将value的值设置为celsius和fahrenheit，
    return (
      <div>
        <TemperatureInput
          scale=""
          value={celsius}
          onChange={this.handleCelsiusChange} />
        <TemperatureInput
          scale=""
          value={fahrenheit}
          onChange={this.handleFahrenheitChange} />
        <BoilingVerdict
          celsius={parseFloat(celsius)} />
      </div>
    );
  }
}

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

利用state中value作为中转，然后经过转换，为全局定义的scaleNames赋值，保证了数据的唯一来源