react 状态提升

状态提升是什么意思？一个最简单的例子，就是如果两个子组件需要利用到对方的状态的话，那么这个时候我们就需要使用到状态提升，具体的做法就是把两个子组件的状态写到它们的父组件当中，然后父组件把状态传递到子组件的props中去，这样子组件也相当于有状态。父组件相当于是数据源，这样的话，子组件是没有控制权的，那么如果之前子组件的state是受到控制的怎么办呢？就像我们之前说到的受控组件一样，像：

<input value = {this.state.value} onChange = {this.handleChange}/>

那我们就得在父组件中写出子组件的处理函数，并在处理函数中更改父组件的state

来看一个完整的状态提升的例子：

先写一个温度输入组件：

class TemperatureInput extends React.Component {
    state = {
        temperature: ''
    };
    handleChange = (e) => {
        this.setState({
            temperature : e.target.value
        })
    };
    render() {
        return (
            <fieldset>
                <legend>输入{scaleNames[this.props.scale]}:</legend>
                <input type="number" value={this.state.temperature} onChange={this.handleChange}
            </fieldset>
        )
    }
}

这个组件就是一个普通的受控组件，有state和props以及处理函数。

我们在写另一个组件：

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

这个组件现在没有什么存在的价值，我们仅仅是给两个温度输入组件提供一个父组件，以便我们进行后续的状态提升。

现在我们看看网页的样子：

我们可以输入摄氏度和华氏度，但是我们现在想要让这两个温度保持一致，就是我们如果输入摄氏度，那么下面的华氏度可以自动算出来，如果我们输入华氏度，那么摄氏度就可以自动算出来。

那么我们按照现在这种结构的话，是非常难以实现的，因为我们知道这两个组件之间没有任何关系，它们之间是不知道对方的存在，所以我们需要把它们的状态进行提升，提升到它们的父组件当中。

那我们看看如何做修改，首先把子组件（温度输入组件）的状态（state）全部删除，看看是什么样子:

    class TemperatureInput extends React.Component {

        handleChange = (e) => {

        };

        render() {
            return (
                <fieldset>
                    <legend>输入{scaleNames[this.props.scale]}:</legend>
                    <input type="number" value={this.props.temperature} onChange={this.handleChange}/>
                </fieldset>
            )
        }
    }

可以看到所有与state有关的东西全部删掉了，然后input的value也变成了props，通过父组件传入。那么现在这个温度输入组件其实就是一个受控组件了，仔细回忆一下我们之前讲的受控组件，看看是不是这样意思？

我们通常会在受控组件发生改变的时候传入一个onChange函数来改变受控组件的状态，那么我们这里也是一样，我们通过给温度输入组件传入某个函数来让温度输入组件中的input发生变化的时候调用，当然这个函数我们可以随意命名，假如我们这里叫做onTemperatureChange函数，那么我们继续修改子组件：

    class TemperatureInput extends React.Component {

        handleChange = (e) => {
            this.props.onTemperatureChange(e.target.value);
        };

        render() {
            return (
                <fieldset>
                    <legend>输入{scaleNames[this.props.scale]}:</legend>
                    <input type="number" value={this.props.temperature} onChange={this.handleChange}/>
                </fieldset>
            )
        }
    }

好了，我们的子组件差不多就是这样了，当然我们可以省略那个handleChange函数，因为可以看到这个函数就是调用了一下那个props里的函数，所以我们完全把input的onChange这么写
<input type="number" value={this.props.temperature} onChange={this.props.onTemperatureChange}/>这么写的话注意onTemperatrueChange函数的参数是那个事件，而不是我这里写的e.target.value。

再看看我们的父组件如何修改，我们首先补上state，以及子组件对应的onChange处理方法，以及子组件的值。写好之后大概是这个样子：

    class Calculator extends React.Component {
        state = {
            celsius: '',
            fahrenheit: ''
        };

        onCelsiusChange = (value) => {
            this.setState({
                celsius: value,
                fahrenheit: tryConvert(value, toFahrenheit)
            });
        };

        onFahrenheitChange = (value) => {
            this.setState({
                celsius: tryConvert(value, toCelsius),
                fahrenheit: value
            });
        };

        render() {
            return (
                <div>
                    <TemperatureInput scale='c' temperature={this.state.celsius}
                                      onTemperatureChange={this.onCelsiusChange}/>
                    <TemperatureInput scale='f' temperature={this.state.fahrenheit}
                                      onTemperatureChange={this.onFahrenheitChange}/>
                </div>
            )
        }
    }

这里我们省略的摄氏度与华氏度的转换函数，比较简单，大家自行搜索方法。

最后加上我们的水是否能够烧开的组件。

react 状态提升

推荐阅读更多精彩内容