掌握精读 React 官方文档的高效方法

2023-09-28 06:04:58

状态提升的必要性

在 React 中，状态提升是指将组件的状态提升到更高级别的组件中，以实现组件之间的共享和管理。这在以下情况下非常有用：

当多个组件需要访问相同的数据时，避免在每个组件中重复定义和管理状态。
当需要在组件之间传递数据时，状态提升可以简化数据传递的过程。
当需要在组件之间共享状态时，状态提升可以确保组件之间的一致性和同步。

解读状态提升的步骤

现在，让我们通过一个示例来理解状态提升的步骤：

创建一个判断水是否沸腾的组件 BoilingVerdict：

const BoilingVerdict = (props) => {
  if (props.celsius >= 100) {
    return <p>The water is boiling.</p>;
  }
  return <p>The water is not boiling.</p>;
};

添加第二个输入框：

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

  handleCelsiusChange = (event) => {
    this.setState({temperature: event.target.value, scale: 'c'});
  };

  handleFahrenheitChange = (event) => {
    this.setState({temperature: event.target.value, scale: 'f'});
  };

  render() {
    const celsius = this.state.temperature;
    const fahrenheit = tryConvert(celsius, 'f');

    return (
      <div>
        <TemperatureInput
          scale="c"
          temperature={celsius}
          onTemperatureChange={this.handleCelsiusChange}
        />

        <TemperatureInput
          scale="f"
          temperature={fahrenheit}
          onTemperatureChange={this.handleFahrenheitChange}
        />

        <BoilingVerdict
          celsius={parseFloat(celsius)}
        />
      </div>
    );
  }
}

将组件的状态提升到更高级别的组件中：

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

  handleTemperatureChange = (event) => {
    this.setState({temperature: event.target.value});
  };

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

    return (
      <div>
        <TemperatureInput
          temperature={temperature}
          onTemperatureChange={this.handleTemperatureChange}
        />

        <BoilingVerdict
          celsius={parseFloat(temperature)}
        />
      </div>
    );
  }
}

在子组件中使用提升后的状态：

const TemperatureInput = (props) => {
  const handleChange = (event) => {
    props.onTemperatureChange(event.target.value);
  };

  return (
    <fieldset>
      <legend>Enter temperature in {props.scale}:</legend>
      <input value={props.temperature} onChange={handleChange} />
    </fieldset>
  );
};