fx360bx

入面有足夠多智慧去參考





利申：100% 自己啲 side-project，呢排國難所以暫緩咗未做完，做完就會 Ope ...
hihihi123hk 發表於 2019-9-25 08:46

    原來係咁，冇諗過係用 switch，以為有啲更 generic 做法。其實可唔可以整個 JSON config object 去 map element string 去 G 字頭既 components，然後用 React.createElement？

hihihi123hk

其實你講既呢樣係咩黎架？幾何需要咁做？



    想問點解唔揀 Redux？咩情況下 prefer MobX over Re ...
fx360bx 發表於 2019-9-25 00:34

任何情況我都會揀 MobX，除非 Project 有 Technical Constraint 必定要用 Redux

而每當有人問 MobX 有幾好

我都會叫先用 Redux 做以下 Mini-App

https://gaplo917.github.io/mobx-react-mvvm-example

只係一般 crypto price feed，建議唔好 Google 我寫嗰個答案住，否則會影響到自己思考及學習過程，一定學得多過 TODO List

睇個 Mini-App 嘅時候記得裝 React Chrome Plugin 睇番跳緊嘅 Component 邊啲 re-render 過

試下用 Redux 做番一模一樣嘅 App with SAME Performance

資源：用免費 Crypto Websocket API Doc 已夠做
https://github.com/binance-excha ... b-socket-streams.md

做好或者卡咗半個月都寫唔出，再搵番我用 MobX 寫嗰個答案比較下

溫提：呢個例子要做到 Same Performance 以及 Good Architecture 係最難；砌 UI 、Read Websocket 有邊個唔識

via HKEPC IR Extreme 4.2.3 - iOS(4.0.2)

fx360bx

任何情況我都會揀 MobX，除非 Project 有 Technical Constraint 必定要用 Redux

而每當有人問 MobX 有幾 ...
hihihi123hk 發表於 2019-9-25 09:33

    咁但係一般普通 projects 應該唔洗用到 MobX 架喎，又唔係個個 project 都要拎 real time market feed。
點解唔係：「任何情況我都會揀 Redux，除非 Project 有 Technical Constraint 必定要用 MobX」？因為你呢個 project 唔係一般既填 form workflow project，而係要成頁 display 成百個 items，每個 item 又要幾百 ms update 一次咁，所以應該係你呢個 project 有特殊需要 "technical constraint" 喎。我又唔信你喺之前講果個 markdown project 用 MobX 會比 Redux 好，以致任何 project 都首選 MobX。如果你可以講到一般 project 點樣 benefit from MobX 而 Redux 做唔到或做得冇咁好，我會覺得有參考價值多啲，因為我唔係做開 market feed 同 WebSocket 。

Btw 呢個例子要試 Redux vs MobX performance 既話，如果唔 subscribe 落 WebSocket 度，最簡單 setInterval + Math.random 黎試又可唔可以模擬到有 update？

hihihi123hk

咁但係一般普通 projects 應該唔洗用到 MobX 架喎，又唔係個個 project 都要拎 real time market fe ...
fx360bx 發表於 2019-9-25 12:44

兩樣完全唔同嘅 Data flow    

設計個 Mind-set 都完全唔同

另外 Price feed 例子中，你完全誤會咗我個例子，用 MobX 絕對冇特別優勢，平時就算 TODO List MobX 都係咁寫，亦代表平時都係自動解決 re-render 問題

至於 Redux 做 Price feed 都冇特別優勢，不過新手一黎就會遇到 re-render 嘅 Performance 問題，呢個係天生 Redux 叉出黎要你自己解決嘅問題，任何 Application 當你追求 Performance 都會遇到，識得解決埋 Performance 問題先至叫真正用緊 Redux

例如你 Redux 想 update UserProfile，User 有 10 幾個fields，我有一個 field update 但唔想十幾個 Fields 個 UI 都 Re-render 一次，Redux 要額外做野，MobX 天生正確用佢嘅方法 Impl 就天生解決咗


另外，我個 Gatsby Blog 都係用 MobX Architecture  

點解任何 Project 都揀 MobX over Redux？因為 Reactivity + derived state 先係最 intuitive 咁開發 UI Data Flow；用 Redux 要額外花時間 Architect / 設計個 Reducer、諗點樣 dispatch event 最合適、諗點解可以容易加減 State/ Action、仲要花時間搞 re-render 問題

MobX 要正確咁用到係難過 Redux（因為多啲魔術）

Redux 個概念（好少魔術），學得快但你要深入處理嘅野就一定會多咗

MobX/Redux 係兩個完全唔同 dimensions 去管理 Data Flow

via HKEPC IR Extreme 4.2.3 - iOS(4.0.2)

fx360bx

兩樣完全唔同嘅 Data flow   

設計個 Mind-set 都完全唔同

另外 Price feed 例子中，你完全誤 ...
hihihi123hk 發表於 2019-9-25 18:33

    以我所知 re-render 唔係好食 resources，render 完或者 function components return 既 DOM tree 如果同之前唔同，要 patch 返個 real DOM 先食 resources，唔知我有冇理解錯。

有睇過話用 PureComponent / memo 可以自動 shallow diff 從而減少 render。不過我相信最理想都係 React 唔 trigger component re-render？

用 Redux 要額外花時間 Architect / 設計個 Reducer、諗點樣 dispatch event 最合適、諗點解可以容易加減 State/ Action、仲要花時間搞 re-render 問題

MobX 要正確咁用到係難過 Redux（因為多啲魔術）

咁即係唔可以好簡單咁換個 library 做返類似既 config 就用到 MobX？
你講 Redux 要花時間 design reducer 同點 dispatch events，我個人懷疑呢樣係咪真係咁重要，我而家都係當佢一個 global data store 咁，有野就放落去，只係 input 果啲我 onBlur 先放一次。另外好似話 selector 最好唔好 select 一個好大既 nested object，直接去到個 string/boolean/number 比較好。

Btw 聽你咁講，新手喺一般 project 上用 Redux 比較好？

hihihi123hk

以我所知 re-render 唔係好食 resources，render 完或者 function components return 既 DOM tree  ...
fx360bx 發表於 2019-9-25 20:32

> 我而家都係當佢一個 global data store 咁，有野就放落去

requirements 隔一排就會變，冇諗清楚究竟係開新 Reducer 定放落同一個度，啲 Action 求奇咁開，個 State 求其咁 spread 加新 field {...original, xxx}

好快你就會見到成舊野開始難 Maintain，唔知邊度拎咗啲乜，好多地方 Couple 咗同一個 Store

有 Test 都仲撐到嘅，但如果你無 Test 就更嚴峻 基本上好難 Refactor

我認同 Redux 係一個好嘅 Pattern，但大前提你一定要設計得好你個 Data Flow，咁先真正發揮到佢，唔係要乜就加乜。
加 Requirements 時，需要諗清楚係咪其實係同一個 Action / State，應該 Revamp 埋其它已寫好嘅去處理加新 Requirement 嘅 Logic

減 Requirements 時，必定要清哂啲唔關事嘅野，但 Redux 好多時會發展到你都唔知有乜 Del 得/ Trace 到佛誕先知

係呢個層面，MobX 主張 Fragmented Store 加埋佢其它魔術 Feature，開發時直接好多，無咁多顧慮

另外，現實 Requirement 上想好靚咁處理 Async，Redux 好難唔加 Saga 去做，又一個大 Learning Curve...

MobX 天生係 Asynchronous Data Stream 概念，基本上唔洗加任何野已經可以好靚咁處理到

via HKEPC IR Extreme 4.2.3 - iOS(4.0.2)

fx360bx

> 我而家都係當佢一個 global data store 咁，有野就放落去

requirements 隔一排就會變，冇諗清楚究竟係 ...
hihihi123hk 發表於 2019-9-26 08:47

    咁我都睇下 MobX 先，不過你所講用 Redux 既設計問題，MobX 上會冇咩？

如果我好多個 components 都要用 global state 既時候，啲野周圍都係既情況，然後當有新 requirements 要加 field，喺 MobX 既世界唔會發生？

hihihi123hk

咁我都睇下 MobX 先，不過你所講用 Redux 既設計問題，MobX 上會冇咩？

如果我好多個 components  ...
fx360bx 發表於 2019-9-26 09:18

Redux: Single Giant Observable
MobX: Fragmented Observable

正確咁用 MobX 你會有好多個 "Store"，將啲責任天生分得好清楚    更加直觀易管理

當然，誤用嘅人一定多過正確咁用，始終 Reactive Data Stream 呢個概念要花一段時間消化，再訓練自己點用

例如，MobX 我 global 有個 ApplicationContext 拎住個 AuthenticatedUser(Observable)，咁我下游可以 Depends on User 再有個 Store, 例如 MenuStore

Menu UI 有需要出 username, 咁喺 MenuStore 就可以做個 Computed(derived) state, 每當任何地方改咗 Global User，呢度都自動 Derive 再自動 Update UI

@computed
username() {
  return ctx.user.username
}

Menu UI 有 Logout 制，咁喺 MenuStore 就可以做個 Logout Action

@action
logout() {
  ctx.logout()
}

因為 fragmented Store 關係，係 MobX 世界，加 fields 加 Action 都係好針對性，唔會下下撩 Global

via HKEPC IR Extreme 4.2.3 - iOS(4.0.2)

fx360bx

Redux: Single Giant Observable
MobX: Fragmented Observable

正確咁用 MobX 你會有好多個 "Store"，將 ...
hihihi123hk 發表於 2019-9-26 09:33

    I see，咁 Redux 上用 multiple reducers 又得唔得？算唔算唔係 single giant observable？

hihihi123hk

I see，咁 Redux 上用 multiple reducers 又得唔得？算唔算唔係 single giant observable？ ...
fx360bx 發表於 2019-9-26 09:42

MobX 可以細到每個有 Logic 嘅 Component 一個 Store 而係 Make Sense

我個 Price Feed 答案就係其中一個例子 （React MVVM)

P.S. 冇 MobX 提供嘅魔術，係 React 係唔應該/好難做 MVVM

你覺得 Redux 做唔做到


via HKEPC IR Extreme 4.2.3 - iOS(4.0.2)