React狀態提升的方法是什么

今天小編給大家分享一下React狀態提升的方法是什么的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

1.介紹

所謂 狀態提升 就是將各個子組件的 公共state 提升到它們的父組件進行統一存儲、處理（這就是所謂的”單一數據源“），負責setState的函數傳到下邊的子級組件，然后再將父組件處理后的數據或函數props到各子組件中。

那么如果子組件 要 修改父組件的state該怎么辦呢？我們的做法就是 將父組件中負責setState的函數，以props的形式傳給子組件，然后子組件在需要改變state時調用即可。

實現方式

實現方式是 利用最近的共同的父級組件中，用props的方式傳過去到兩個子組件，props中傳的是一個setState的方法，通過子組件觸發props傳過去的方法，進而調用父級組件的setState的方法，改變了父級組件的state，調用父級組件的render方法，進而同時改變了兩個子級組件的render。

這是 兩個有關連的同級組件的傳值，因為react的單項數據流，所以不在兩個組件中進行傳值，而是提升到 最近的共同的父級組件中，改變父級的state,進而影響了兩個子級組件的render。

官網介紹

通常，多個組件需要反映相同的變化數據，這時我們建議將共享狀態提升到最近的共同父組件中去。

2.案例

先寫一個溫度輸入組件：

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狀態提升的方法是什么”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。