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

React教程 admin 暂无评论

十、提升state

通常,如果有几个组件需要反映相同的变化数据。 我们建议将共享state提升到层级最近的,并且是共同的父组件上。 让我们看看这是如何工作的。

在本节中,我们将创建一个温度计算器来计算水是否在给定温度下沸腾。

我们将从一个名为BoilingVerdict的组件开始。 它接受celsius(摄氏温度)作为props,并打印是否足以煮沸水:

function BoilingVerdict(props) { 
   if (props.celsius >= 100) {
        return 水沸腾了    }
    return 水没有沸腾 }

接下来,我们创建一个名字叫Calculator的组件。它渲染一个,让您输入温度,并将其值保存在this.state.value中。

此外,它还会根据当前输入值渲染BoilingVerdict

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 (
                             请输入温度                                                    );
    }
}
ReactDOM.render( 
   ,
    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 ( 
                             输入{scaleName[scale]}温度                                     );
    }
}

我们现在可以更改计算器来渲染两个单独的温度输入:

class Calculator extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
         return (
                                                                  );
    }
}
ReactDOM.render(
    ,
    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 ( 
                             请输入{scaleName[scale]}温度                                    );
    }
}

如果几个组件需要访问相同的state,这是一个state应该提升到层级最近的共同父级组件的标志。 在我们的例子中,这是那个Calculator组件。 我们将在其state中存储当前valuescale

我们可以存储两个输入框的值,但事实证明这是没有必要的。 它足以存储最近更改的输入的value及其表示的scale。 然后,我们可以基于当前valuescale单独推断其他输入的值。

输入保持同步,因为它们的值是从相同的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 (
                                                                                  );
    }
}

现在,无论您编辑哪个输入框,Calculator中的this.state.valuethis.state.scale都会更新。 其中一个输入框获取value为原样,所以任何用户输入都被保留,另一个输入值总是基于它重新计算。

经验教训

对于在React应用程序中更改的任何数据,都应该有一个唯一的“真理唯一来源”。通常,首先将state添加到需要渲染的组件。然后,如果其他组件也需要它,您可以将其提升到层级最近的共同父级组件中。而不是尝试在不同组件之间同步状态,您应该依赖于自上而下的数据流。

提升state涉及编写比双向绑定方法更多的“样板”代码,但作为一个好处,很快就可以找到错误。由于任何状态都“生存”在一些组件中并且该组件可以单独地改变它,所以大大减少了错误的出现概率。此外,您可以实现任何自定义逻辑以拒绝或转换用户输入。

如果某些东西可以从prps或state派生,它都不应该再继续呆在state里。
例如,不是同时存储celsiusValuefahrenheitValue,而是只存储最后一次编辑的valuescale。另一个输入的值总是可以从render()方法中计算出来。这允许我们清除或应用四舍五入到其他字段,而不会丢失用户输入。

当您在UI中看到错误时,可以使用React Developer Tools检查道具,并向上逐个排查DOM树,直到找到负责更新state的组件。这使您可以轻松地跟踪错误来源。


转载请注明:React教程中文网 - 打造国内领先的react学习网站-react教程,react学习,react培训,react开 » React从入门到精通系列教程之(10) 提升state

喜欢 ()or分享