浅析React组件的状态提升(Lifting State Up).

张老师又来了

React是一个用于构建用户界面的javascript框架。采用的是组件化开发模式。任何从大到小的模块在React里都是组件。组件之间可以包裹，形成父子组件。状态提升就发生在父子组件之间。
引用官方文档上的例子，我们将实现一个华氏温度和里氏摄氏度的温度转换组件，来判断输入度数之后，水是否会沸腾。

1判断水是否沸腾的组件

我们通过一个成为BoilingVerdict的组件开始，它接受摄氏温度celsius为prop，并打印是否足以让水沸腾:

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

2定义原始华氏或是历史摄氏度区分数据

const scaleNames = {
  c:'Celsius',   //里氏
  f:'Fahrenheit'   //华氏
}

3里氏华氏互相转换的函数

function toCelsius(fahrenheit){
  return(fahrenheit - 32)*5/9;
}
function toFahrenheit(celsius){
  return (celsius * 9 / 5) + 32;
}
function tryConcert(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();
}

以上的3个小节相当于准备了我们会用到的3个工具。分别是判断水是否开，区分华氏或者里氏摄氏度的JSON对象，2个温度相互转换的公式。后面是组件状态提升的相关知识。

4 现在我们编写一个TemperatureInput组件

这个组件用来显示input等输入框

class TemperatureInput extends React.Component{
  constructor(props){
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event){
    this.props.onTemperatureChange(event.target.value);
  }
  render(){
    const temperature = this.props.temperature;
    const scale = this.props.scale;
    return (
      

        
在{scaleNames[scale]}:中输入温度数值
        
      
    )
  }
}

这个相当于子组件，状态要提升，肯定是提升到父组件，在父组件里面操作状态。
我们都知道组件的2个属性:props和state；
1：props是属于从组件外部获得的，或者由父组件传递给子组件的
2 : state是组件自身的状态属性

所以，状态提升，是提升到父组件。我们在子组件里就直接操作所有子组件公用的父组件的属性.所以虽然字面上说是"状态提升"，但实际上是操作的父组件传过来的props;
故在如上代码的render内，temperature就写的this.props.temperature;

5 编写一个父组件 Calculator

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'?tryConcert(temperature,toCelsius):temperature;
    const fahrenheit = scale === 'c'?tryConcert(temperature,toFahrenheit):temperature;
    return (
      

        
        
        
      
    )
  }
}

最后再讲组件渲染进dom

ReactDOM.render(
  ,
  document.getElementById("root")
)