一款簡單到極致的 React 數據流框架——Refast

Flux 是 React 框架的好伴侶。它優秀的單向數據流設計，使得數據的流向更加清晰，能幫助開發者更好的管理和調試組件的內部狀態。Facebook 官方出 Flux 稍顯冗雜，上手有必定的難度。

下面是 Facebook Flux 的架構圖。相信你們已經很熟悉了：

Web API 或者 Web API Utils 等事件會發出一個動做 Action。通過派發器 Dispatcher，調用回調 Callbacks，修改數據層 Store。視圖層 React Views 發現變化，反饋到視覺交互 User Interactions 上。這是一個循環往復的過程，最大的特色是數據單向流動。正是得益於此，前文所述的更好的管理和調試組件狀態才能得以實現。

這是一個很是完備、很是優秀的設計。那有沒有一種方案，在囊括 Facebook Flux 優勢的同時，又下降了學習難度，提升開發效率呢？不少開發者都進行了嘗試，兩年前就有人統計和分析過，不下二十餘種。到如今，不少都已然夭折了，再也不維護。不少依然活躍着的或者後來涌現出來的，也愈來愈繁冗，愈來愈笨重。

因此纔有了 Refast。Refast 是 XUX 團隊開發並開源的一款數據流框架。在調研了內部龐大的業務，進行了翔實的預演論證，博採推陳而來。

Refast 的架構圖正以下圖所示：

Refast 只有兩部分，視圖層 View 和 邏輯層 Logic。View 與其餘的 Flux 並沒有二致。有區別的是 Logic。 它是一些修改組件狀態的函數（大致與 Action 相似，通常也稱之爲 Action）集合。大致是這個樣子：

// 直接修改組件的狀態
export function update(context, someState) {
  context.setState(someState);
}

// 異步請求後修改組件狀態
export async function init(context, ...params){
  const asyncState = await window.fetch.apply(null, params);
  context.setState(asyncState);
}

咱們推薦使用 async/await 來處理異步操做。Logic 的第一個參數始終是 context。他封裝了 setState、 getState、getProps 等幾個通用的方法或者對象。

• context.setState 設置組件的 state, 用法與組件的 setState 相同

• context.getState 獲取組件當前的 state

• context.getProps 獲取組件當前的 props

在大部分場景下，你會對 context 按需擴展。好比將輕提示、警告對話框、數據請求、工具函數等掛在 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 函數中生效。能夠很輕易的調用他們：

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 與其餘數據流框架最大的區別之處。

LogicRender 集成了條件渲染、空數據和加載中等通用場景，同時，又能根據監聽數據的變化，自主執行某些特定的邏輯。

一、好比，條件渲染。你能夠給 LogicRender 設置一個名爲 show 的 props。 當它不爲真時，LogicRender 就不會渲染其子組件。

import { render } from 'react-dom';

render(){
  return (
    <LogicRender show={ this.state.show }>
    </LogicRender> 
  )
}

二、好比，通用 UI 的封裝。根據你提供的狀態來展現不一樣的視圖。

import { render } from 'react-dom';
import { LogicRender } from 'refast';

// 若是 isLoading 爲 true,就展現 loading 狀態
// 若是 isEmpty 爲 true，則展現 empty 狀態
render(){
  const { isLoading, isEmpty } = this.state;
  return (
    <LogicRender loading={ isLoading } empty={ isEmpty }>
    </LogicRender> 
  )
}

三、好比，執行 Logic。你能夠給 LogicRender 指定一個 Logic，初始化時執行一次。若是設置了 awareOf，在當組件更新時，一旦 awareOf 發生變化，就會再次執行 Logic。

import { render } from 'react-dom';
const { workNo } = this.state;

render(){
  return (
    <LogicRender action={ 'update' } awareOf={{ workNo }}>
    </LogicRender> 
  )
}

Refast 的介紹到這裏就結束了。上文基本上也就是 Refast 文檔的絕大部份內容。簡單到極致，就是咱們設計 Refast 的初衷。但願 Refast 可以幫助到你們。

歡迎你們給咱們發issue或者加入釘釘羣，一塊兒討論，讓 Refast 能更快成長，更好的助力業務！