動機(jī)
React是一個用于構(gòu)建UI的JavaScript庫，但當(dāng)我們要基于React開發(fā)應(yīng)用時霹娄，往往要做很多的構(gòu)建配置和很多其他庫的選型(挑選和學(xué)習(xí)一個React狀態(tài)庫和路由器庫等)能犯。我們還需要考慮我們的業(yè)務(wù)邏輯應(yīng)該如何抽象和結(jié)構(gòu)化。每個React開發(fā)者都在實(shí)踐著自己對React構(gòu)建的認(rèn)知犬耻，但這并不能讓我們快速關(guān)注業(yè)務(wù)邏輯本身踩晶。隨著應(yīng)用業(yè)務(wù)規(guī)模的擴(kuò)大，我們迫切需要一個易于理解和維護(hù)的框架枕磁。
而對于應(yīng)用的業(yè)務(wù)邏輯結(jié)構(gòu)化設(shè)計渡蜻，關(guān)注點(diǎn)分離是個好主意。它要求明確責(zé)任邊界计济，避免UI邏輯和業(yè)務(wù)邏輯混雜時可維護(hù)性低茸苇。我們在構(gòu)建應(yīng)用時，總是要關(guān)注業(yè)務(wù)邏輯沦寂。它是一個應(yīng)用的業(yè)務(wù)核心價值之一学密。我們希望它易于維護(hù)、測試传藏。Redux仍然是React中最流行的狀態(tài)庫腻暮。它完全符合React不可改變的原則。Redux只是一個狀態(tài)容器毯侦，而我們往往不知道如何真正管理這些狀態(tài)哭靖。我們需要一個可擴(kuò)展、松散耦合叫惊、易維護(hù)的React應(yīng)用框架款青。
React是一個優(yōu)秀的UI庫，但就算React有了hooks霍狰，它依然不足以解決我們在開發(fā)大型應(yīng)用中的種種問題抡草。我們依然沒有模塊依賴注入饰及，我們沒有很好的AOP實(shí)踐模型，我們沒有達(dá)到很好最小化模塊系統(tǒng)抽象的可能康震，我們也無法更好的實(shí)踐DDD燎含，等等。這些問題都是React之外腿短，我們需要思考和解決的屏箍。
當(dāng)然，這里我并不是要討論React是否需要加入這些特性橘忱，它已經(jīng)足夠優(yōu)秀了赴魁。這里真正要討論的是：我們是否需要一個React框架呢？
為了解決這些架構(gòu)問題钝诚，Reactant應(yīng)運(yùn)而生 ——— 它是一個React框架颖御。
Reactant簡介
Reactant能高效地構(gòu)建可擴(kuò)展、可維護(hù)的React應(yīng)用凝颇。Reactant基于TypeScript潘拱，但它同時支持TypeScript和JavaScript（為了更好的開發(fā)體驗(yàn)，推薦使用TypeScript）拧略。Reactant提供了依賴注入芦岂、模塊化模型、不可變狀態(tài)管理垫蛆、模塊動態(tài)化等功能禽最。它是可插件化、高度可測試的月褥。它不僅能夠快速構(gòu)建React應(yīng)用（Web和Native Mobile）弛随，還帶來了一些新的React開發(fā)體驗(yàn)。Reactant也保持恰當(dāng)?shù)撵`活性宁赤。使用了Reactant舀透，你依然可以擁抱OOP，F(xiàn)P决左，F(xiàn)RP等編程范式愕够，你依然能夠擁抱整個React生態(tài)。
Reactant受到Angular不少優(yōu)秀特性的啟發(fā)佛猛，例如Reactant提供和Angular相類似的依賴注入的API惑芭。但Reactant并不是Angular編程思想在React框架上的一次復(fù)制，Reactant提供了更少更簡潔的API继找，它足夠應(yīng)付各種開發(fā)應(yīng)用的編程場景遂跟。
它是對React的一次完整架構(gòu)。
解決了什么問題
Reactant是一個漸進(jìn)式的框架。在開發(fā)應(yīng)用從簡單到復(fù)雜的過程中幻锁，它都能在每個階段提供適合的feature凯亮，基于它的系統(tǒng)架構(gòu)設(shè)計也能進(jìn)行各種漸進(jìn)式的平滑升級與演進(jìn)。
更好的immutable狀態(tài)管理
React更倡導(dǎo)的immutable狀態(tài)類型管理哄尔，Redux顯然符合它假消。但事實(shí)上，類似MobX這樣簡潔的突變的更新操作越來越符合當(dāng)下流行的趨勢岭接。因此Reactant基于Redux和Immer提供了新的不可變狀態(tài)管理模型富拗，它融合了MobX相似的API元素，更重要的是它依然保持了狀態(tài)的不可變性鸣戴。
@injectable()
class TodoList {
@state
list: Todo[] = [];
@action
addTodo(text: string) {
this.list.push({ text, completed: false });
}
}
模塊化
雖然React推出了Hooks后啃沪，似乎整個React社區(qū)都越來越推崇函數(shù)式編程，但是在復(fù)雜的企業(yè)級業(yè)務(wù)中葵擎，函數(shù)式編程未必上最佳的解決方法谅阿。當(dāng)然，如果只在構(gòu)建UI上酬滤，Hooks確實(shí)帶來很好的渲染邏輯解耦的解決方案。但在業(yè)務(wù)邏輯領(lǐng)域寓涨，我們有更好的選擇盯串，尤其在一個企業(yè)級應(yīng)用中的多人協(xié)作開發(fā)，事實(shí)上基于class的模塊設(shè)計常常帶來并行開發(fā)和易于維護(hù)與測試帶來戒良。類并不是有害的体捏，錯誤的模塊設(shè)計才是有害的。
因此在Reactant提倡使用class進(jìn)行模塊實(shí)現(xiàn)糯崎，更重要的是Reactant定義了Service Module几缭， View Module，Plugin Module沃呢，使它們更明確職責(zé)與邊界年栓。任何一個模塊都可以是Service Module，它是靈活的薄霜，許多不同應(yīng)用的架構(gòu)都可以基于它進(jìn)行某抓；View Module必須定義當(dāng)前Module綁定的視圖組件，它是視圖模塊的渲染入口惰瓜，它依賴的模塊狀態(tài)都將通過useConnector進(jìn)行直觀地Props注入否副；Plugin Module是一個完整的Redux的中間件以及Context的再封裝，它提供了一個設(shè)計插件的模型崎坊，它讓插件API簡潔無比變得可能备禀。
此外，Reactant提供完整的依賴注入API∏基于TypeScript裝飾器的metadata來實(shí)現(xiàn)的DI呻待，使得使用它變得特別簡單。
@injectable()
class AppView extends ViewModule {
constructor(public counter: Counter) {
super();
}
component() {
const count = useConnector(() => this.counter.count);
return (
<button
type="button"
onClick={() => this.counter.increase()}>
{count}
</button>
);
}
}
簡潔和輕量化
Reactant的API不超過30個队腐，核心API更是少于15個蚕捉。無須過多的熟悉和適應(yīng)，你就能快速上手Reactant柴淘，并用它來開發(fā)任何復(fù)雜的React應(yīng)用迫淹。
在運(yùn)行時，Reactant的核心代碼gzip壓縮小于50KB为严。Reactant不僅支持代碼拆分敛熬，它也支持模塊動態(tài)注入，這非常有利于許多大型應(yīng)用程序最小化運(yùn)行第股。
擁抱React生態(tài)
Reactant是開放的应民，它基于React和Redux的Reactant抽象了一些模型。這些API帶給開發(fā)者便利的同時夕吻，它也支持了React和Redux的生態(tài)系統(tǒng)诲锹。很多優(yōu)秀的第三方庫能直接在Reactant上使用或者進(jìn)行再封裝，這給Reactant應(yīng)用帶來無限可能涉馅。
更好的開發(fā)體驗(yàn)
Reactant提供了更簡潔的路由模塊(reactant-router)和持久化模塊(reactant-storage)归园。如果有必要，你可以基于Reactant插件模塊開發(fā)出任何你需要更好的模塊API稚矿。
在開發(fā)調(diào)試中庸诱， devOptions支持autoFreeze和reduxDevTools兩個選項(xiàng)。當(dāng)autoFreeze啟用時晤揣，任何不在@action裝飾過的函數(shù)中改變狀態(tài)的操作都將報錯桥爽；當(dāng)reduxDevTools啟用時，Reactant將激活對Redux的DevTools的支持昧识。
Reactant還很新钠四，更多的提升開發(fā)體驗(yàn)的特性還在進(jìn)行中。
性能
Reactant和MobX+React的基準(zhǔn)性能測試中滞诺，Reactant在啟動時間和衍生計算上具有優(yōu)勢形导，而在值的更新上MobX+React更具有優(yōu)勢，總體而言习霹，兩者性能差別沒有特別明顯朵耕。因?yàn)镽eactant基于Immer，因此當(dāng)遇到極少數(shù)極端的性能瓶頸淋叶，Reactant也提供的性能優(yōu)化的解決方案阎曹。
Reactant致力于保持良好性能的情況下，持續(xù)構(gòu)建一個具有生產(chǎn)力的React框架。
結(jié)論
Reactant的初衷是希望能夠幫助React開發(fā)者們能進(jìn)行高效地構(gòu)建和開發(fā)一個可維護(hù)处嫌、可測試的應(yīng)用栅贴。Reactant的目標(biāo)就是最小化系統(tǒng)的壽命成本并最大化開發(fā)者的生產(chǎn)力。
作為一個全新的框架熏迹，Reactant才開發(fā)了幾個月檐薯，還有很多工作需要完成，包括構(gòu)建工具集注暗，開發(fā)工具集坛缕，SSR，以及React Native CLI捆昏，等等赚楚。
如果你已經(jīng)熟悉React，那么你只需要快速閱讀Reactant部分文檔后并使用Reactant CLI快速構(gòu)建Reactant應(yīng)用骗卜，你就可以開啟你全新的React應(yīng)用開發(fā)體驗(yàn)宠页。
Repo：
