状态提升(Lifting State Up)

通常情况下，同一个数据的变化需要几个不同的组件来反映。我们建议提升共享的状态到它们最近的祖先组件中。我们看下这是如何运作的。

在本节，我们将会创建一个温度计算器，用来计算水在一个给定温度下是否会沸腾。

我们通过一个称为 BoilingVerdict 的组件开始。它接受 celsius（摄氏温度）作为 prop ，并打印是否足以使水沸腾：

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.temperature 中保存它的值。

另外，它会根据当前输入的温度来渲染 BoilingVerdict 。

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

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

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

在 CodePan 上尝试

添加第二个输入

我们新的需求是，除了一个摄氏温度输入之外，我们再提供了一个华氏温度输入，并且两者保持自动同步。

我们可以从 Calculator 中提取一个 TemperatureInput 组件开始。我们将添加一个新的 scale 属性，值可能是 "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 = {temperature: ''};
  }

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

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

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

在 CodePan 上尝试

我们现在有两个 (input)输入框了，但是当你输入其中一个温度时，另一个输入并没有更新。这是跟我们的需要不符的：我们希望它们保持同步。

我们也不能在 Calculator 中显示 BoilingVerdict 。 Calculator 不知道当前的温度，因为它是在 TemperatureInput 中隐藏的。

编写转换函数

首先，我们编写两个函数来在摄氏温度和华氏温度之间转换：

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

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

这两个函数用来转化数字。接下来再编写一个函数用来接收一个字符串 temperature 和一个转化器函数作为参数，并返回一个字符串。这个函数用来在两个输入之间进行相互转换。

对于无效的 temperature 值，它返回一个空字符串，输出结果保留3位小数：

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

例如， tryConvert('abc', toCelsius) 将返回一个空字符串，而 tryConvert('10.22', toFahrenheit) 返回 '50.396' 。

状态提升(Lifting State Up)

目前，两个 TemperatureInput 组件都将其值保持在本地状态中：

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

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

  render() {
    const temperature = this.state.temperature;
    // ...

但是，我们希望这两个输入是相互同步的。当我们更新摄氏温度输入时，华氏温度输入应反映转换后的温度，反之亦然。

在 React 中，共享 state(状态) 是通过将其移动到需要它的组件的最接近的共同祖先组件来实现的。这被称为“状态提升(Lifting State Up)”。我们将从 TemperatureInput 中移除相关状态本地状态，并将其移动到 Calculator 中。

如果 Calculator 拥有共享状态，那么它将成为两个输入当前温度的“单一数据来源”。它可以指示他们具有彼此一致的值。由于两个 TemperatureInput 组件的 props 都来自同一个父级Calculator组件，两个输入将始终保持同步。

让我们一步一步看看这是如何工作的。

首先，我们将在 TemperatureInput 组件中用 this.props.temperature 替换 this.state.temperature 。现在，我们假装 this.props.temperature 已经存在，虽然我们将来需要从 Calculator 传递过来：

  render() {
    // Before: const temperature = this.state.temperature;
    const temperature = this.props.temperature;
    // ...

我们知道 props(属性) 是只读的。当 temperature 是本地 state(状态)时， TemperatureInput 可以调用 this.setState() 来更改它。然而，现在 temperature 来自父级作为 prop(属性) ，TemperatureInput 就无法控制它。

在 React 中，通常通过使组件“受控”的方式来解决。就像 DOM <input>一样接受一个 value 和一个 onChange prop(属性) ，所以可以定制 TemperatureInput 接受来自其父级 Calculator 的 temperature 和 onTemperatureChange 。

现在，当 TemperatureInput 想要更新其温度时，它就会调用this.props.onTemperatureChange：

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

注意:

请注意，自定义组件中的 temperature 或 onTemperatureChange prop(属性) 名称没有特殊的含义。我们可以命名为任何其他名称，像命名他们为 value 和 onChange，是一个常见的惯例。

onTemperatureChange prop(属性) 和 temperature prop(属性) 一起由父级的 Calculator 组件提供。它将通过修改自己的本地 state(状态) 来处理变更，从而通过新值重新渲染两个输入。我们将很快看到新的 Calculator 实现。

在修改 Calculator 之前，让我们回顾一下对 TemperatureInput 组件的更改。我们已经从中删除了本地 state(状态) ，不是读取this.state.temperature ，我们现在读取 this.props.temperature 。当我们想要更改时，不是调用 this.setState() ，而是调用 this.props.onTemperatureChange()，这将由 Calculator 提供：

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

现在我们来看一下 Calculator 组件。

我们将当前输入的 temperature 和 scale 存储在本地 state(状态) 中。这是我们从输入 “提升” 的 state(状态) ，它将作为两个输入的 “单一数据来源” 。为了渲染两个输入，我们需要知道的所有数据的最小表示。

例如，如果我们在摄氏度输入框中输入 37 ，则 Calculator 组件的状态将是：

{
  temperature: '37',
  scale: 'c'
}

如果我们稍后将华氏温度字段编辑为 212 ，则 Calculator 组件的状态将是：

{
  temperature: '212',
  scale: 'f'
}

我们可以存储两个输入框的值，但事实证明是不必要的。存储最近更改的输入框的值，以及它所表示的度量衡就够了。然后，我们可以基于当前的 temperature(温度) 和 scale(度量衡) 来推断其他输入的值。

输入框保持同步，因为它们的值是从相同的 state(状态) 计算出来的：

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

在 CodePan 上尝试

现在，无论你编辑哪个输入框，Calculator 中的 this.state.temperature 和 this.state.scale 都会更新。其中一个输入框获取值，所以任何用户输入都被保留，并且另一个输入总是基于它重新计算值。

让我们回顾一下编辑输入时会发生什么：

React 调用在 DOM <input> 上的 onChange 指定的函数。在我们的例子中，这是 TemperatureInput 组件中的 handleChange 方法。
TemperatureInput 组件中的 handleChange 方法使用新的期望值调用 this.props.onTemperatureChange()。TemperatureInput 组件中的 props(属性) ，包括 onTemperatureChange，由其父组件 Calculator 提供。
当它预先呈现时， Calculator 指定了摄氏 TemperatureInput 的 onTemperatureChange 是 Calculator 的 handleCelsiusChange 方法，并且华氏 TemperatureInput 的 onTemperatureChange 是 Calculator 的 handleFahrenheitChange 方法。因此，会根据我们编辑的输入框，分别调用这两个 Calculator 方法。
在这些方法中， Calculator 组件要求 React 通过使用新的输入值和刚刚编辑的输入框的当前度量衡来调用 this.setState() 来重新渲染自身。
React 调用 Calculator 组件的 render 方法来了解 UI 外观应该是什么样子。基于当前温度和激活的度量衡来重新计算两个输入框的值。这里进行温度转换。
React 使用 Calculator 指定的新 props(属性) 调用各个 TemperatureInput 组件的 render 方法。它了解 UI 外观应该是什么样子。
React DOM 更新 DOM 以匹配期望的输入值。我们刚刚编辑的输入框接收当前值，另一个输入框更新为转换后的温度。

每个更新都会执行相同的步骤，以便输入保持同步。

经验总结

在一个 React 应用中，对于任何可变的数据都应该循序“单一数据源”原则。通常情况下，state 首先被添加到需要它进行渲染的组件。然后，如果其它的组件也需要它，你可以提升状态到它们最近的祖先组件。你应该依赖从上到下的数据流向，而不是试图在不同的组件中同步状态。

提升状态相对于双向绑定方法需要写更多的“模板”代码，但是有一个好处，它可以更方便的找到和隔离 bugs。由于任何 state(状态) 都 “存活” 在若干的组件中，而且可以分别对其独立修改，所以发生错误的可能大大减少。另外，你可以实现任何定制的逻辑来拒绝或者转换用户输入。

如果某个东西可以从 props(属性) 或者 state(状态) 得到，那么它可能不应该在 state(状态) 中。例如，我们只保存最后编辑的 temperature 和它的 scale，而不是保存 celsiusValue 和 fahrenheitValue 。另一个输入框的值总是在 render() 方法中计算得来的。这使我们对其进行清除和四舍五入到其他字段同时不会丢失用户输入的精度。

当你看到 UI 中的错误，你可以使用 React 开发者工具来检查 props ，并向上遍历树，直到找到负责更新状态的组件。这使你可以跟踪到 bug 的源头：

Edit this page