您好,登錄后才能下訂單哦!
今天小編給大家分享一下React狀態(tài)提升的方法是什么的相關知識點,內(nèi)容詳細,邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
所謂 狀態(tài)提升 就是將各個子組件的 公共state 提升到它們的父組件進行統(tǒng)一存儲、處理(這就是所謂的”單一數(shù)據(jù)源“),負責setState
的函數(shù)傳到下邊的子級組件,然后再將父組件處理后的數(shù)據(jù)或函數(shù)props到各子組件中。
那么如果子組件 要 修改父組件的state該怎么辦呢?我們的做法就是 將父組件中負責setState的函數(shù),以props的形式傳給子組件,然后子組件在需要改變state時調(diào)用即可。
實現(xiàn)方式
實現(xiàn)方式是 利用最近的共同的父級組件中,用props的方式傳過去到兩個子組件,props中傳的是一個setState的方法,通過子組件觸發(fā)props傳過去的方法,進而調(diào)用父級組件的setState的方法,改變了父級組件的state,調(diào)用父級組件的render方法,進而同時改變了兩個子級組件的render。
這是 兩個有關連的同級組件的傳值,因為react的單項數(shù)據(jù)流,所以不在兩個組件中進行傳值,而是提升到 最近的共同的父級組件中,改變父級的state,進而影響了兩個子級組件的render。
官網(wǎng)介紹
通常,多個組件需要反映相同的變化數(shù)據(jù),這時我們建議將共享狀態(tài)提升到最近的共同父組件中去。
先寫一個溫度輸入組件:
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)在想要讓這兩個溫度保持一致,就是我們?nèi)绻斎霐z氏度,那么下面的華氏度可以自動算出來,如果我們輸入華氏度,那么攝氏度就可以自動算出來。
那么我們按照現(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ā)生變化的時候調(diào)用,當然這個函數(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ù)就是調(diào)用了一下那個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> ) } }
以上就是“React狀態(tài)提升的方法是什么”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學習更多的知識,請關注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。