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

laznrbfe 發布于2019-08-21 11:53 / 3658人閱讀

摘要：經過派發器，調用回調，修改數據層。這是一個循環往復的過程，最大的特點是數據單向流動。是團隊開發并開源的一款數據流框架。它是一些修改組件狀態的函數大體與類似，一般也稱之為集合。的第一個參數始終是。簡單到極致，就是我們設計的初衷。

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

1、比如，條件渲染。你可以給 LogicRender 設置一個名為 show 的 props。當它不為真時，LogicRender 就不會渲染其子組件。

import { render } from "react-dom";

render(){
  return (
    
     
  )
}

2、比如，通用 UI 的封裝。根據你提供的狀態來展示不同的視圖。

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

// 如果 isLoading 為 true,就展示 loading 狀態
// 如果 isEmpty 為 true，則展示 empty 狀態
render(){
  const { isLoading, isEmpty } = this.state;
  return (
    
     
  )
}

3、比如，執行 Logic。你可以給 LogicRender 指定一個 Logic，初始化時執行一次。如果設置了 awareOf，在當組件更新時，一旦 awareOf 發生變化，就會再次執行 Logic。

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

render(){
  return (
    
     
  )
}

Refast 的介紹到這里就結束了。上文基本上也就是 Refast 文檔的絕大部分內容。簡單到極致，就是我們設計 Refast 的初衷。希望 Refast 能夠幫助到大家。

歡迎大家給我們發issue或者加入釘釘群，一起討論，讓 Refast 能更快成長，更好的助力業務！

GPU云服務器云服務器 php簡單的mvc框架前端框架react react如何部署到云服務器上簡單爬蟲框架

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/87230.html

2017-08-12 前端日報

摘要：前端日報精選中的操作符譯理解教程構建一個預渲染友好的應用示例譯如何學習開發如何編寫輕量級框架中文譯后臺運行實戰手冊分析器入門博客眾成翻譯一款簡單到極致的數據流框架使用組件的四個技巧關鍵請求教程奇舞周刊第期前端路上的旅行如何只用完 2017-08-12 前端日報精選 JSX中的spread操作符【譯】理解Service WorkerVue.js教程: 構建一個預渲染SEO友好的應用示例...

zhiwei 2019-08-21 11:52 評論0 收藏0
UI大全：前端UI框架集合（持續更新，當前32個）

摘要：簡潔直觀強悍的前端開發框架，讓開發更迅速簡單。是一套基于的前端框架。首個版本發布于年金秋，她區別于那些基于底層的框架，卻并非逆道而行，而是信奉返璞歸真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

only_do 2019-08-22 10:47 評論0 收藏0
UI大全：前端UI框架集合（持續更新，當前32個）

摘要：簡潔直觀強悍的前端開發框架，讓開發更迅速簡單。是一套基于的前端框架。首個版本發布于年金秋，她區別于那些基于底層的框架，卻并非逆道而行，而是信奉返璞歸真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

church 2019-08-01 16:03 評論0 收藏0
前端之從零開始系列

摘要：只有動手，你才能真的理解作者的構思的巧妙只有動手，你才能真正掌握一門技術持續更新中項目地址求求求源碼系列跟一起學如何寫函數庫中高級前端面試手寫代碼無敵秘籍如何用不到行代碼寫一款屬于自己的類庫原理講解實現一個對象遵循規范實戰手摸手，帶你用擼 Do it yourself!!! 只有動手，你才能真的理解作者的構思的巧妙只有動手，你才能真正掌握一門技術持續更新中…… 項目地址 https...

Youngdze 2019-08-26 10:57 評論0 收藏0