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