concent漸進(jìn)式重構(gòu)react應(yīng)用使用詳解
正文
傳統(tǒng)的redux項(xiàng)目里,我們寫在reducer里的狀態(tài)一定是要打通到store的,我們一開始就要規(guī)劃好state、reducer等定義,有沒有什么方法,既能夠快速享受ui與邏輯分離的福利,又不需要照本宣科的從條條框框開始呢?本文從普通的react寫法開始,當(dāng)你一個(gè)收到一個(gè)需求后,腦海里有了組件大致的接口定義,然后絲滑般的接入到concent世界里,感受漸進(jìn)式的快感以及全新api的獨(dú)有魅力吧!
需求來了
上周天氣其實(shí)不是很好,記得下了好幾場雨,不過北京總部大廈的隔音太好了,以致于都沒有感受到外面的風(fēng)雨飄搖,在工位上正在思索著整理下現(xiàn)有代碼時(shí),接到一個(gè)普通的需求,大致是要實(shí)現(xiàn)一個(gè)彈窗。
- 左側(cè)有一個(gè)可選字段列表,點(diǎn)擊任意一個(gè)字段,就會進(jìn)入右側(cè)。
- 右側(cè)有一個(gè)已選字段列表,該列表可以上下拖拽決定字段順序決定表格里的列字段顯示順序,同時(shí)也可以刪除,將其恢復(fù)到可選擇列表。
- 點(diǎn)擊保存,將用戶的字段配置存儲到后端,用戶下次再次使用查看該表格時(shí),使用已配置的顯示字段來展示。
這是一個(gè)非常普通的需求,我相信不少碼神看完后,腦海里已經(jīng)把代碼雛形大致寫完了吧,嘿嘿,但是還請耐性看完本篇文章,來看看在concent的加持下,你的react
應(yīng)用將如何變得更加靈活與美妙,正如我們的slogan:
concent, power your react
準(zhǔn)備工作
產(chǎn)品同學(xué)期望快速見到一般效果原型,而我希望原型是可以持續(xù)重構(gòu)和迭代的基礎(chǔ)代碼,當(dāng)然要認(rèn)真對待了,不能為了交差而亂寫一版,所以要快速整理需求并開始準(zhǔn)備工作了。
因?yàn)轫?xiàng)目大量基于antd
來書寫UI,聽完需求后,腦海里冒出了一個(gè)穿梭框模樣的組件,但因?yàn)橛覀?cè)是一個(gè)可拖拽列表,查閱了下沒有類似的組件,那就自己實(shí)現(xiàn)一個(gè)吧,初步整理下,大概列出了以下思路。
- 組件命名為
ColumnConfModal
,基于antd
的Modal
,Card
實(shí)現(xiàn)布局,antd
的List
來實(shí)現(xiàn)左側(cè)的選擇列表,基于react-beautiful-dnd
的可拖拽api來實(shí)現(xiàn)右側(cè)的拖拽列表。
- 因?yàn)檫@個(gè)彈窗組件在不同頁面被不同的table使用,傳入的列定義數(shù)據(jù)是不一樣的,所以我們使用事件的方式,來觸發(fā)打開彈窗并傳遞表格id,打開彈窗后獲取該表格的所有字段定義,以及用戶針對表哥的已選擇字段數(shù)據(jù),這樣把表格元數(shù)據(jù)的初始化工作收斂在
ColumnConfModal
內(nèi)部。 - 基于表格左右兩側(cè)的交互,大致定義一下內(nèi)部接口 1 moveToSelectedList(移入到已選擇列表 ) 2 moveToSelectableList(移入到可選擇列表) 3 saveSelectedList(保存用戶的已選擇列表) 4 handleDragEnd(處理已選擇列表順序調(diào)整完成時(shí)) 5 其他略.....
UI 實(shí)現(xiàn)
因?yàn)樽詾?code>concent組件后天生擁有了emit&on
的能力,而且不需要手動(dòng)off
,concent
在實(shí)例銷毀前自動(dòng)就幫你解除其事件監(jiān)聽,所以我們可以注冊完成后,很方便的監(jiān)聽openColumnConf
事件了。
我們先拋棄各種store和reducer定義,快速的基于class
擼出一個(gè)原型,利用register
接口將普通組件注冊為concent
組件,偽代碼如下
import { register } from 'concent'; class ColumnConfModal extends React.Component { state = { selectedColumnKeys: [], selectableColumnKeys: [], visible: false, }; componentDidMount(){ this.ctx.on('openColumnConf', ()=>{ this.setState({visible:true}); }); } moveToSelectedList = ()=>{ //code here } moveToSelectableList = ()=>{ //code here } saveSelectedList = ()=>{ //code here } handleDragEnd = ()=>{ //code here } render(){ const {selectedColumnKeys, selectableColumnKeys, visible} = this.state; return ( <Modal title="設(shè)置顯示字段" visible={state._visible} onCancel={settings.closeModal}> <Head /> <Card title="可選字段"> <List dataSource={selectableColumnKeys} render={item=>{ //...code here }}/> </Card> <Card title="已選字段"> <DraggableList dataSource={selectedColumnKeys} onDragEnd={this.handleDragEnd}/> </Card> </Modal> ); } } // es6裝飾器還處于實(shí)驗(yàn)階段,這里就直接包裹類了 // 等同于在class上@register( )來裝飾類 export default register( )(ColumnConfModal)
可以發(fā)現(xiàn),這個(gè)類的內(nèi)部和傳統(tǒng)的react
類寫法并無區(qū)別,唯一的區(qū)別是concent
會為每一個(gè)實(shí)例注入一個(gè)上下文對象ctx
來暴露concent
為react
帶來的新特性api。
消滅生命周期函數(shù)
因?yàn)槭录谋O(jiān)聽只需要執(zhí)行一次,所以例子中我們在componentDidMount
里完成了事件openColumnConf
的監(jiān)聽注冊。
根據(jù)需求,顯然的我們還要在這里書寫獲取表格列定義元數(shù)據(jù)和獲取用戶的個(gè)性化列定義數(shù)據(jù)的業(yè)務(wù)邏輯
componentDidMount() { this.ctx.on('openColumnConf', () => { this.setState({ visible: true }); }); const tableId = this.props.tid; tableService.getColumnMeta(`/getMeta/${tableId}`, (columns) => { userService.getUserColumns(`/getUserColumns/${tableId}`, (userColumns) => { //根據(jù)columns userColumns 計(jì)算selectedList selectableList }); }); }
所有的concent
實(shí)例可以定義setup
鉤子函數(shù),該函數(shù)只會在初次渲染前調(diào)用一次。
現(xiàn)在讓我們來用setup
代替掉此生命周期
//class 里定義的setup加$$前綴 $$setup(ctx){ //這里定義on監(jiān)聽,在組件掛載完畢后開始真正監(jiān)聽on事件 ctx.on('openColumnConf', () => { this.setState({ visible: true }); }); //標(biāo)記依賴列表為空數(shù)組,在組件初次渲染只執(zhí)行一次 //模擬componentDidMount ctx.effect(()=>{ //service call balabala..... }, []); }
如果已熟悉hook
的同學(xué),看到setup
里的effect
api語法是不是和useEffect
有點(diǎn)像?
effect
和useEffect
的執(zhí)行時(shí)機(jī)是一樣的,即每次組件渲染完畢之后,但是effect
只需要在setup
調(diào)用一次,相當(dāng)于是靜態(tài)的,更具有性能提升空間,假設(shè)我們加一個(gè)需求,每次vibible
變?yōu)閒alse時(shí),上報(bào)后端一個(gè)操作日志,就可以寫為
//依賴列表填入key的名稱,表示當(dāng)這個(gè)key的值發(fā)生變化時(shí),觸發(fā)副作用 ctx.effect( ctx=>{ if(!ctx.state.visible){ //當(dāng)前最新的visible已是false,上報(bào) } }, ['visible']);
關(guān)于effect
就點(diǎn)到為止,說得太多扯不完了,我們繼續(xù)回到本文的組件上。
提升狀態(tài)到store
我們希望組件的狀態(tài)變更可以被記錄下來,方便觀察數(shù)據(jù)變化,so,我們先定義一個(gè)store的子模塊,名為ColumnConf
,
定義其sate為
// code in ColumnConfModal/model/state.js export function getInitialState() { return { selectedColumnKeys: [], selectableColumnKeys: [], visible: false, }; } export default getInitialState();
然后利用concent
的configure
接口載入此配置
// code in ColumnConfModal/model/index.js import { configure } from 'concent'; import state from './state'; // 配置模塊ColumnConf configure('ColumnConf', { state, });
注意這里,讓model
跟著組件定義走,方便我們維護(hù)model
里的業(yè)務(wù)邏輯。
整個(gè)store
已經(jīng)被concent
掛載到了window.sss
下,為了方便查看store,當(dāng)當(dāng)當(dāng)當(dāng),你可以打開console,直接查看store
各個(gè)模塊當(dāng)前的最新數(shù)據(jù)。
然后我們把class注冊為'配置模ColumnConf
的組件,現(xiàn)在class
里的state聲明可以直接被我們干掉了。
import './model';//引用一下model文件,觸發(fā)model配置到concent @register('ColumnConf') class ColumnConfModal extends React.Component { // state = { // selectedColumnKeys: [], // selectableColumnKeys: [], // visible: false, // }; render(){ const {selectedColumnKeys, selectableColumnKeys, visible} = this.state; } }
大家可能注意到了,這樣暴力的注釋掉,render
里的代碼會不會出問題?放心吧,不會的,concent組件的state和store
是天生打通的,同樣的setState
也是和store
打通的,我們先來安裝一個(gè)插件concent-plugin-redux-devtool
。
import ReduxDevToolPlugin from 'concent-plugin-redux-devtool'; import { run } from 'concent'; // storeConfig配置略,詳情可參考concent官網(wǎng) run(storeConfig, { plugins: [ ReduxDevToolPlugin ] });
注意哦,concent
驅(qū)動(dòng)ui渲染的原理和redux
完全不一樣的,核心邏輯部分也不是在redux
之上做包裝,和redux
一點(diǎn)關(guān)系都沒有的^_^,這里只是橋接了redux-dev-tool
插件,來輔助做狀態(tài)變更記錄的,小伙伴們千萬不要誤會,沒有redux
,concent
一樣能夠正常運(yùn)作,但是由于concent
提供完善的插件機(jī)制,為啥不利用社區(qū)現(xiàn)有的優(yōu)秀資源呢,重復(fù)造無意義的輪子很辛苦滴(⊙﹏⊙)b......
現(xiàn)在讓我們打開chrome
的redux插件看看效果吧。
上圖里是含有大量的ccApi/setState,是因?yàn)檫€有不少邏輯沒有抽離到reducer
,dispatch/***
模樣的type就是dispatch
調(diào)用了,后面我們會提到。
這樣看狀態(tài)變遷是不是要比window.sss
好多了,因?yàn)?code>sss只能看當(dāng)前最新的狀態(tài)。
這里既然提到了redux-dev-tool
,我們就順道簡單了解下,concent提交的數(shù)據(jù)長什么樣子吧
上圖里可以看到5個(gè)字段,renderKey
是用于提高性能用的,可以先不作了解,這里我們就說說其他四個(gè),module
表示修改的數(shù)據(jù)所屬的模塊名,committedState
表示提交的狀態(tài),sharedState
表示共享到store
的狀態(tài),ccUniqueKey
表示觸發(fā)數(shù)據(jù)修改的實(shí)例id。
為什么要區(qū)分committedState
和sharedState
呢?因?yàn)?code>setState調(diào)用時(shí)允許提交自己的私有key的(即沒有在模塊里聲明的key),所以committedState
是整個(gè)狀態(tài)都要再次派發(fā)給調(diào)用者,而sharedState
是同步到store
后,派發(fā)給同屬于module
值的其他cc組件實(shí)例的。
這里就借用官網(wǎng)一張圖示意下:
所以我們可以在組件里聲明其他非模塊的key,然后在this.state
里獲取到了
@register('ColumnConf') class ColumnConfModal extends React.Component { state = { _myPrivKey:'i am a private field value, not for store', }; render(){ //這里同時(shí)取到了模塊的數(shù)據(jù)和私有的數(shù)據(jù) const {selectedColumnKeys, selectableColumnKeys, visible, _myPrivKey} = this.state; } }
解耦業(yè)務(wù)邏輯與UI
雖然代碼能夠正常工作,狀態(tài)也接入了store,但是我們發(fā)現(xiàn)class已經(jīng)變得臃腫不堪了,利用setState
懟固然快和方便,但是后期維護(hù)和迭代的代價(jià)就會慢慢越來越大,讓我們把業(yè)務(wù)抽到reduder
吧
export function setLoading(loading) { return { loading }; }; /** 移入到已選擇列表 */ export function moveToSelectedList() { } /** 移入到可選擇列表 */ export function moveToSelectableList() { } /** 初始化列表 */ export async function initSelectedList(tableId, moduleState, ctx) { //這里可以不用基于字符串 ctx.dispatch('setLoading', true) 去調(diào)用了,雖然這樣寫也是有效的 await ctx.dispatch(setLoading, true); const columnMeta = await tableService..getColumnMeta(`/getMeta/${tableId}`); const userColumsn = await userService.getUserColumns(`/getUserColumns/${tableId}`); //計(jì)算 selectedColumnKeys selectableColumnKeys 略 //僅返回需要設(shè)置到模塊的片斷state就可以了 return { loading: false, selectedColumnKeys, selectableColumnKeys }; } /** 保存已選擇列表 */ export async function saveSelectedList(tableId, moduleState, ctx) { } export function handleDragEnd() { }
利用concent
的configure
接口把reducer
也配置進(jìn)去
// code in ColumnConfModal/model/index.js import { configure } from 'concent'; import * as reducer from 'reducer'; import state from './state'; // 配置模塊ColumnConf configure('ColumnConf', { state, reducer, });
還記得上面的setup
嗎,setup
可以返回一個(gè)對象,返回結(jié)果將收集在settiings
里,現(xiàn)在我們稍作修改,然后來看看class吧,世界是不是清靜多了呢?
import { register } from 'concent'; class ColumnConfModal extends React.Component { $$setup(ctx) { //這里定義on監(jiān)聽,在組件掛載完畢后開始真正監(jiān)聽on事件 ctx.on('openColumnConf', () => { this.setState({ visible: true }); }); //標(biāo)記依賴列表為空數(shù)組,在組件初次渲染只執(zhí)行一次 //模擬componentDidMount ctx.effect(() => { ctx.dispatch('initSelectedList', this.props.tid); }, []); return { moveToSelectedList: (payload) => { ctx.dispatch('moveToSelectedList', payload); }, moveToSelectableList: (payload) => { ctx.dispatch('moveToSelectableList', payload); }, saveSelectedList: (payload) => { ctx.dispatch('saveSelectedList', payload); }, handleDragEnd: (payload) => { ctx.dispatch('handleDragEnd', payload); } } } render() { //從settings里取出這些方法 const { moveToSelectedList, moveToSelectableList, saveSelectedList, handleDragEnd } = this.ctx.settings; } }
愛class,愛hook,讓兩者和諧共處
react
社區(qū)轟轟烈烈推動(dòng)了Hook
,讓大家逐步用Hook
組件代替class
組件,但是本質(zhì)上Hook
逃離了this
,精簡了dom
渲染層級,但是也帶來了組件存在期間大量的臨時(shí)匿名閉包重復(fù)創(chuàng)建。
來看看concent
怎么解決這個(gè)問題的吧,上面已提到setup
支持返回結(jié)果,將被收集在settiings
里,現(xiàn)在讓稍微的調(diào)整下代碼,將class
組件吧變身為Hook
組件吧。
import { useConcent } from 'concent'; const setup = (ctx) => { //這里定義on監(jiān)聽,在組件掛載完畢后開始真正監(jiān)聽on事件 ctx.on('openColumnConf', (tid) => { ctx.setState({ visible: true, tid }); }); //標(biāo)記依賴列表為空數(shù)組,在組件初次渲染只執(zhí)行一次 //模擬componentDidMount ctx.effect(() => { ctx.dispatch('initSelectedList', ctx.state.tid); }, []); return { moveToSelectedList: (payload) => { ctx.dispatch('moveToSelectedList', payload); }, moveToSelectableList: (payload) => { ctx.dispatch('moveToSelectableList', payload); }, saveSelectedList: (payload) => { ctx.dispatch('saveSelectedList', payload); }, handleDragEnd: (payload) => { ctx.dispatch('handleDragEnd', payload); } } } const iState = { _myPrivKey: 'myPrivate state', tid:null }; export function ColumnConfModal() { const ctx = useConcent({ module: 'ColumnConf', setup, state: iState }); const { moveToSelectedList, moveToSelectableList, saveSelectedList, handleDragEnd } = ctx.settings; const { selectedColumnKeys, selectableColumnKeys, visible, _myPrivKey } = ctx.state; // return your ui }
在這里要感謝尤雨溪老師的這篇Vue Function-based API RFC,給了我很大的靈感,現(xiàn)在你可以看到所以的方法的都在setup
里定義完成,當(dāng)你的組件很多的時(shí)候,給gc減小的壓力是顯而易見的。
由于兩者的寫法高度一致,從class
到Hook
是不是非常的自然呢?我們其實(shí)不需要爭論該用誰更好了,按照你的個(gè)人喜好就可以,就算某天你看class
不順眼了,在concent
的代碼風(fēng)格下,重構(gòu)的代價(jià)幾乎為0。
使用組件
上面我們定義了一個(gè)on事件openColumnConf
,那么我們在其他頁面里引用組件ColumnConfModal
時(shí),當(dāng)然需要觸發(fā)這個(gè)事件打開其彈窗了。
import { emit } from 'concent'; class Foo extends React.Component { openColumnConfModal = () => { //如果這個(gè)類是一個(gè)concent組件 this.ctx.emit('openColumnConfModal', 3); //如果不是則可以調(diào)用頂層api emit emit('openColumnConfModal', 3); } render() { return ( <div> <button onClick={this.openColumnConfModal}>配置可見字段</button> <Table /> <ColumnConfModal /> </div> ); } }
上述寫法里,如果有其他很多頁面都需要引入ColumnConfModal
,都需要寫一個(gè)openColumnConfModal
,我們可以把這個(gè)打開邏輯抽象到modalService
里,專門用來打開各種彈窗,而避免在業(yè)務(wù)見到openColumnConfModal
這個(gè)常量字符串
//code in service/modal.js import { emit } from 'concent'; export function openColumnConfModal(tid) { emit('openColumnConfModal', tid); }
現(xiàn)在可以這樣使用組件來觸發(fā)事件調(diào)用了
import * as modalService from 'service/modal'; class Foo extends React.Component { openColumnConfModal = () => { modalService.openColumnConfModal(6); } render() { return ( <div> <button onClick={this.openColumnConfModal}>配置可見字段</button> <Table /> <ColumnConfModal /> </div> ); } }
結(jié)語
以上代碼在任何一個(gè)階段都是有效的,想要了解漸進(jìn)式重構(gòu)的在線demo可以點(diǎn)這里
由于本篇主題主要是介紹漸進(jìn)式
重構(gòu)組件,所以其他特性諸如sync
、computed$watch
、高性能殺手锏renderKey
等等內(nèi)容就不在這里展開講解了,更多關(guān)于concent重構(gòu)react的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
React Native之prop-types進(jìn)行屬性確認(rèn)詳解
本篇文章主要介紹了React Native之prop-types進(jìn)行屬性確認(rèn)詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12React創(chuàng)建組件的三種方式及其區(qū)別是什么
在React中,創(chuàng)建組件的三種主要方式是函數(shù)式組件、類組件和使用React Hooks的函數(shù)式組件,本文就詳細(xì)的介紹一下如何使用,感興趣的可以了解一下2023-08-08react實(shí)現(xiàn)每隔60s刷新一次接口的示例代碼
本文主要介紹了react實(shí)現(xiàn)每隔60s刷新一次接口的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06基于Webpack4和React hooks搭建項(xiàng)目的方法
這篇文章主要介紹了基于Webpack4和React hooks搭建項(xiàng)目的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02react?echarts?tree樹圖搜索展開功能示例詳解
這篇文章主要為大家介紹了react?echarts?tree樹圖搜索展開功能示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪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