在react中使用vuex的示例代碼
前言
筆者最近在學(xué)習(xí)使用react,提到react就繞不過去redux。redux是一個(gè)狀態(tài)管理架構(gòu),被廣泛用于react項(xiàng)目中,但是redux并不是專為react而生,兩者還需要react-redux建立一座橋梁。同時(shí),redux架構(gòu)規(guī)定只能發(fā)送同步action,要想發(fā)送異步action就需要結(jié)合中間件如redux-thunk、redux-saga等,所以說要想搞定redux還真是不容易啊,光名詞就這么多。筆者以前也接觸過一點(diǎn)vuex,vuex對(duì)筆者這樣的菜雞相對(duì)友好,但是vuex是和vue配套的,是不可能用在react中的,這輩子都別想用在react中。但是我不服,那么這篇文章就探索下如何制作一個(gè)可以在react中使用的類似vuex的狀態(tài)管理工具,我將它取名為reux。
vuex <=> redux + react-redux + redux-saga
正文
響應(yīng)式數(shù)據(jù)觀測(cè)系統(tǒng)
vue的一大特色就是響應(yīng)式數(shù)據(jù)觀測(cè)系統(tǒng),它可以在get數(shù)據(jù)時(shí)收集依賴,在set數(shù)據(jù)時(shí)觸發(fā)更新。vuex借助于vue的數(shù)據(jù)觀測(cè)系統(tǒng),可以輕松的收集數(shù)據(jù)依賴,并且依賴可以精細(xì)到組件的粒度,也就是說某一狀態(tài)改變時(shí),只有依賴到這一狀態(tài)的組件才會(huì)觸發(fā)rerender,這樣看來redux體系就比較傻,只要提交action,就會(huì)從根組件rerender(react-redux內(nèi)部自動(dòng)進(jìn)行shouldCompoentUpdate判斷)。
上圖來自于vue官網(wǎng)對(duì)vuex架構(gòu)的說明,鏈接。
上圖中的component是vue component,只要vue component執(zhí)行render,那么vuex的數(shù)據(jù)響應(yīng)系統(tǒng)就可以自動(dòng)的收集依賴,當(dāng)狀態(tài)改變時(shí),依賴于此狀態(tài)的組件就會(huì)重新渲染。既然我們要實(shí)現(xiàn)的是一個(gè)類vuex的狀態(tài)管理工具,即支持以get的方式收集依賴,以set的方式觸發(fā)更新,所以reux利用了vue的響應(yīng)式數(shù)據(jù)觀測(cè)系統(tǒng),正所謂前人種樹,后人乘涼。
如何收集依賴
我們已經(jīng)有了響應(yīng)式數(shù)據(jù)系統(tǒng),接下來要解決的問題就是如何收集依賴,收集依賴必須要觸發(fā)get,而觸發(fā)get的前提是組件可以拿到store,因此第一步是向組件注入store。類似react-redux,reux提供了Provider使子組件可以拿到store。
class Provider extends Component { getChildContext() { return {store: this.props.store}; } render() { const { children } = this.props; return children; } } Provider.childContextTypes = { store: PropTypes.object };
相應(yīng)的子組件可以context拿到store,如下
class Child extends Component { render() { // store => this.context.store } } Child.contextTypes = { store: PropTypes.object };
這樣寫的缺點(diǎn)顯而易見,每個(gè)子組件都需要定義contextTypes,同樣的類似于react-redux,reux提供了connect函數(shù),用于映射state => props
const connect = (mapStateToProps = () => {}) => { return (WrappedComponent) => { const Wrapper = class extends Component { render() { const store = this.context.store; const props = Object.assign({}, this.props, mapStateToProps(store.state, this.props), {dispatch: store.dispatch, commit: store.commit}); return <WrappedComponent {...props} /> } } Wrapper.contextTypes = { store: PropTypes.object }; reaturn Wrapper; } }
這樣一來,只要組件執(zhí)行render方法,便會(huì)觸發(fā)get鉤子,從而使得store自動(dòng)收集依賴,我們?cè)傧胂乱蕾囀鞘裁?,其?shí)依賴應(yīng)該是組件實(shí)例,那么當(dāng)set鉤子觸發(fā)時(shí),每個(gè)依賴(即組件實(shí)例)只要執(zhí)行forceUpdate方法就可以達(dá)到rerender的效果。
但是問題是,get鉤子觸發(fā)時(shí),如何確定依賴到底是誰呢?借鑒vue,我們定義一個(gè)stack,當(dāng)componentWillMount時(shí)進(jìn)棧,當(dāng)componentDidMount時(shí)出棧
componentWillMount() { pushTarget(this); } componentDidMount() { popTarget(this); }
這樣當(dāng)get鉤子觸發(fā)時(shí),當(dāng)前target就是目標(biāo)依賴。同時(shí)應(yīng)當(dāng)注意,當(dāng)組件update時(shí)應(yīng)當(dāng)重新收集依賴,因?yàn)閡pdate之后依賴關(guān)系很可能已經(jīng)變化了
update() { // 清空依賴 this.clear(); pushTarget(this); this.forceUpdate(() => { popTarget(this); }) }
至此,我們的小目標(biāo)已經(jīng)完成了,在react中使用vuex不再是夢(mèng)!
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
解析react?函數(shù)組件輸入卡頓問題?usecallback?react.memo
useMemo是一個(gè)react hook,我們可以使用它在組件中包裝函數(shù)??梢允褂盟鼇泶_保該函數(shù)中的值僅在依賴項(xiàng)之一發(fā)生變化時(shí)才重新計(jì)算,這篇文章主要介紹了react?函數(shù)組件輸入卡頓問題?usecallback?react.memo,需要的朋友可以參考下2022-07-07解決react?antd?Table組件使用radio單選框?更新選中數(shù)據(jù)不渲染問題
這篇文章主要介紹了解決react?antd?Table組件使用radio單選框?更新選中數(shù)據(jù)不渲染問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03React?split實(shí)現(xiàn)分割字符串的使用示例
當(dāng)我們需要將一個(gè)字符串按照指定的分隔符進(jìn)行分割成數(shù)組時(shí),我們可以在組件的生命周期方法中使用split方法來實(shí)現(xiàn)這個(gè)功能,本文就來介紹一下,感興趣的可以了解下2023-10-10React+Spring實(shí)現(xiàn)跨域問題的完美解決方法
這篇文章主要介紹了React+Spring實(shí)現(xiàn)跨域問題的完美解決方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08React錯(cuò)誤邊界Error Boundaries
錯(cuò)誤邊界是一種React組件,這種組件可以捕獲發(fā)生在其子組件樹任何位置的JavaScript錯(cuò)誤,并打印這些錯(cuò)誤,同時(shí)展示降級(jí)UI,而并不會(huì)渲染那些發(fā)生崩潰的子組件樹2023-01-01react進(jìn)階教程之異常處理機(jī)制error?Boundaries
在react中一旦出錯(cuò),如果每個(gè)組件去處理出錯(cuò)情況則比較麻煩,下面這篇文章主要給大家介紹了關(guān)于react進(jìn)階教程之異常處理機(jī)制error?Boundaries的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08