摘要:剛好最近需要做一個(gè)答題小游戲的應(yīng)用,不想再上全家桶了,一是體積太大,二是無(wú)論配置還是寫起來(lái)都太繁瑣。內(nèi)置的內(nèi)置的擴(kuò)展支持內(nèi)置的熱更新模塊然后就可以了簡(jiǎn)單,可控,無(wú)痛的開(kāi)發(fā)環(huán)境和代碼組織。
在學(xué)習(xí)和使用 Fable + Elmish 一段時(shí)間之后,對(duì) Elm 架構(gòu)有了更具體的了解, 和預(yù)料中的一樣, Elm 風(fēng)格的框架果然還是和強(qiáng)類型的 Meta Language 語(yǔ)言更搭,只有一個(gè)字: 爽。 但是呢,F(xiàn)able 畢竟是一個(gè)小眾語(yǔ)言,使用的 F# 語(yǔ)法而且還是來(lái)自“萬(wàn)惡”的微軟,開(kāi)發(fā)環(huán)境還需要依賴 dotnet, 就這幾點(diǎn)恐怕在公司的一些正式項(xiàng)目中推行就有些難度。
剛好最近需要做一個(gè)答題小游戲的應(yīng)用,不想再上 React + Redux 全家桶了,一是體積太大,二是無(wú)論配置還是寫起來(lái)都太繁瑣。忽然發(fā)現(xiàn) hyperapp 讓我眼前一亮,簡(jiǎn)潔的架構(gòu),elm 風(fēng)格, 1kb 的體積,豐富的生態(tài),簡(jiǎn)直小應(yīng)用神器! 但是呢,在實(shí)際使用中就發(fā)現(xiàn),hyperapp 破壞性更新太多,導(dǎo)致很多第三方庫(kù),比如 persist, Redux Devtools, hmr 都不能用了,雖然這些庫(kù)實(shí)現(xiàn)都不復(fù)雜,但是一個(gè)個(gè)改太麻煩了,又不想用老版本,干脆自己重新造了個(gè)輪子 -- Hydux.
Hydux 的語(yǔ)法和 hyperapp 差不多,抽離了 view 層,特點(diǎn)是 內(nèi)置了 熱更新,logger, Redux Devtools 和 persist,依然是 1kb大小 (gzip, 不包括開(kāi)發(fā)環(huán)境),真正的一站式解決方案!
view 層內(nèi)置了 1kb 的 picodom, 同時(shí)也有官方支持的 React 擴(kuò)展 使用 React 來(lái)渲染.
說(shuō)了這么多,還是上點(diǎn)代碼:
首先我們有一個(gè) counter 模塊,代碼和 Elm 的組織方式很類似,不需要想 Redux 在 Actions/Reducers/ActionTypes 中跳來(lái)跳去的
// Counter.js export default { init: () => ({ count: 1 }), // 初始化狀態(tài) actions: { // actions 改變狀態(tài) down: () => state => ({ count: state.count - 1 }), up: () => state => ({ count: state.count + 1 }) }, view: (state: State) => (actions: Actions) => // view}{state.count}
然后呢,我們可以像 Elm 一樣 復(fù)用 模塊, 以前在用 Redux 時(shí)總是會(huì)面臨不知道怎么復(fù)用才好的問(wèn)題,而實(shí)際上 Elm 的復(fù)用是超級(jí)簡(jiǎn)單和方便的。
import _app from "hydux" import withPersist from "hydux/lib/enhancers/persist" import withPicodom, { h, React } from "hydux/lib/enhancers/picodom-render" import Counter from "./counter" // let app = withPersist({ // key: "my-counter-app/v1" // })(_app) // use built-in 1kb picodom to render the view. let app = withPicodom()(_app) if (process.env.NODE_ENV === "development") { // built-in dev tools, without pain. const devTools = require("hydux/lib/enhancers/devtools").default const logger = require("hydux/lib/enhancers/logger").default const hmr = require("hydux/lib/enhancers/hmr").default app = logger()(app) // 內(nèi)置的 logger app = devTools()(app) // 內(nèi)置的 Redux Devtools 擴(kuò)展支持 app = hmr()(app) // 內(nèi)置的熱更新模塊 } const actions = { counter1: Counter.actions, counter2: Counter.actions, } const state = { counter1: Counter.init(), counter2: Counter.init(), } const view = (state: State) => (actions: Actions) => export default app({ init: () => state, actions, view, }) Counter1:
{Counter.view(state.counter1)(actions.counter1)}Counter2:
{Counter.view(state.counter2)(actions.counter2)}
然后就可以了!簡(jiǎn)單,可控,無(wú)痛的開(kāi)發(fā)環(huán)境和代碼組織。
在線 demo
異步使用的是類似 Elm 的副作用管理器風(fēng)格, actions 可以是完全純的函數(shù),也可以是直接返回一個(gè) promise: https://github.com/hydux/hydu...
官網(wǎng): https://github.com/hydux/hydux
官方支持的 React 擴(kuò)展: https://github.com/hydux/hydu...
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/90303.html
摘要:但是,有一件事是肯定的年對(duì)全棧開(kāi)發(fā)者的需求量很大。有一些方法可以解決這個(gè)問(wèn)題,例如模式,或者你可以這么想,其實(shí)谷歌機(jī)器人在抓取單頁(yè)應(yīng)用程序時(shí)沒(méi)有那么糟糕。谷歌正在這方面努力推進(jìn),但不要指望在年會(huì)看到任何突破。 對(duì)于什么是全棧開(kāi)發(fā)者并沒(méi)有一個(gè)明確的定義。但是,有一件事是肯定的:2019 年對(duì)全棧開(kāi)發(fā)者的需求量很大。在本文中,我將向你概述一些趨勢(shì),你可以嘗試根據(jù)這些趨勢(shì)來(lái)確定你可能要投入的...
摘要:但是,有一件事是肯定的年對(duì)全棧開(kāi)發(fā)者的需求量很大。有一些方法可以解決這個(gè)問(wèn)題,例如模式,或者你可以這么想,其實(shí)谷歌機(jī)器人在抓取單頁(yè)應(yīng)用程序時(shí)沒(méi)有那么糟糕。谷歌正在這方面努力推進(jìn),但不要指望在年會(huì)看到任何突破。 對(duì)于什么是全棧開(kāi)發(fā)者并沒(méi)有一個(gè)明確的定義。但是,有一件事是肯定的:2019 年對(duì)全棧開(kāi)發(fā)者的需求量很大。在本文中,我將向你概述一些趨勢(shì),你可以嘗試根據(jù)這些趨勢(shì)來(lái)確定你可能要投入的...
摘要:但是,有一件事是肯定的年對(duì)全棧開(kāi)發(fā)者的需求量很大。有一些方法可以解決這個(gè)問(wèn)題,例如模式,或者你可以這么想,其實(shí)谷歌機(jī)器人在抓取單頁(yè)應(yīng)用程序時(shí)沒(méi)有那么糟糕。谷歌正在這方面努力推進(jìn),但不要指望在年會(huì)看到任何突破。 對(duì)于什么是全棧開(kāi)發(fā)者并沒(méi)有一個(gè)明確的定義。但是,有一件事是肯定的:2019 年對(duì)全棧開(kāi)發(fā)者的需求量很大。在本文中,我將向你概述一些趨勢(shì),你可以嘗試根據(jù)這些趨勢(shì)來(lái)確定你可能要投入的...
摘要:前端每周清單半年盤點(diǎn)之與篇前端每周清單專注前端領(lǐng)域內(nèi)容,以對(duì)外文資料的搜集為主,幫助開(kāi)發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開(kāi)發(fā)教程工程實(shí)踐深度閱讀開(kāi)源項(xiàng)目巔峰人生等欄目。與求同存異近日,宣布將的構(gòu)建工具由遷移到,引發(fā)了很多開(kāi)發(fā)者的討論。 前端每周清單半年盤點(diǎn)之 React 與 ReactNative 篇 前端每周清單專注前端領(lǐng)域內(nèi)容,以對(duì)外文資料的搜集為主,幫助開(kāi)發(fā)者了解一周前端熱點(diǎn);分為...
摘要:更多參考通過(guò)庫(kù)掌握函數(shù)組件有些時(shí)候,我們想要?jiǎng)討B(tài)的加載一些組件按需加載,比如在一個(gè)單頁(yè)面應(yīng)用中頁(yè)面的組件頁(yè)面的組件頁(yè)面的組件只有真正要實(shí)例化當(dāng)前頁(yè)面的時(shí)候,才會(huì)去加載相應(yīng)的組件。 react 前端項(xiàng)目技術(shù)選型、開(kāi)發(fā)工具、周邊生態(tài) 聲明:這不是一篇介紹 React 基礎(chǔ)知識(shí)的文章,需要熟悉 React 相關(guān)知識(shí) 主架構(gòu):react, react-router, redux, redux...
閱讀 3069·2021-09-28 09:43
閱讀 902·2021-09-08 09:35
閱讀 1440·2019-08-30 15:56
閱讀 1183·2019-08-30 13:00
閱讀 2732·2019-08-29 18:35
閱讀 1829·2019-08-29 14:07
閱讀 3432·2019-08-29 13:13
閱讀 1333·2019-08-29 12:40