zoukankan      html  css  js  c++  java
  • React:Lifting State Up

    在学习React的组件的时候,我也好奇组件间需要共享状态或通信的时候,React是如何处理的。在文档的QUICK START的提到Lifting State Up(状态提升),并不是什么新鲜东西。只是把几个组件需要共享的状态拿出来放到最近的父组件而已。然后通过传参的方式注入子组件,成为其props。由于子组件获取的状态state_inShare都来自父组件,因此各自的state_inShare是同步的。

    In React, sharing state is accomplished by moving it up to the closest common ancestor of the components that need it. This is called "lifting state up". 

    这是处理简单的共享状态的一种方式。

    当我们把需要共享的状态放到父组件之后。我们就不能在子组件内通过setState方法改变它了,只能在父组件内用setState方法改变。那我们怎么在子组件中调用父组件的setState方法呢?

    React的方案是:

    在父组件中定义一个处理方法(比如handle(newValue){}),里面执行对state的更新。并将之作为prop传给子组件。

    在子组件内部,当状态需要改变时,就调用父组件传递过来的this.props.handle()方法。

    比如:

    父组件中定义了handle:

    1   //...
    2   handle(t) {
    3     this.setState({temperature:t})
    4   }
    5   //..
    6   <TemperatureInput  onTemperatureChange={this.handle} temperature={temperature} />

    在子组件<TemperatureInput>中:

    1   //组件中定义处理程序,执行父组件props下来的方法
    2   changeTemp(e) {
    3   this.props.onTemperatureChange(e.target.value);
    4   }
    5   //用户交互时改变了Temperature
    6    <input type="text" value={temperature} onChange={this.changeTemp} />

    其实就是曲线救国嘛。。。。

  • 相关阅读:
    Steve Jobs 2005年于 Stanford University 毕业典礼上的演讲
    欧姆龙血糖仪HEA214换购备忘
    (转载)2011年高考作文之《时间在流逝》(安徽考生)
    2012年部分节假日安排(转载)
    乔布斯语录(转载)
    欢乐谷一日游
    上海公交投诉电话:12319
    中国公路“买路钱”应该怎么管?(转载)
    C#操作excel
    SQL Server数据库对列的操作
  • 原文地址:https://www.cnblogs.com/alan2kat/p/7469456.html
Copyright © 2011-2022 走看看