React中文文档之Lifting State Up

Lifting State Up - 提升状态
经常的，几个组件需要映射相同的数据改变。我们推荐提升共享的state状态到它们最近的公共祖先元素。让我们看看这是如何实现的。
在这个章节，我们将创建一个温度计算器，计算在一个给定的温度，水是否会沸腾。
我们以一个叫做 'BoilingVerdict' 的组件开始。它接收 'celsius' 温度作为一个prop，并且打印是否足够使水非常。

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

接下来，我们创建一个叫做 'Calculator' 的组件。它渲染一个 <input> ，让你输入温度，并使用 'this.state.value' 来保持它的值。
另外，它根据当前输入的值来渲染 'BoilingVerdict' 。

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

添加第二个输入框
我们的新需求是：除了 'Celsius' 输入框，我们提供一个 'Fahrenheit' 输入框，并且它们保持同步。
我们可以通过从 'Calculator' 提取一个 'TemperatureInput' 组件来开始。我们将添加一个新的 'scale' prop给 '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 = {value: ''};
			}
			handleChange(e) {
				this.setState({value: e.target.value});
			}
			render() {
				const value = this.state.value;
				const scale = this.props.scale;
				return (
				    <fieldset>
				        <legend>Enter temperature in {scaleNames[scale]}:</legend>
				        <input value={value}
				          	onChange={this.handleChange} />
				    </fieldset>
				);	
			}
		}



现在让我们来改变 Calculator 来渲染2个独立的温度输入框：

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


现在我们已经有2个输入框了，但是当你在它们中的一个输入温度时，另一个不更新。这与我们的需求矛盾：我们想要2者同步。

从 'Calculator' 组件中，我们也无法展示 'BoilingVerdict'。'Calculator' 不知道当前的温度，因为它隐藏在 'TemperatureInput' 的内部。





提升state状态

首先，我们写2个函数，从 'Celsius' 转换为 'Fahrenheit'，然后反过来。

		function toCelsius(fahrenheit) {
			return (fahrenheit - 32) * 5 / 9;
		}
		function toFahrenheit(celsius) {
			return (celsius * 9 / 5) + 32;
		}


这2个函数转换数字。我们写另外一个函数，接收一个字符串 'value' 和一个转换函数名作为参数，并返回一个字符串。我们使用它来计算一个输入框的值，基于另一个输入框。

当传入一个无效的 '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 rounded.toString();
		}

例如，tryConvert('abc', toCelsius) 返回一个空字符串，tryConvert('10.22', toFahrenheit)返回 '50.396'

接着，我们从 'TemperatureInput' 组件中，移除 state 状态。

替代的，'TemperatureInput' 组件通过props接收 'value' 和 'onChange' 处理器(之前value是通过 state 来接收)：

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


如果几个组件需要访问同样的state，这是一个信息，state应该被提升到它们最近的公共祖先上来替代。在我们的案例中，公共祖先是 'Calculator'。我们将存储当前的 'value' 和 'scale' 到它的 state。

我们可能已经存在了两个输入框的值，但是它原来是没有必要的。存储最近改变的输入框的值和它代表的 'scale' 就足够了。之后，我们可以根据当前的 'value' 和 'scale' 来推断出另一个输入框的值。

2个输入框保持同步，因为它们的值可以从相同的state来计算的到：

		class Calculator extends React.component {
			constructor(props) {
				super(props);
				this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
				this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
				this.state = {value: '', scale: 'c'};
			}
			handleCelsiusChange(value) {
				this.setState({scale: 'c', value});
			}
			handleFahrenheitChange(value) {
				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>
				        <TemperatureInput
				         	scale="c"
				          	value={celsius}
				          	onChange={this.handleCelsiusChange} />
				        <TemperatureInput
				          	scale="f"
				          	value={fahrenheit}
				          	onChange={this.handleFahrenheitChange} />
				        <BoilingVerdict
				          	celsius={parseFloat(celsius)} />
			      </div>
				);
			}
		}


现在，不管你编辑哪个输入框，'Calculator'组件中的 'this.state.value' 和 'this.state.scale' 都会更新。任何用户输入保留下来，一个输入框获取到用户输入到值，另一个输入框基于它，总是重新计算。





课程总结

在React应用中，任何数据都应该有一个单一的真实数据来源。通常的，为了渲染，state是第一个被添加到组件中。之后，如果其他组件也需要它，可以提升state到它们最近的祖先元素上。替代尝试同步不同组件间的state，我们应该依靠的是 'top-down data flow - 自上而下的数据流'

相比于 'two-way binding approaches - 双向绑定方法'，提升state状态，涉及写更多的 'boilerplate - 样板文件' 代码，但是它有一个好处，花费更少的工作查找和杜绝bug。因为任何state存在于一些组件，组件单独可以修改它，这样bugs的表面范围就大大减少了。另外，你可以实现任何自定义逻辑来拒绝或转换用户输入。

如果一些变量，通过 'props' 和 'state' 都可以获取，最好不要使用 'state'，而应该用 'props'。例如：我们进存储最后编辑的 'value' 和 它的 'scale'，而不存储 'celsiusValue' 和 'fahrenheitValue'。在 'rend()' 方法中通过它们，另一个输入框的值总会被计算。这可以让我们清楚或应用于其他字段，而不会丢失用户输入的任何精度

当你在UI中发现一些错误，你可以使用 'React开发者工具' ，来检查 props，并移动树形结构，直到找到组件响应的state更新。这让你可以在源码中追踪bug