11 从零到上手学习 React 框架 - 小节提升状态（Lifting State Up）

提升状态（Lifting State Up）是 React 中一个非常重要的概念。在多个组件需要共享某个状态时，React 推荐将该状态提升到它们的最上层父组件。这样，父组件可以将状态传递给子组件，确保它们可以根据这一状态进行渲染和交互。

何时需要提升状态？

当我们发现两个或多个组件需要共享某个状态时，就应该考虑将该状态提升到它们的共同父组件。这种做法可以让状态管理更为集中，同时使数据流更加清晰。以下是一些需要提升状态的例子：

• 表单元素：多个输入框需要通过一个父组件进行验证和提交。
• UI 状态：多个组件共享的开关状态（如模态框的打开与关闭）。
• 过滤条件：在不同组件中根据相同条件过滤数据。

提升状态的步骤

提升状态通常包括以下几个步骤：

1. 识别需要共享的状态。
2. 将该状态提升到共同父组件。
3. 将状态和状态更新函数传递给子组件。
4. 在子组件中使用props来管理和展示状态。

示例代码

下面是一个示例，演示如何提升状态。假设我们有两个组件，TemperatureInput 和 BoilingVerdict，它们都需要共享一个温度状态。

步骤 1: 创建组件

首先，我们创建两个子组件，用于输入温度和展示煮沸判断。

function TemperatureInput(props) {
  return (
    <fieldset>
      <legend>Enter temperature in Celsius:</legend>
      <input
        value={props.temperature}
        onChange={e => props.onTemperatureChange(e.target.value)} />
    </fieldset>
  );
}

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

步骤 2: 创建父组件

接下来，我们创建一个父组件 Calculator，在其中提升状态。

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

  handleTemperatureChange = (temperature) => {
    this.setState({ temperature });
  };

  render() {
    const temperature = this.state.temperature;
    return (
      <div>
        <TemperatureInput
          temperature={temperature}
          onTemperatureChange={this.handleTemperatureChange} />
        <BoilingVerdict celsius={parseFloat(temperature)} />
      </div>
    );
  }
}

代码解析

• 在 Calculator 组件中，我们使用 this.state 来管理温度状态。
• handleTemperatureChange 方法更新状态，并被传递给 TemperatureInput 组件。
• TemperatureInput 组件在输入框发生变化时调用 onTemperatureChange，将输入值传递给父组件。
• BoilingVerdict 组件通过 props.celsius 接收状态，以判断水是否会煮沸。

小结

提升状态是一种有效的 React 设计模式，确保可以在多个组件之间共享和同步数据。掌握这一模式有助于构建更加清晰和易维护的组件结构，避免不必要的复杂性。

通过以上示例代码和步骤，你应该能够理解并实际操作如何提升状态，来管理多个组件之间的交互。考虑在你的项目中应用这一模式，以简化状态管理和提升组件的可复用性。