資訊專欄INFORMATION COLUMN
摘要：經(jīng)過派發(fā)器，調(diào)用回調(diào)，修改數(shù)據(jù)層。這是一個循環(huán)往復的過程，最大的特點是數(shù)據(jù)單向流動。是團隊開發(fā)并開源的一款數(shù)據(jù)流框架。它是一些修改組件狀態(tài)的函數(shù)大體與類似，一般也稱之為集合。的第一個參數(shù)始終是。簡單到極致，就是我們設計的初衷。
Flux 是 React 框架的好伴侶。它優(yōu)秀的單向數(shù)據(jù)流設計，使得數(shù)據(jù)的流向更加清晰，能幫助開發(fā)者更好的管理和調(diào)試組件的內(nèi)部狀態(tài)。Facebook 官方出 Flux 稍顯冗雜，上手有一定的難度。
下面是 Facebook Flux 的架構圖。相信大家已經(jīng)很熟悉了：
Web API 或者 Web API Utils 等事件會發(fā)出一個動作 Action。經(jīng)過派發(fā)器 Dispatcher，調(diào)用回調(diào) Callbacks，修改數(shù)據(jù)層 Store。視圖層 React Views 發(fā)現(xiàn)變化，反饋到視覺交互 User Interactions 上。這是一個循環(huán)往復的過程，最大的特點是數(shù)據(jù)單向流動。正是得益于此，前文所述的更好的管理和調(diào)試組件狀態(tài)才能得以實現(xiàn)。
這是一個非常完備、非常優(yōu)秀的設計。那有沒有一種方案，在囊括 Facebook Flux 優(yōu)點的同時，又降低了學習難度，提高開發(fā)效率呢？很多開發(fā)者都進行了嘗試，兩年前就有人統(tǒng)計和分析過，不下二十余種。到現(xiàn)在，很多都已然夭折了，不再維護。很多依然活躍著的或者后來涌現(xiàn)出來的，也越來越繁冗，越來越笨重。
所以才有了 Refast。Refast 是 XUX 團隊開發(fā)并開源的一款數(shù)據(jù)流框架。在調(diào)研了內(nèi)部龐大的業(yè)務，進行了翔實的預演論證，博采推陳而來。
Refast 的架構圖正如下圖所示：
Refast 只有兩部分，視圖層 View 和 邏輯層 Logic。View 與其他的 Flux 并無二致。有區(qū)別的是 Logic。 它是一些修改組件狀態(tài)的函數(shù)（大體與 Action 類似，一般也稱之為 Action）集合。大體是這個樣子：
// 直接修改組件的狀態(tài)
export function update(context, someState) {
context.setState(someState);
}
// 異步請求后修改組件狀態(tài)
export async function init(context, ...params){
const asyncState = await window.fetch.apply(null, params);
context.setState(asyncState);
}
我們推薦使用 async/await 來處理異步操作。Logic 的第一個參數(shù)始終是 context。他封裝了 setState、 getState、getProps 等幾個通用的方法或者對象。
context.setState?設置組件的 state, 用法與組件的?setState?相同
context.getState?獲取組件當前的 state
context.getProps?獲取組件當前的 props
在大部分場景下，你會對 context 按需擴展。比如將輕提示、警告對話框、數(shù)據(jù)請求、工具函數(shù)等掛在 context 下面。
import Refast from "Refast ";
import { Message } from "your-custom-message";
import { Dialog } from "your-custom-dialog";
import { DB } from "your-custom-ajax-handler";
import tools from "your-custom-tools";
// 可以通過 use 自定義
Refast.use("fn", {
message: Message,
dialog: Dialog,
DB,
tools
})
擴展后的 context 會在每一個 Logic 函數(shù)中生效?？梢院茌p易的調(diào)用他們：
async search(context, data) {
try {
await context.fn.DB.User.search(data);
context.fn.message.success("員工信息獲取成功");
} catch(e) {
context.fn.message.error(`員工信息獲取不成功:${e.errorMsg}`);
}
},
context 一個很有用的特性，Refast 的靈性，一半源于此。那另一半在哪里呢？就在我們接下來要提及的 LogicRender 組件了。這也是 Refast 與其他數(shù)據(jù)流框架最大的區(qū)別之處。
LogicRender 集成了條件渲染、空數(shù)據(jù)和加載中等通用場景，同時，又能根據(jù)監(jiān)聽數(shù)據(jù)的變化，自主執(zhí)行某些特定的邏輯。
1、比如，條件渲染。你可以給 LogicRender 設置一個名為 show 的 props。 當它不為真時，LogicRender 就不會渲染其子組件。
import { render } from "react-dom";
render(){
return (
)
}
2、比如，通用 UI 的封裝。根據(jù)你提供的狀態(tài)來展示不同的視圖。
import { render } from "react-dom";
import { LogicRender } from "refast";
// 如果 isLoading 為 true,就展示 loading 狀態(tài)
// 如果 isEmpty 為 true，則展示 empty 狀態(tài)
render(){
const { isLoading, isEmpty } = this.state;
return (
)
}
3、比如，執(zhí)行 Logic。你可以給 LogicRender 指定一個 Logic，初始化時執(zhí)行一次。如果設置了 awareOf，在當組件更新時，一旦 awareOf 發(fā)生變化，就會再次執(zhí)行 Logic。
import { render } from "react-dom";
const { workNo } = this.state;
render(){
return (
)
}
Refast 的介紹到這里就結束了。上文基本上也就是 Refast 文檔的絕大部分內(nèi)容。簡單到極致，就是我們設計 Refast 的初衷。希望 Refast 能夠幫助到大家。
歡迎大家給我們發(fā)issue或者加入釘釘群，一起討論，讓 Refast 能更快成長，更好的助力業(yè)務！
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://m.hztianpu.com/yun/87230.html
摘要：前端日報精選中的操作符譯理解教程構建一個預渲染友好的應用示例譯如何學習開發(fā)如何編寫輕量級框架中文譯后臺運行實戰(zhàn)手冊分析器入門博客眾成翻譯一款簡單到極致的數(shù)據(jù)流框架使用組件的四個技巧關鍵請求教程奇舞周刊第期前端路上的旅行如何只用完 2017-08-12 前端日報 精選 JSX中的spread操作符【譯】理解Service WorkerVue.js教程: 構建一個預渲染SEO友好的應用示例...
摘要：簡潔直觀強悍的前端開發(fā)框架，讓開發(fā)更迅速簡單。是一套基于的前端框架。首個版本發(fā)布于年金秋，她區(qū)別于那些基于底層的框架，卻并非逆道而行，而是信奉返璞歸真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...
摘要：簡潔直觀強悍的前端開發(fā)框架，讓開發(fā)更迅速簡單。是一套基于的前端框架。首個版本發(fā)布于年金秋，她區(qū)別于那些基于底層的框架，卻并非逆道而行，而是信奉返璞歸真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...
閱讀 1518·2023-04-25 19:00
閱讀 4246·2021-11-17 17:00
閱讀 1846·2021-11-11 16:55
閱讀 1598·2021-10-14 09:43
閱讀 3220·2021-09-30 09:58
閱讀 926·2021-09-02 15:11
閱讀 2178·2019-08-30 12:56
閱讀 1461·2019-08-30 11:12
