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

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

// 引入Reactimport React, { Component} from 'react';import ReactDOM from 'react-dom';//新建一个对象，并定义两个函数toCelsius和toFahrenheitconst scaleNames = {  c: 'Celsius',  f: 'Fahrenheit'};function toCelsius(fahrenheit) {  return (fahrenheit - 32) * 5 / 9;}function toFahrenheit(celsius) {  return (celsius * 9 / 5) + 32;}//定义函数tryConvert并传入两个参数，一个数input的值value，一个是将上面定义的两个函数作为参数的convertfunction 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赋值，保证了数据的唯一来源