}> , rootElement );
Concent 初體驗(yàn)
如果讀過 concent 文檔(還在持續(xù)建設(shè)中...),可能部分人會(huì)認(rèn)為 api 太多,難于記住,其實(shí)大部分都是可選的語法糖,我們以 counter 為例,只需要使用到以下兩個(gè) api 即可 run,定義模塊狀態(tài)(必需)、模塊計(jì)算(可選)、模塊觀察(可選) 運(yùn)行 run 接口后,會(huì)生成一份 concent 全局上下文 setState,修改狀態(tài)
定義狀態(tài)&修改狀態(tài)
以下示例我們先脫離 ui,直接完成定義狀態(tài)&修改狀態(tài)的目的 import { run, setState, getState } from "concent"; run({ counter: {// 聲明一個(gè) counter 模塊 state: { num: 1 }, // 定義狀態(tài) } }); console.log(getState('counter').num);// log: 1 setState('counter', {num:10});// 修改 counter 模塊的 num 值為 10 console.log(getState('counter').num);// log: 10
我們可以看到,此處和 redux 很類似,需要定義一個(gè)單一的狀態(tài)樹,同時(shí)第一層 key 就引導(dǎo)用戶將數(shù)據(jù)模塊化管理起來.
引入 reducer
上述示例中我們直接掉一個(gè)呢 setState 修改數(shù)據(jù),但是真實(shí)的情況是數(shù)據(jù)落地前有很多同步的或者異步的業(yè)務(wù)邏輯操作,所以我們對(duì)模塊填在 reducer 定義,用來聲明修改數(shù)據(jù)的方法集合。 import { run, dispatch, getState } from "concent"; const delay = () => new Promise(r => setTimeout(r, 1000)); const state = () => ({ num: 1 });// 狀態(tài)聲明 const reducer = {// reducer 聲明 inc(payload, moduleState) { return { num: moduleState.num + 1 }; }, async asyncInc(payload, moduleState) { await delay(); return { num: moduleState.num + 1 }; } }; run({ counter: { state, reducer } });
然后我們用 dispatch 來觸發(fā)修改狀態(tài)的方法 因 dispatch 會(huì)返回一個(gè) Promise,所以我們需要用一個(gè) async 包裹起來執(zhí)行代碼 import { dispatch } from "concent"; (async ()=>{ console.log(getState("counter").num);// log 1 await dispatch("counter/inc");// 同步修改 console.log(getState("counter").num);// log 2 await dispatch("counter/asyncInc");// 異步修改 console.log(getState("counter").num);// log 3 })()
注意 dispatch 調(diào)用時(shí)基于字符串匹配方式,之所以保留這樣的調(diào)用方式是為了照顧需要?jiǎng)討B(tài)調(diào)用的場(chǎng)景,其實(shí)更推薦的寫法是 import { dispatch } from "concent"; (async ()=>{ console.log(getState("counter").num);// log 1 await dispatch(reducer.inc);// 同步修改 console.log(getState("counter").num);// log 2 await dispatch(reducer.asyncInc);// 異步修改 console.log(getState("counter").num);// log 3 })()
接入 react
上述示例主要演示了如何定義狀態(tài)和修改狀態(tài),那么接下來我們需要用到以下兩個(gè) api 來幫助 react 組件生成實(shí)例上下文(等同于與 vue 3 setup 里提到的渲染上下文),以及獲得消費(fèi) concent 模塊數(shù)據(jù)的能力 register, 注冊(cè)類組件為 concent 組件 useConcent, 注冊(cè)函數(shù)組件為 concent 組件 import { register, useConcent } from "concent"; @register("counter") class ClsComp extends React.Component { changeNum = () => this.setState({ num: 10 }) render() { return ( ); } } function FnComp() { const { state, setState } = useConcent("counter"); const changeNum = () => setState({ num: 20 }); return ( ); }
注意到兩種寫法區(qū)別很小,除了組件的定義方式不一樣,其實(shí)渲染邏輯和數(shù)據(jù)來源都一模一樣。
渲染它們查看結(jié)果
在線示例 const rootElement = document.getElementById("root"); ReactDOM.render(

, rootElement );
對(duì)比 Recoil ,我們發(fā)現(xiàn)沒有頂層并沒有 Provider 或者 Root 類似的組件包裹,react 組件就已接入 concent,做到真正的即插即用和無感知接入,同時(shí) api 保留為與 react 一致的寫法。
組件調(diào)用 reducer
concent 為每一個(gè)組件實(shí)例都生成了實(shí)例上下文,方便用戶直接通過 ctx.mr 調(diào)用 reducer 方法 mr 為 moduleReducer 的簡(jiǎn)寫,直接書寫為 ctx.moduleReducer 也是合法的 // --------- 對(duì)于類組件 ----------- changeNum = () => this.setState({ num: 10 }) // ===> 修改為 changeNum = () => this.ctx.mr.inc(10);// or this.ctx.mr.asynCtx() // --------- 對(duì)于函數(shù)組件 ----------- const { state, mr } = useConcent("counter");// useConcent 返回的就是 ctx const changeNum = () => mr.inc(20);// or ctx.mr.asynCtx()
異步計(jì)算函數(shù)
run 接口里支持?jǐn)U展 computed 屬性,即讓用戶定義一堆衍生數(shù)據(jù)的計(jì)算函數(shù)集合,它們可以是同步的也可以是異步的,同時(shí)支持一個(gè)函數(shù)用另一個(gè)函數(shù)的輸出作為輸入來做二次計(jì)算,計(jì)算的輸入依賴是自動(dòng)收集到的。 const computed = {// 定義計(jì)算函數(shù)集合 numx10({ num }) { return num * 10; }, // n:newState, o:oldState, f:fnCtx // 結(jié)構(gòu)出 num,表示當(dāng)前計(jì)算依賴是 num,僅當(dāng) num 發(fā)生變化時(shí)觸發(fā)此函數(shù)重計(jì)算 async numx10_2({ num }, o, f) { // 必需調(diào)用 setInitialVal 給 numx10_2 一個(gè)初始值, // 該函數(shù)僅在初次 computed 觸發(fā)時(shí)執(zhí)行一次 f.setInitialVal(num * 55); await delay(); return num * 100; }, async numx10_3({ num }, o, f) { f.setInitialVal(num * 1); await delay(); // 使用 numx10_2 再次計(jì)算 const ret = num * f.cuVal.numx10_2; if (ret % 40000 === 0) throw new Error("-->mock error"); return ret; } } // 配置到 counter 模塊 run({ counter: { state, reducer, computed } });
上述計(jì)算函數(shù)里,我們刻意讓 numx10_3 在某個(gè)時(shí)候報(bào)錯(cuò),對(duì)于此錯(cuò)誤,我們可以在 run 接口的第二位 options 配置里定義 errorHandler 來捕捉。 run({/**storeConfig*/}, { errorHandler: (err)=>{ alert(err.message); } })
當(dāng)然更好的做法,利用 concent-plugin-async-computed-status 插件來完成對(duì)所有模塊計(jì)算函數(shù)執(zhí)行狀態(tài)的統(tǒng)一管理。 import cuStatusPlugin from "concent-plugin-async-computed-status"; run( {/**storeConfig*/}, { errorHandler: err => { console.error('errorHandler ', err); // alert(err.message); }, plugins: [cuStatusPlugin], // 配置異步計(jì)算函數(shù)執(zhí)行狀態(tài)管理插件 } );
該插件會(huì)自動(dòng)向 concent 配置一個(gè) cuStatus 模塊,方便組件連接到它,消費(fèi)相關(guān)計(jì)算函數(shù)的執(zhí)行狀態(tài)數(shù)據(jù) function Test() { const { moduleComputed, connectedState, setState, state, ccUniqueKey } = useConcent({ module: "counter",// 屬于 counter 模塊,狀態(tài)直接從 state 獲得 connect: ["cuStatus"],// 連接到 cuStatus 模塊,狀態(tài)從 connectedState.{$moduleName}獲得 }); const changeNum = () => setState({ num: state.num + 1 }); // 獲得 counter 模塊的計(jì)算函數(shù)執(zhí)行狀態(tài) const counterCuStatus = connectedState.cuStatus.counter; // 當(dāng)然,可以更細(xì)粒度的獲得指定結(jié)算函數(shù)的執(zhí)行狀態(tài) // const {['counter/numx10_2']:num1Status, ['counter/numx10_3']: num2Status} = connectedState.cuStatus; return ( ); }
![] https://raw.githubusercontent.com/fantasticsoul/assets/master/article-img/recoil-vs-concent/r4.gif )
查看在線示例
精確更新
開篇我說對(duì) Recoli 提到的 精確更新 保持了懷疑態(tài)度,有一些誤導(dǎo)的嫌疑,此處我們將揭開疑團(tuán)
大家知道 hook 使用規(guī)則是不能寫在條件控制語句里的,這意味著下面語句是不允許的 const NumView = () => { const [show, setShow] = useState(true); if(show){// error const [num, setNum] = useRecoilState(numState); } }
所以用戶如果 ui 渲染里如果某個(gè)狀態(tài)用不到此數(shù)據(jù)時(shí),某處改變了 num 值依然會(huì)觸發(fā) NumView 重渲染,但是 concent 的實(shí)例上下文里取出來的 state 和 moduleComputed 是一個(gè) Proxy 對(duì)象,是在實(shí)時(shí)的收集每一輪渲染所需要的依賴,這才是真正意義上的按需渲染和精確更新。 const NumView = () => { const [show, setShow] = useState(true); const {state} = useConcent('counter'); // show 為 true 時(shí),當(dāng)前實(shí)例的渲染對(duì) state.num 的渲染有依賴 return {show ?

{state.num}

: 'nothing'} }
點(diǎn)我查看代碼示例
當(dāng)然如果用戶對(duì) num 值有 ui 渲染完畢后,有發(fā)生改變時(shí)需要做其他事的需求,類似 useEffect 的效果,concent 也支持用戶將其抽到 setup 里,定義 effect 來完成此場(chǎng)景訴求,相比 useEffect ,setup 里的 ctx.effect 只需定義一次,同時(shí)只需傳遞 key 名稱,concent 會(huì)自動(dòng)對(duì)比前一刻和當(dāng)前刻的值來決定是否要觸發(fā)副作用函數(shù)。 conset setup = (ctx)=>{ ctx.effect(()=>{ console.log('do something when num changed'); return ()=>console.log('clear up'); }, ['num']) } function Test1(){ useConcent({module:'cunter', setup}); return

for setup

}
更多關(guān)于 effect 與 useEffect 請(qǐng)查看此文
結(jié)語
Recoil 推崇狀態(tài)和派生數(shù)據(jù)更細(xì)粒度控制,寫法上 demo 看起來簡(jiǎn)單,實(shí)際上代碼規(guī)模大之后依然很繁瑣。
Concent 遵循 redux 單一狀態(tài)樹的本質(zhì),推崇模塊化管理數(shù)據(jù)以及派生數(shù)據(jù),同時(shí)依靠 Proxy 能力完成了 運(yùn)行時(shí)依賴收集 和 追求不可變 的完美整合。
所以你將獲得： 運(yùn)行時(shí)的依賴收集 ,同時(shí)也遵循 react 不可變的原則 一切皆函數(shù)(state, reducer, computed, watch, event...),能獲得更友好的 ts 支持 支持中間件和插件機(jī)制,很容易兼容 redux 生態(tài) 同時(shí)支持集中與分形模塊配置,同步與異步模塊加載,對(duì)大型工程的彈性重構(gòu)過程更加友好
最后解答一下關(guān)于 concent 是否支持 current mode 的疑惑,先上結(jié)論,100%支持。
我們首先要理解 current mode 原理是因?yàn)?fiber 架構(gòu)模擬出了和整個(gè)渲染堆棧(即 fiber node 上存儲(chǔ)的信息),得以有機(jī)會(huì)讓 react 自己以組件為單位調(diào)度組件的渲染過程,可以懸停并再次進(jìn)入渲染,安排優(yōu)先級(jí)高的先渲染,重度渲染的組件會(huì)切片為多個(gè)時(shí)間段反復(fù)渲染,而 concent 的上下文本身是獨(dú)立于 react 存在的（接入 concent 不需要再頂層包裹任何 Provider ）, 只負(fù)責(zé)處理業(yè)務(wù)生成新的數(shù)據(jù),然后按需派發(fā)給對(duì)應(yīng)的實(shí)例,之后就是 react 自己的調(diào)度流程,修改狀態(tài)的函數(shù)并不會(huì)因?yàn)榻M件反復(fù) 重入 而多次執(zhí)行(這點(diǎn)需要我們遵循不該在渲染過程中書寫包含有副作用的代碼原則),react 僅僅是調(diào)度組件的渲染時(shí)機(jī)。
? star me if you like concent ^_^
Edit on CodeSandbox
Edit on StackBlitz
如果有關(guān)于 concent 的疑問,可以掃碼加群咨詢,會(huì)盡力答疑解惑,幫助你了解更多,里面的不少小伙伴都變成老司機(jī)了,用過之后都表示非常 happy,客官上船試試便知??。