React:Lifting State Up

Posted 2020-10-05 瓶子2333

在学习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} />

 

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