1、初始温度计算器

• 判断煮沸组件
  
  JavaScript

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

  1 2 3 4 5 6 7

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

• 输入计算组件，并渲染BoilingVerdict
  
  JavaScript

  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') )

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

  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') )

  
  

2、加入华氏温度输入框

• 从Calculator组件抽离出TemperatureInput组件
  
  JavaScript

  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') )

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

  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') )

3、状态提升

• 温度转换
  
  JavaScript

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

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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

  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') )

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70

  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') )

  
  

4、学习小结

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