9. Lifting State Up（状态提升）

React版本：15.4.2
**翻译：xiyoki **

通常几个组件需要响应相同的数据变化。我们建议将共享状态提升到最接近的共同祖先。让我们看看这是如何工作的。
在本节中，我们将创建一个温度计算器，用于计算水是否在给定温度下沸腾。
我们将从名为BoilingVerdict的组件开始。它接受celsius温度为props，并打印是否足以将水烧开：

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

下一步，我们将创建一个名为Calculator的组件。它将渲染一个<input>，让你输入温度，并将该值保存在this.state.value中。
此外，它用当前值渲染BoilingVerdict。

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {value: ''};
  }

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

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

Adding a Second Input（增加第二个输入）

我们新的要求是：除了摄氏度输入框，我们还提供华氏度输入框，并且二者是同步的。
我们把从Calculator中提取一个TemperatureInput组件作为开始。我们将为它增加一个新scale prop，并且这个prop可以是‘c’也可以是‘f’。

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

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

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

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

现在，我们可以改变Calculator来渲染两个独立的温度输入：

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

现在我们有两个输入框，但当你向其中一个输入框输入温度时，另一个并不会更新。这违反了我们的要求：我们希望它们保持同步。
我们也不能从Calculator中展示BoilingVerdict。Calculator也不知道当前的温度，因为当前温度被隐藏在了TemperatureInput内部。

Lifting State Up（状态提升）

首先，我们将写两个函数来将摄氏度转换为华氏度，将华氏度转换为摄氏度：

function toCelsius(fahrenheit) {
  return (fahrenheit - 32) * 5 / 9;
}

function toFahrenheit(celsius) {
  return (celsius * 9 / 5) + 32;
}

这两个函数转换数字。我们将写另一个函数，它接受一个字符串value和一个转换器函数作为参数，并返回一个字符串。我们将使用它来计算其中一个输入框的值，而该输入框的值基于另一个输入框。
它返回一个无效的空字符串value，并且它将输出四舍五入到三位小数：

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

例如，tryConvert(‘abc’,toCelsius)返回一个空字符串， tryConvert(’10.22’,toFahrenheit)返回‘50.396’。
接下来，我们将从TemperatureInput中删除状态。
相反，TemperatureInput组件将接受value和onChange处理程序作为prop:

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

如果几个组件需要访问相同的状态，这标志着状态应该被提升到最接近的共同祖先。在这个例子中最接近的祖先就是Calculator。我们将在它的状态中存储当前的value和scale。
我们可以存储两个输入的值，但事实证明这是不必要的。它足以存储最近被更改的输入框的值，以及其表示的scale。然后我们能基于当前的value和scale，单独推断其他输入框的值。
输入的值保存同步，因为它们的值从相同的状态计算而来。

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
    this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
    this.state = {value: '', scale: 'c'};
  }

  handleCelsiusChange(value) {
    this.setState({scale: 'c', value});
  }

  handleFahrenheitChange(value) {
    this.setState({scale: 'f', value});
  }

  render() {
    const scale = this.state.scale;
    const value = this.state.value;
    const celsius = scale === 'f' ? tryConvert(value, toCelsius) : value; {/* 对状态value作进一步处理*/}
    const fahrenheit = scale === 'c' ? tryConvert(value, toFahrenheit) : value;

    return (
      <div>
        <TemperatureInput
          scale="c"
          value={celsius}
          onChange={this.handleCelsiusChange} />
        <TemperatureInput
          scale="f"
          value={fahrenheit}
          onChange={this.handleFahrenheitChange} />
        <BoilingVerdict
          celsius={parseFloat(celsius)} />
      </div>
    );
  }
}

不论你编辑哪个输入框，Calculator中的this.state.value和this.state.scale都会获得更新。其中一个输入框获取的值为原样，因此任何用户的输入都被保留，另一个输入框中的值总是基于它重新计算。

Lessons Learned （得到的教训）

对于在React应用程序中更改的任何数据，应该有一个单一的‘真实来源’。通常，首先将状态添加到需要渲染的组件。然后，如果其他组件也需要它，你可以将其提升到最接近的共同祖先。而不是尝试在不同组件之间同步状态，你应该依赖于自上而下的数据流。
提升状态涉及编写比双向绑定方法更多的‘样板’代码。但好处是找到和隔离bug需要较少的工作。由于任何状态存在于特定的组件中，并且该组件可以单独改变它，所以大大减少了错误的表面积。此外，你可以实现任何自定义逻辑以拒绝或转换用户输入。
如果数据可以从props或state派生，那么它就不应该在状态之中。例如，我们只存储了最后编辑的value和scale，而不是存储两个celsiusValue和fahrenheitValue。另一个输入的值总是可以从render()方法中计算出来。这允许我们清除或应用四舍五入到其他字段，而不会丢失用户输入的任何精度。
当你在UI中看到错误时，可以使用 React Developer Tools 检查props,并向上移动树，直到找到负责更新状态的组件。这使你可以跟踪错误到其来源：