状态提示

Lifting State Up

• 通常，多个组件需要反映相同的变化数据，这时我们建议将共享状态提升到最近的共同父组件中去

• 虽然提升 state 方式比双向绑定方式需要编写更多的 “样板” 代码，但带来的好处是，排查和隔离 bug 所需的工作量将会变少

```jsx harmony

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

class TemperatureInput extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); }

handleChange(e) {
    this.props.onTemperatureChange(e.target.value)
}

render() {
    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>
    );
}

}

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

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(); }

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' ? tryConvert(temperature, toCelsius) : temperature;
    const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;
    return (
        <div>
            <TemperatureInput
                scale="c"
                temperature={celsius}
                onTemperatureChange={this.handleCelsiusChange}
            />
            <TemperatureInput
                scale="f"
                temperature={fahrenheit}
                onTemperatureChange={this.handleFahrenheitChange}
            />
            <BoilingVerdict celsius={parseFloat(celsius)} />
        </div>
    );
}

}

```