状态提升(Lifting State Up)
通常情况下,同一个数据的变化需要几个不同的组件来反映。我们建议提升共享的状态到它们最近的祖先组件中。我们看下这是如何运作的。
在本节,我们将会创建一个温度计算器,用来计算水在一个给定温度下是否会沸腾。
我们通过一个称为 BoilingVerdict
的组件开始。它接受 celsius
(摄氏温度)作为 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
中保存它的值。
另外,它会根据当前输入的温度来渲染 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
属性,值可能是 "c"
或者 "f"
:
const scaleNames = {
c: 'Celsius',
f: 'Fahrenheit'
};
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;
const scale = this.props.scale;
return (
<fieldset>
<legend>Enter temperature in {scaleNames[scale]}:</legend>
<input value={temperature}
onChange={this.handleChange} />
</fieldset>
);
}
}
现在我们可以修改 Calculator
来渲染两个独立的温度输入:
class Calculator extends React.Component {
render() {
return (
<div>
<TemperatureInput scale="c" />
<TemperatureInput scale="f" />
</div>
);
}
}
我们现在有两个 (input)输入框 了,但是当你输入其中一个温度时,另一个输入并没有更新。这是跟我们的需要不符的:我们希望它们保持同步。
我们也不能在 Calculator
中显示 BoilingVerdict
。 Calculator
不知道当前的温度,因为它是在 TemperatureInput
中隐藏的。
编写转换函数
首先,我们编写两个函数来在摄氏温度和华氏温度之间转换:
function toCelsius(fahrenheit) {
return (fahrenheit - 32) * 5 / 9;
}
function toFahrenheit(celsius) {
return (celsius * 9 / 5) + 32;
}
这两个函数用来转化数字。接下来再编写一个函数用来接收一个字符串 temperature
和一个 转化器函数 作为参数,并返回一个字符串。这个函数用来在两个输入之间进行相互转换。
对于无效的 temperature
值,它返回一个空字符串,输出结果保留3位小数:
function tryConvert(temperature, convert) {
const input = parseFloat(temperature);
if (Number.isNaN(input)) {
return '';
}
const output = convert(input);
const rounded = Math.round(output * 1000) / 1000;
return rounded.toString();
}
例如, tryConvert('abc', toCelsius)
将返回一个空字符串,而 tryConvert('10.22', toFahrenheit)
返回 '50.396'
。
状态提升(Lifting State Up)
目前,两个 TemperatureInput
组件都将其值保持在本地状态中:
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(状态) 是通过将其移动到需要它的组件的最接近的共同祖先组件来实现的。
这被称为“状态提升(Lifting State Up)”。我们将从 TemperatureInput
中移除相关状态本地状态,并将其移动到 Calculator
中。
如果 Calculator
拥有共享状态,那么它将成为两个输入当前温度的“单一数据来源”。它可以指示他们具有彼此一致的值。由于两个 TemperatureInput
组件的 props 都来自同一个父级Calculator
组件,两个输入将始终保持同步。
让我们一步一步看看这是如何工作的。
首先,我们将在 TemperatureInput
组件中用 this.props.temperature
替换 this.state.temperature
。
现在,我们假装 this.props.temperature
已经存在,虽然我们将来需要从 Calculator
传递过来:
render() {
// Before: const temperature = this.state.temperature;
const temperature = this.props.temperature;
// ...
我们知道 props(属性) 是只读的。
当 temperature
是 本地 state(状态)时, TemperatureInput
可以调用 this.setState()
来更改它。
然而,现在 temperature
来自父级作为 prop(属性) ,TemperatureInput
就无法控制它。
在 React 中,通常通过使组件“受控”的方式来解决。就像 DOM <input>
一样接受一个 value
和一个 onChange
prop(属性) ,所以可以定制 TemperatureInput
接受来自其父级 Calculator
的 temperature
和 onTemperatureChange
。
现在,当 TemperatureInput
想要更新其温度时,它就会调用this.props.onTemperatureChange
:
handleChange(e) {
// Before: this.setState({temperature: e.target.value});
this.props.onTemperatureChange(e.target.value);
// ...
注意:
请注意,自定义组件中的
temperature
或onTemperatureChange
prop(属性) 名称没有特殊的含义。我们可以命名为任何其他名称,像命名他们为value
和onChange
,是一个常见的惯例。
onTemperatureChange
prop(属性) 和 temperature
prop(属性) 一起由父级的 Calculator
组件提供。它将通过修改自己的本地 state(状态) 来处理变更,从而通过新值重新渲染两个输入。我们将很快看到新的 Calculator
实现。
在修改 Calculator
之前,让我们回顾一下对 TemperatureInput
组件的更改。我们已经从中删除了本地 state(状态) ,不是读取this.state.temperature
,我们现在读取 this.props.temperature
。当我们想要更改时,
不是调用 this.setState()
,而是调用 this.props.onTemperatureChange()
, 这将由 Calculator
提供:
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>
);
}
}
现在我们来看一下 Calculator
组件。
我们将当前输入的 temperature
和 scale
存储在本地 state(状态) 中。这是我们从输入 “提升” 的 state(状态) ,它将作为两个输入的 “单一数据来源” 。为了渲染两个输入,我们需要知道的所有数据的最小表示。
例如,如果我们在摄氏度输入框中输入 37 ,则 Calculator
组件的状态将是:
{
temperature: '37',
scale: 'c'
}
如果我们稍后将华氏温度字段编辑为 212 ,则 Calculator
组件的状态将是:
{
temperature: '212',
scale: 'f'
}
我们可以存储两个输入框的值,但事实证明是不必要的。存储最近更改的输入框的值,以及它所表示的度量衡就够了。然后,我们可以基于当前的 temperature
(温度) 和 scale
(度量衡) 来推断其他输入的值。
输入框保持同步,因为它们的值是从相同的 state(状态) 计算出来的:
class Calculator extends React.Component {
constructor(props) {
super(props);
this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
this.state = {temperature: '', scale: 'c'};
}
handleCelsiusChange(temperature) {
this.setState({scale: 'c', temperature});
}
handleFahrenheitChange(temperature) {
this.setState({scale: 'f', temperature});
}
render() {
const scale = this.state.scale;
const temperature = this.state.temperature;
const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;
return (
<div>
<TemperatureInput
scale="c"
temperature={celsius}
onTemperatureChange={this.handleCelsiusChange} />
<TemperatureInput
scale="f"
temperature={fahrenheit}
onTemperatureChange={this.handleFahrenheitChange} />
<BoilingVerdict
celsius={parseFloat(celsius)} />
</div>
);
}
}
现在,无论你编辑哪个输入框,Calculator
中的 this.state.temperature
和 this.state.scale
都会更新。其中一个输入框获取值,所以任何用户输入都被保留,并且另一个输入总是基于它重新计算值。
让我们回顾一下编辑输入时会发生什么:
- React 调用在 DOM
<input>
上的onChange
指定的函数。在我们的例子中,这是TemperatureInput
组件中的handleChange
方法。 TemperatureInput
组件中的handleChange
方法使用 新的期望值 调用this.props.onTemperatureChange()
。TemperatureInput
组件中的 props(属性) ,包括onTemperatureChange
,由其父组件Calculator
提供。- 当它预先呈现时,
Calculator
指定了摄氏TemperatureInput
的onTemperatureChange
是Calculator
的handleCelsiusChange
方法,并且华氏TemperatureInput
的onTemperatureChange
是Calculator
的handleFahrenheitChange
方法。因此,会根据我们编辑的输入框,分别调用这两个Calculator
方法。 - 在这些方法中,
Calculator
组件要求 React 通过使用 新的输入值 和 刚刚编辑的输入框的当前度量衡 来调用this.setState()
来重新渲染自身。 - React 调用
Calculator
组件的render
方法来了解 UI 外观应该是什么样子。基于当前温度和激活的度量衡来重新计算两个输入框的值。这里进行温度转换。 - React 使用
Calculator
指定的新 props(属性) 调用各个TemperatureInput
组件的render
方法。 它了解 UI 外观应该是什么样子。 - React DOM 更新 DOM 以匹配期望的输入值。我们刚刚编辑的输入框接收当前值,另一个输入框更新为转换后的温度。
每个更新都会执行相同的步骤,以便输入保持同步。
经验总结
在一个 React 应用中,对于任何可变的数据都应该循序“单一数据源”原则。通常情况下,state 首先被添加到需要它进行渲染的组件。然后,如果其它的组件也需要它,你可以提升状态到它们最近的祖先组件。你应该依赖 从上到下的数据流向 ,而不是试图在不同的组件中同步状态。
提升状态相对于双向绑定方法需要写更多的“模板”代码,但是有一个好处,它可以更方便的找到和隔离 bugs。由于任何 state(状态) 都 “存活” 在若干的组件中,而且可以分别对其独立修改,所以发生错误的可能大大减少。另外,你可以实现任何定制的逻辑来拒绝或者转换用户输入。
如果某个东西可以从 props(属性) 或者 state(状态) 得到,那么它可能不应该在 state(状态) 中。例如,我们只保存最后编辑的 temperature
和它的 scale
,而不是保存 celsiusValue
和 fahrenheitValue
。另一个输入框的值总是在 render()
方法中计算得来的。这使我们对其进行清除和四舍五入到其他字段同时不会丢失用户输入的精度。
当你看到 UI 中的错误,你可以使用 React 开发者工具来检查 props ,并向上遍历树,直到找到负责更新状态的组件。这使你可以跟踪到 bug 的源头: