十、提升state

十、提升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', 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.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的组件。这使你可以轻松地跟踪错误来源。