快捷導(dǎo)航

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

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

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

1.介紹

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

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

實(shí)現(xiàn)方式

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

這是兩個(gè)有關(guān)連的同級組件的傳值，因?yàn)閞eact的單項(xiàng)數(shù)據(jù)流，所以不在兩個(gè)組件中進(jìn)行傳值，而是提升到最近的共同的父級組件中，改變父級的state,進(jìn)而影響了兩個(gè)子級組件的render。

官網(wǎng)介紹

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

2.案例

先寫一個(gè)溫度輸入組件：

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>
        )
    }
}

這個(gè)組件就是一個(gè)普通的受控組件，有state和props以及處理函數(shù)。

我們在寫另一個(gè)組件：

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

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

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

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

那么我們按照現(xiàn)在這種結(jié)構(gòu)的話，是非常難以實(shí)現(xiàn)的，因?yàn)槲覀冎肋@兩個(gè)組件之間沒有任何關(guān)系，它們之間是不知道對方的存在，所以我們需要把它們的狀態(tài)進(jìn)行提升，提升到它們的父組件當(dāng)中。

那我們看看如何做修改，首先把子組件（溫度輸入組件）的狀態(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有關(guān)的東西全部刪掉了，然后input的value也變成了props，通過父組件傳入。那么現(xiàn)在這個(gè)溫度輸入組件其實(shí)就是一個(gè)受控組件了，仔細(xì)回憶一下我們之前講的受控組件，看看是不是這樣意思？

我們通常會在受控組件發(fā)生改變的時(shí)候傳入一個(gè)onChange函數(shù)來改變受控組件的狀態(tài)，那么我們這里也是一樣，我們通過給溫度輸入組件傳入某個(gè)函數(shù)來讓溫度輸入組件中的input發(fā)生變化的時(shí)候調(diào)用，當(dāng)然這個(gè)函數(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>
            )
        }
    }

好了，我們的子組件差不多就是這樣了，當(dāng)然我們可以省略那個(gè)handleChange函數(shù)，因?yàn)榭梢钥吹竭@個(gè)函數(shù)就是調(diào)用了一下那個(gè)props里的函數(shù)，所以我們完全把input的onChange這么寫 <input type="number" value={this.props.temperature} onChange={this.props.onTemperatureChange}/>這么寫的話注意onTemperatrueChange函數(shù)的參數(shù)是那個(gè)事件，而不是我這里寫的e.target.value。

再看看我們的父組件如何修改，我們首先補(bǔ)上state，以及子組件對應(yīng)的onChange處理方法，以及子組件的值。寫好之后大概是這個(gè)樣子：

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>
        )
    }
}

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

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

您可能感興趣的文章: