十、提升state
通常，如果有几个组件需要反映相同的变化数据。 我们建议将共享state提升到层级最近的，并且是共同的父组件上。 让我们看看这是如何工作的。
在本节中，我们将创建一个温度计算器来计算水是否在给定温度下沸腾。
我们将从一个名为BoilingVerdict的组件开始。 它接受celsius(摄氏温度)作为props，并打印是否足以煮沸水：
function BoilingVerdict(props) {
if (props.celsius >= 100) {
return <p>水沸腾了</p>
}
return <p>水没有沸腾</p>
}
接下来，我们创建一个名字叫Calculator的组件。它渲染一个<input>，让您输入温度，并将其值保存在this.state.value中。
此外，它还会根据当前输入值渲染BoilingVerdict。
import React from 'react';
import ReactDOM from 'react-dom';
function BoilingVerdict(props) {
if (props.celsius >= 100) {
return <p>水沸腾了</p>
}
return <p>水没有沸腾</p>
}
class Calculator extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.change = this.change.bind(this);
}
change(e) {
this.setState({value: e.target.value});
}
render() {
const value = this.state.value;
return (
<fieldset>
<legend>请输入温度</legend>
<input
value={value}
onChange={this.change}/>
<BoilingVerdict celsius={parseFloat(value)}/>
</fieldset>
);
}
}
ReactDOM.render(
<Calculator />,document.getElementById('root')
);
添加第二个input
我们的新需求是，除了输入摄氏温度，我们提供一个输入华氏温度，并保持同步。
我们可以从Calculator提取一个TemperatureInput组件。 我们将添加一个新的scale prop，可以是“c”或“f”：
const scaleNames = {
c: 'Celsius',f: 'Fahrenheit'
}
class TemperatureInput extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.change = this.change.bind(this)
}
change(e) {
this.setState({value: e.target.value});
}
render() {
const value = this.state.value;
const scale = this.props.scale;
return (
<fieldset>
<legend>输入{scaleName[scale]}温度</legend>
<input value={value} onChange={this.change} />
</fieldset>
);
}
}
我们现在可以更改计算器来渲染两个单独的温度输入：
class Calculator extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<TemperatureInput scale='f' />
<TemperatureInput scale='c' />
</div>
);
}
}
ReactDOM.render(
<Calculator />,document.getElementById('root')
)
我们现在有两个输入框，但是当您在其中一个输入温度时，另一个不更新。 这违反了我们的要求：我们希望保持它们同步。
我们也不能从Calculator显示BoilingVerdict。 计算器不知道当前温度，因为它隐藏在TemperatureInput中。
提升state
首先，我们将写两个函数来将摄氏度转换为华氏度，然后返回：
// 将华氏度转换为摄氏度
function toCelsius(f) {
return (f - 32) * 5 / 9;
}
// 将摄氏度转换为华氏度
function toFahrenheit(c) {
return (c * 9 / 5) + 32;
}
这两个函数转换数字。 我们将写另一个函数，它接受一个字符串值和一个转换函数作为参数，并返回一个字符串。 我们将使用它来计算一个输入基于另一个输入的值。
如果传入一个无效的value，那么会返回一个空字符串，并且保持输出四舍五入到小数点后第三位：
function tryConvert(value,convert) {
const input = parseFloat(value);
if (Number.isNaN(input)) {
return '';
}
const output = convert(input);
const rounded = Math.round(output * 1000) / 1000;
return String(rounded);
}
例如，tryConvert('abc',toCelsius)返回一个空字符串，tryConvert('10.22',toFahrenheit)返回50.396。
接下来，我们会从TemperatureInput中移除state。同时从props接收一个value和一个onChange事件来代替。
class Temperature extends React.Component {
constructor(props) {
super(props);
this.change = this.change.bind(this);
}
change(e) {
this.props.onChange(e.target.value);
}
render() {
const value = this.props.value;
const scale = this.props.scale;
return (
<fieldset>
<legend>请输入{scaleName[scale]}温度</legend>
<input value={value} onChange={this.change} />
</fieldset>
);
}
}
如果几个组件需要访问相同的state，这是一个state应该提升到层级最近的共同父级组件的标志。 在我们的例子中，这是那个Calculator组件。 我们将在其state中存储当前value和scale。
我们可以存储两个输入框的值，但事实证明这是没有必要的。 它足以存储最近更改的输入的value及其表示的scale。 然后，我们可以基于当前value和scale单独推断其他输入的值。
输入保持同步，因为它们的值是从相同的state计算的：
class Calculator extends React.Component {
constructor(props) {
super(props);
this.state = {value: '',scale: 'c'};
this.CelsiusChange = this.CelsiusChange.bind(this);
this.FahrenheitChange = this.FahrenheitChange.bind(this);
}
CelsiusChange() {
this.setState({scale: 'c',value});
}
FahrenheitChange() {
this.setState({scale: 'f',value});
}
render() {
const scale = this.state.scale;
const value = this.state.value;
const celsius = scale === 'f' ? tryConvert(value,toCelsius) : value;
const fahrenheit = scale === 'c' ? tryConvert(value,toFahrenheit) : value;
return (
<div>
<Temperature scale="c" value={celsius} onChange={this.CelsiusChange} />
<Temperature scale="f" value={fahrenheit} onChange={this.FahrenheitChange} />
<BoilingVerdict celsius={parseFloat(celsius)} />
</div>
);
}
}
最终代码：
import React from 'react';
import ReactDOM from 'react-dom';
const scaleNames = {
c: 'Celsius',f: 'Fahrenheit'
};
function BoilingVerdict(props) {
if (props.celsius >= 100) {
return <p>水沸腾了</p>
}
return <p>水没有沸腾</p>
}
function toCelsius(f) {
return (f - 32) * 5 / 9;
}
function toFahrenheit(c) {
return (c * 9 / 5) + 32;
}
function tryConvert(value,convert) {
const input = parseFloat(value);
if (Number.isNaN(input)) {
return '';
}
const output = convert(input);
const rounded = Math.round(output * 1000) / 1000;
return String(rounded);
}
class TemperatureInput extends React.Component {
constructor(props) {
super(props);
this.change = this.change.bind(this);
}
change(e) {
this.props.onChange(e.target.value);
}
render() {
const value = this.props.value;
const scale = this.props.scale;
return (
<fieldset>
<legend>请输入{scaleNames[scale]}温度</legend>
<input value={value} onChange={this.change}/>
</fieldset>
);
}
}
class Calculator extends React.Component {
constructor(props) {
super(props);
this.state = {value: '',scale: 'c'};
this.CelsiusChange = this.CelsiusChange.bind(this);
this.FahrenheitChange = this.FahrenheitChange.bind(this);
}
CelsiusChange(value) {
this.setState({scale: 'c',value});
}
FahrenheitChange(value) {
this.setState({scale: 'f',toFahrenheit) : value;
return (
<div>
<TemperatureInput scale="c" value={celsius} onChange={this.CelsiusChange}/>
<TemperatureInput scale="f" value={fahrenheit} onChange={this.FahrenheitChange}/>
<BoilingVerdict celsius={parseFloat(celsius)}/>
</div>
);
}
}
ReactDOM.render(
<Calculator />,document.getElementById('root')
);
现在，无论您编辑哪个输入框，Calculator中的this.state.value和this.state.scale都会更新。 其中一个输入框获取value为原样，所以任何用户输入都被保留，另一个输入值总是基于它重新计算。
经验教训
对于在React应用程序中更改的任何数据，都应该有一个唯一的“数据来源”，也就是state。通常，首先将state添加到需要渲染的组件。如果其他组件也需要它，你可以将其提升到它们层级最近的共同父级组件中。而不是尝试在不同组件之间去同步状态，总归就一句话：你应该依赖于自上而下的数据流。
提升state会涉及编写比双向绑定方法更多的“样板”代码。但这样做有一个好处，就是开发者可以很快就找到错误。由于所有的state都“保存”在这些组件中并且只有该组件可以改变它，所以大大减少了错误的出现概率。此外，你可以实现任何自定义逻辑来拒绝或转换用户输入。
如果某些东西可以从prps或state派生，它都不应该再继续呆在state里。
例如，不是同时存储celsiusValue和fahrenheitValue，而是只存储最后一次编辑的value和scale。另一个输入的值总是可以从render()方法中计算出来。这允许我们清除或应用四舍五入到其他字段，而不会丢失用户输入。
当您在UI中看到错误时，可以使用React Developer Tools检查props，并向上逐个排查DOM树，直到找到负责更新state的组件。这使你可以轻松地跟踪错误来源。
