React笔记——核心概念：10.状态提升

1、初始温度计算器

判断煮沸组件

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

  return <p>The water would not boil.</p>
}

function BoilingVerdict (props) {

if (props.celsius >= 100) {

return <p>The water would boil.</p>

}

return <p>The water would not boil.</p>

}

输入计算组件，并渲染BoilingVerdict

class Calculator extends React.Component {
  constructor (props) {
    super(props)
    this.state = { temperature: '' }

    this.handleChange = this.handleChange.bind(this)
  }

  handleChange (e) {
    this.setState({
      temperature: e.target.value
    })
  }

  render () {
    const temperature = this.state.temperature
    return (
      <fieldset>
        <legend>Enter  temperatur in Celsius:</legend>  
        <input value={ temperature } onChange={ this.handleChange } />
        <BoilingVerdict celsius={ parseFloat(temperature) } />
      </fieldset>
    )
  }
}

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

class Calculator extends React.Component {

constructor (props) {

super(props)

this.state = { temperature: '' }

this.handleChange = this.handleChange.bind(this)

}

handleChange (e) {

this.setState({

temperature: e.target.value

})

}

render () {

const temperature = this.state.temperature

return (

<legend>Enter temperatur in Celsius:</legend>

</fieldset>

)

}

ReactDOM.render(

<Calculator />,

document.getElementById('root')

)

2、加入华氏温度输入框

从Calculator组件抽离出TemperatureInput组件

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

class TemperatureInput extends React.Component {
  constructor (props) {
    super(props)
    this.state = { temperature: '' }

    this.handleChange = this.handleChange.bind(this)
  }

  handleChange (e) {
    this.setState({
      temperature: e.target.value
    })
  }

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

class Calculator2 extends React.Component {
  render () {
    return (
      <div>
        <TemperatureInput scale="c" />
        <TemperatureInput scale="f" />
      </div>
    )
  }
}

ReactDOM.render(
  <Calculator2 />,
  document.getElementById('root2')
)

const scaleNames = {

c: 'Celsius',

f: 'Fahrenheit'

}

class TemperatureInput extends React.Component {

constructor (props) {

super(props)

this.state = { temperature: '' }

this.handleChange = this.handleChange.bind(this)

}

handleChange (e) {

this.setState({

temperature: e.target.value

})

}

render () {

const temperature = this.state.temperature

const scale = this.props.scale

return (

<legend>Enter temperature in { scaleNames[scale] }:</legend>

</fieldset>

)

}

class Calculator2 extends React.Component {

render () {

return (

<div>

</div>

)

}

ReactDOM.render(

<Calculator2 />,

document.getElementById('root2')

)

3、状态提升

温度转换

// 转摄氏度
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 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()

}

受控组件共享state

class TemperatureInput2 extends React.Component {
  constructor (props) {
    super(props)
    // this.state = { temperature: '' }

    this.handleChange = this.handleChange.bind(this)
  }

  handleChange (e) {
    // this.setState({ temperature: e.target.value })
    this.props.onTemperatureChange(e.target.value)
  }

  render () {
    // const temperature = this.state.temperature
    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 Calculator3 extends React.Component {
  constructor (props) {
    super(props)
    this.state = { temperature: '', scale: 'c' }

    this.handleCelsiusChange = this.handleCelsiusChange.bind(this)
    this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this)
  }

  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>
        <TemperatureInput2
          scale="c"
          temperature={ celsius }
          onTemperatureChange={ this.handleCelsiusChange } />
        <TemperatureInput2 
          scale="f"
          temperature={ fahrenheit }
          onTemperatureChange={ this.handleFahrenheitChange } />
        <BoilingVerdict 
          celsius={ parseFloat(celsius) } />
      </div>
    )
  }
}

ReactDOM.render(
  <Calculator3 />,
  document.getElementById('root3')
)

class TemperatureInput2 extends React.Component {

constructor (props) {

super(props)

// this.state = { temperature: '' }

this.handleChange = this.handleChange.bind(this)

}

handleChange (e) {

// this.setState({ temperature: e.target.value })

this.props.onTemperatureChange(e.target.value)

}

render () {

// const temperature = this.state.temperature

const temperature = this.props.temperature

const scale = this.props.scale

return (

<legend>Enter temperature in { scaleNames[scale] }:</legend>

</fieldset>

)

}

class Calculator3 extends React.Component {

constructor (props) {

super(props)

this.state = { temperature: '', scale: 'c' }

this.handleCelsiusChange = this.handleCelsiusChange.bind(this)

this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this)

}

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>

<TemperatureInput2

scale="c"

temperature={ celsius }

onTemperatureChange={ this.handleCelsiusChange } />

<TemperatureInput2

scale="f"

temperature={ fahrenheit }

onTemperatureChange={ this.handleFahrenheitChange } />

<BoilingVerdict

celsius={ parseFloat(celsius) } />

</div>

)

}

ReactDOM.render(

<Calculator3 />,

document.getElementById('root3')

)

4、学习小结

在 React 应用中，任何可变数据应当只有一个相对应的唯一“数据源”。
通常，state 都是首先添加到需要渲染数据的组件中去。然后，如果其他组件也需要这个 state，那么你可以将它提升至这些组件的最近共同父组件中。
使用 React 开发者工具来检查问题组件的 props