土豆博客

React中的状态提升

# 一、概述

React的状态提升就是用户对子组件操作,子组件不直接改变自己的状态,而是把自己的状态写到它们的父组件当中,然后父组件把状态传递到子组件的props中去,这样以来随着改变父组件,从而改变受父组件下控制的所有子组件的状态,这也是React单项数据流的特性决定的。

官方的原话是:通常,多个组件需要反映相同的变化数据,这时我们建议将共享状态提升到最近的共同父组件中去。 这被称为“状态提升(Lifting State Up)”。

官方案例:https://react.docschina.org/docs/lifting-state-up.html

什么时候要用到状态提升?

遇到几个组件需要共用一个状态的情况,这种情况可以使用状态提升

举个现实的例子,如汇率兑换,现在有个需求,有两个输入框,分别用来输入美元和人民币的数额,要求不管用户输入美元还是人民币,另一个输入框显示出根据汇率计算出的对应的数额。其实它们用的是同一个状态数据:输入金额。

解决办法:将这部分共享的状态数据提升至最近的共同父组件当中进行管理。

Money.jsx

import React from "react";

export default class Money extends React.Component {
  constructor(props) {
    super(props);
  }
  handleChange = (e) => {
    this.props.moneyChange(e.target.value);
  };
  render() {
    const money = this.props.money;
    const text = this.props.type === "d" ? "美元" : "人民币";
    return (
      <div>
        <p>{text}</p>
        <input type="text" value={money} onChange={this.handleChange} />
      </div>
    );
  }
}

Main.jsx

import React from "react";
import MyMoney from "./Money";

export default class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dollar: "",  //美元
      rmb: "" //人民币
    };
  }
  dollrInput = (value) => { //美元输入框改变时改变state中的状态
    this.setState({
      dollar: value,
      rmb: value === "" ? "" : value * 7
    });
  };
  rmbInput = (value) => { //人民币输入框改变时改变state中的状态
    this.setState({
      dollar: value === "" ? "" : value * 0.13,
      rmb:value
    });
  };
  render() {
    return (
      <div>
        <MyMoney type={'d'} moneyChange={this.dollrInput} money={this.state.dollar}/>
        <MyMoney type={'y'} moneyChange={this.rmbInput} money={this.state.rmb}/>
      </div>
    )
  }
}

可以看到,在公共组件Money.jsx中,并没有提供state来存储状态数据,而是把两个子组件(复用了公共组件)的状态写到它们的父组件当中,也就是提升了状态,然后父组件把状态传递到子组件的props中去,同时在父组件中写出子组件的处理函数,子组件内部通过触发props中的方法更改父组件的state,这样以来就达到了共用状态数据,实现了一种类似于数据双向绑定的效果

效果如下:

code
top

扫码添加,一起进步

wechat-code

为了保障最佳预览体验,博客已不支持IE浏览器的访问,邀请您使用以下现代高级浏览器。

谷歌浏览器(推荐) 火狐浏览器

注:如果你使用的是360,QQ等双核浏览器,请开启极速模式