react学习记录-状态提升

前端应用状态管理 —— 状态提升

我们在使用state存放数据的时候，应当倾向于把数据放在父组件上，这是为了在父组件下的兄弟组件都在依赖或者影响这个数据的时候，能够进行共享。避免让两个子孙组件分别取得两个数据的备份，造成通信的障碍或者说不同步。

我们把数据交给父组件，使得它的子孙组件都能通过props获取到数据的这种方式，叫做“状态提升”。

总结一下：当某个状态被多个组件依赖或者影响的时候，就把该状态提升到这些组件的最近公共父组件中去管理，用 props 传递数据或者函数来管理这种依赖或着影响的行为。

下面是胡子大哈老师给出的一个组件树示意图。

可以看到，尽管状态提升带来了一个数据管理上的便利，但我们同时也要考虑数据传递的路径，不可避免地去修改每个数据传递经过的组件，这对代码的组织管理维护也带来了不便，如何更好地管理这种被多个组件依赖的状态呢？

React.js 并没有提供好的解决方案来管理这种组件之间的共享状态，在实际项目当中状态提升也不是一个好的解决方案，所以我们需要Redux这样的辅助工具（这和vuex是类似的道理）。

一般来说，对于不会被多个组件依赖和影响的状态（例如某种下拉菜单的展开和收起状态），只需要保存在组件内部即可，不需要做提升或者特殊的管理。

课后习题

百分比换算器

class Input extends Component {
  constructor(){
    super();
    this.state={
      value:0
    }
  }
  handleChangeNum(event){
    this.setState({
      value:event.target.value
    })
    if(this.props.onSetNum){
      this.props.onSetNum(event.target.value)
    }
  }
  render () {
    return (
      <div>
        <input type='number' value={this.state.value} onChange={this.handleChangeNum.bind(this)}/>
      </div>
    )
  }
}

class PercentageShower extends Component {
  render () {
    return (
      <div>{this.props.Num}</div>
    )
  }
}

class PercentageApp extends Component {
  constructor(){
    super();
    this.state={
      num:0
    }
  }
  handleSetNum(param){
    this.setState({
      num:(param*100).toFixed(2)+"%"
    })
  }
  render () {
    return (
      <div>
        <Input onSetNum={this.handleSetNum.bind(this)}/>
        <PercentageShower Num={this.state.num}/>
      </div>
    )
  }
}