React从入门到精通系列之(10)提升state

React 2020-06-05

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

相关文章

react 学习11高阶组件
react 中的高阶组件主要是对于 hooks 之前的类组件来说的，如...
react 学习(四) 批量更新及合成事件
我们上一节了解了组件的更新机制，但是只是停留在表层上，例...
react 学习(二) 实现类和函数式组件
我们上一节了解了 react 的虚拟 dom 的格式，如何把虚拟 dom...
react 学习12实现 cloneElement
react 本身提供了克隆组件的方法，但是平时开发中可能很少使...
实现简版 react 状态管理器 mobx
mobx 是一个简单可扩展的状态管理库，中文官网链接。小编在接...
mini react-window(一) 实现固定高度虚拟滚动
我们在平常的开发中不可避免的会有很多列表渲染逻辑，在 pc ...