React狀態(tài)提升案例介紹

更新時間：2023年04月12日 09:42:54 作者：追求～

這篇文章主要介紹了React狀態(tài)提升案例，所謂狀態(tài)提升就是將各個子組件的公共state 提升到它們的父組件進行統(tǒng)一存儲、處理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧

1.介紹

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

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

實現(xiàn)方式

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

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

官網(wǎng)介紹

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

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以及處理函數(shù)。

我們在寫另一個組件：

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

這個組件現(xiàn)在沒有什么存在的價值，我們僅僅是給兩個溫度輸入組件提供一個父組件，以便我們進行后續(xù)的狀態(tài)提升。

現(xiàn)在我們看看網(wǎng)頁的樣子：

我們可以輸入攝氏度和華氏度，但是我們現(xiàn)在想要讓這兩個溫度保持一致，就是我們如果輸入攝氏度，那么下面的華氏度可以自動算出來，如果我們輸入華氏度，那么攝氏度就可以自動算出來。

那么我們按照現(xiàn)在這種結構的話，是非常難以實現(xiàn)的，因為我們知道這兩個組件之間沒有任何關系，它們之間是不知道對方的存在，所以我們需要把它們的狀態(tài)進行提升，提升到它們的父組件當中。

那我們看看如何做修改，首先把子組件（溫度輸入組件）的狀態(tài)（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，通過父組件傳入。那么現(xiàn)在這個溫度輸入組件其實就是一個受控組件了，仔細回憶一下我們之前講的受控組件，看看是不是這樣意思？

我們通常會在受控組件發(fā)生改變的時候傳入一個onChange函數(shù)來改變受控組件的狀態(tài)，那么我們這里也是一樣，我們通過給溫度輸入組件傳入某個函數(shù)來讓溫度輸入組件中的input發(fā)生變化的時候調用，當然這個函數(shù)我們可以隨意命名，假如我們這里叫做onTemperatureChange函數(shù)，那么我們繼續(xù)修改子組件：

    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函數(shù)，因為可以看到這個函數(shù)就是調用了一下那個props里的函數(shù)，所以我們完全把input的onChange這么寫 <input type="number" value={this.props.temperature} onChange={this.props.onTemperatureChange}/>這么寫的話注意onTemperatrueChange函數(shù)的參數(shù)是那個事件，而不是我這里寫的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>
        )
    }
}

這里我們省略的攝氏度與華氏度的轉換函數(shù)，比較簡單，大家自行搜索方法。

到此這篇關于React狀態(tài)提升案例介紹的文章就介紹到這了,更多相關React狀態(tài)提升內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: