09. 状态提升 (共享状态)

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

在 React 中，将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中，便可实现共享 state。这就是所谓的“状态提升”

两个输入框共享数据的例子：

const scaleNames = {
  c: '摄氏度',
  f: '华氏度'
}

// 转摄氏度
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)
  // Math.round返回一个数字四舍五入后的整数
  const rounded = Math.round(output * 1000) / 1000
  return rounded.toString()
}

// 水是否会沸腾
function BoilingVerdict(props) {
  if (props.celsius >= 100) {
    return <p>水会沸腾.</p>
  }
  return <p>水不会沸腾.</p>
}

// 子组件 - 输入框
class TemperatureInput extends React.Component {
  constructor(props) {
    super(props) // 接收父组件传入props
    this.handleChange = this.handleChange.bind(this) // 绑定回调函数，并修正this
  }

  // 处理change
  handleChange(e) {
    // e是合成事件对象，通过e.target.value 取值
    // 调用父组件传入的onTemperatureChange函数，并传值
    this.props.onTemperatureChange(e.target.value)

    // 当子组件输入框值改变时调用父组件的onTemperatureChange方法，并传出值。
    // 另外，onTemperatureChange命名方式：`在<子组件>变更`
  }

  render() {
    // 接收父组件传入的温度值
    const temperature = this.props.temperature
    // 接收父组件传入的衡量方式
    const scale = this.props.scale

    return (
      <fieldset>
        <legend>输入温度-{scaleNames[scale]}:</legend>
        <input value={temperature} onChange={this.handleChange} />
      </fieldset>
    )
  }
}

// 父组件 - 计算器
class Calculator extends React.Component {
  constructor(props) {
    super(props) // 接收父组件传入props

    // 绑定事件回调，并修正this
    this.handleCelsiusChange = this.handleCelsiusChange.bind(this)
    this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this)
    // 创建初始状态值
    this.state = { temperature: '', scale: 'c' }
  }

  // 处理`摄氏度`变更
  handleCelsiusChange(temperature) {
    // temperature接收到子组件传来的参数，并通过setState修改状态
    this.setState({ scale: 'c', temperature })
  }

  // 处理`华氏度`变更
  handleFahrenheitChange(temperature) {
    // temperature接收到子组件传来的参数，并通过setState修改状态
    this.setState({ scale: 'f', temperature })
  }

  // 渲染函数（每当state改变都会调用）
  render() {
    // 取得当前state下的值
    const scale = this.state.scale
    const temperature = this.state.temperature

    // 根据scale值取得相应的温度数据
    const celsius =
      scale === 'f' ? tryConvert(temperature, toCelsius) : temperature
    const fahrenheit =
      scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature

    // 返回渲染的元素
    // 插入子组件TemperatureInput传入相应的参数，onTemperatureChange指定为当前组件的回调函数
    return (
      <div>
        <TemperatureInput
          scale="c"
          temperature={celsius}
          onTemperatureChange={this.handleCelsiusChange}
        />
        <TemperatureInput
          scale="f"
          temperature={fahrenheit}
          onTemperatureChange={this.handleFahrenheitChange}
        />
        <BoilingVerdict celsius={parseFloat(celsius)} />
      </div>
    )
  }
}

// 渲染DOM
ReactDOM.render(<Calculator />, document.getElementById('root'))

在 CodePen 上尝试

::: note

1. 父组件给所有子组件传入 state 的值
2. 子组件修改值时调用父组件的方法并把值传出
3. 父组件接收到值之后修改 state
4. state 被修改之后重新执行 render 函数，并回到第 1 步 :::

小结

• 任何可变数据应当只有一个相对应的唯一“数据源”

  • 通常，state 都是首先添加到需要渲染数据的组件中去
  • 然后，如果其他组件也需要这个 state，那么你可以将它提升至这些组件的最近共同父组件中
  • 你应当依靠自上而下的数据流，而不是尝试在不同组件间同步 state。

• “存在”于组件中的任何 state，仅有组件自己能够修改它

• 如果某些数据可以由 props 或 state 推导得出，那么它就不应该存在于 state 中。（如上例中，经过 tryConvert 方法转换的后的值。）

React 开发者工具（debug）

当你在 UI 中发现错误时，可以使用 React 开发者工具 来检查问题组件的 props，并且按照组件树结构逐级向上搜寻，直到定位到负责更新 state 的那个组件。