React组件State提升(译）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

译自：https://reactjs.org/docs/lifting-state-up.html （适当进行了裁减）

通常我们会碰到这样的情况，当某个组件的state数据改变时，几个React组件同时都需要做出反应。这时我们推荐把相应的state值共享到这些组件最接近的父类中。让我们看下实际是怎么做的。

在这个章节，我们将创建一个“温度计算器”，这个计算器通过给定的温度来计算水是不是沸腾了。

我们将从一个BoilingVerdice（沸水判定）组件开始。这个组件接受一个摄氏温度值作为其prop并且打印水在这个温度是否沸腾了：

function BoilingVerdict(props) {
if (props.celsius >= 100) {
return <p>The water would boil.</p>;
}
return <p>The water would not boil.</p>;
}

下一步，我们将创建一个 Calculator（计算器）的组件。这个组件呈现一个<input>输入框让你输入一个温度值，然后将保持这个值到组件的this.state.temperature中。

此外，Calculator组件还将这个温度值传给它的子组件BoilingVerdict进行呈现。

class Calculator extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {temperature: ''};
} handleChange(e) {
this.setState({temperature: e.target.value});
} render() {
const temperature = this.state.temperature;
return (
<fieldset>
<legend>Enter temperature in Celsius:</legend>
<input
value={temperature}
onChange={this.handleChange} />
<BoilingVerdict
celsius={parseFloat(temperature)} />
</fieldset>
);
}
}

添加第二个输入

我们的新需求是，除了一个摄氏度的输入，我们还提供华氏温度的输入，并且它们之间要保持同步。

我们从Calculator组件中抽取出一个TemperatureInput(温度输入)组件。我们将添加一个新的名为scale(刻度)的prop,取值可以是“c”(摄氏)或者“f”(华氏)：

我们现在可以改变Calculator组件来呈现两个不同的温度输入:

class Calculator extends React.Component {
render() {
return (
<div>
<TemperatureInput scale="c" />
<TemperatureInput scale="f" />
</div>
);
}
}

现在我们有了两个温度输入框，但目前两入输入框不会同步，当我们改动一个输入框的温度值时，另一个输入框的值不会随着改变。这个没有达到我们的需求：我们希望这两个输入框中的值能保持同步变化。

并且在当前这个Calculator组件中我们也无法显示BoilingVerdict组件的内容。因为当前的温度值隐藏在TemperatureInput组件内部了，使得Calculator组件无法获得当前的温度值。

编写转换函数

首先，我们将编写两个函数，将摄氏度转换为华氏温度，然后返回:

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();
}

例如，tryConvert('abc'、to摄氏度)返回一个空字符串，而tryConvert('10.22'、toFahrenheit)返回'50.396'。

提升State

目前，两个TemperatureInput组件都各自保持输入的温度值在自己的local state中：

class TemperatureInput extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {temperature: ''};
} handleChange(e) {
this.setState({temperature: e.target.value});
} render() {
const temperature = this.state.temperature;
// ...

但是，我们希望这两个输入是同步的。当我们更新摄氏输入时，华氏输入应反映转换后的温度，反之亦然。

在React中，共享状态通过将需要共享的state值移动到需要它的组件的最近的共同祖先来完成。这被称为“提升State”。我们将state.temperature这个值从TemperatureInput中移除，并将其放入Calculator组件中。

如果Calculator组件拥有了共享状态，它就将成为当前两个温度输入的“真实来源”。这样就可以通过一定的代码引导使得两个温度输入子组件的值保持一致。由于这两个温度输入子组件的props都来自同一个父计算器组件，所以这两个输入将可以做到同步了。

让我们看一下详细的步骤：

我们将把TemperatureInput组件中的this.state.temperature替换为this.props.temperature。现在，让我们假设this.props.temperature已经存在，尽管将来我们需要从Calculator组件上传递它：

render() {
// Before: const temperature = this.state.temperature;
const temperature = this.props.temperature;
// ...

我们知道props是只读的。在TemperatureInput组件中，这个温度值是保存在local state中，所以只能通过调this.setState()来改变它。然而，现在这个温度值是来自父组件的prop，TemperatureInput组件将无法控制这个温度值的修改。

在React中，通常通过让组件“受控”来解决这个问题。就像DOM <input>同时接受一个值和一个onChange props一样，TemperatureInput组件可以从它的父组件中接受温度值和onTemperatureChange函数做为温度变化的props。

现在，当TemperatureInput组件想要更新它的温度值，只要调this.props.onTemperatureChange就可以了。

handleChange(e) {
// Before: this.setState({temperature: e.target.value});
this.props.onTemperatureChange(e.target.value);
// ...

在深入研究计算器中的更改之前，让我们回顾一下对TemperatureInput组件的更改。this.state.temperature已经从local state中移除，通过this.props.temperature来替代。当我们要进行更改时，我们不再调用this.setState()，而是调用Calculator组件提供的this.props.onTemperatureChange() ：

class TemperatureInput extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
} handleChange(e) {
this.props.onTemperatureChange(e.target.value);
} render() {
const temperature = this.props.temperature;
const scale = this.props.scale;
return (
<fieldset>
<legend>Enter temperature in {scaleNames[scale]}:</legend>
<input value={temperature}
onChange={this.handleChange} />
</fieldset>
);
}
}