国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

一款簡單到極致的 React 數(shù)據(jù)流框架——Refast

laznrbfe / 3648人閱讀

摘要：經(jīng)過派發(fā)器，調(diào)用回調(diào)，修改數(shù)據(jù)層。這是一個(gè)循環(huán)往復(fù)的過程，最大的特點(diǎn)是數(shù)據(jù)單向流動(dòng)。是團(tuán)隊(duì)開發(fā)并開源的一款數(shù)據(jù)流框架。它是一些修改組件狀態(tài)的函數(shù)大體與類似，一般也稱之為集合。的第一個(gè)參數(shù)始終是。簡單到極致，就是我們?cè)O(shè)計(jì)的初衷。

Flux 是 React 框架的好伴侶。它優(yōu)秀的單向數(shù)據(jù)流設(shè)計(jì)，使得數(shù)據(jù)的流向更加清晰，能幫助開發(fā)者更好的管理和調(diào)試組件的內(nèi)部狀態(tài)。Facebook 官方出 Flux 稍顯冗雜，上手有一定的難度。

下面是 Facebook Flux 的架構(gòu)圖。相信大家已經(jīng)很熟悉了：

Web API 或者 Web API Utils 等事件會(huì)發(fā)出一個(gè)動(dòng)作 Action。經(jīng)過派發(fā)器 Dispatcher，調(diào)用回調(diào) Callbacks，修改數(shù)據(jù)層 Store。視圖層 React Views 發(fā)現(xiàn)變化，反饋到視覺交互 User Interactions 上。這是一個(gè)循環(huán)往復(fù)的過程，最大的特點(diǎn)是數(shù)據(jù)單向流動(dòng)。正是得益于此，前文所述的更好的管理和調(diào)試組件狀態(tài)才能得以實(shí)現(xiàn)。

這是一個(gè)非常完備、非常優(yōu)秀的設(shè)計(jì)。那有沒有一種方案，在囊括 Facebook Flux 優(yōu)點(diǎn)的同時(shí)，又降低了學(xué)習(xí)難度，提高開發(fā)效率呢？很多開發(fā)者都進(jìn)行了嘗試，兩年前就有人統(tǒng)計(jì)和分析過，不下二十余種。到現(xiàn)在，很多都已然夭折了，不再維護(hù)。很多依然活躍著的或者后來涌現(xiàn)出來的，也越來越繁冗，越來越笨重。

所以才有了 Refast。Refast 是 XUX 團(tuán)隊(duì)開發(fā)并開源的一款數(shù)據(jù)流框架。在調(diào)研了內(nèi)部龐大的業(yè)務(wù)，進(jìn)行了翔實(shí)的預(yù)演論證，博采推陳而來。

Refast 的架構(gòu)圖正如下圖所示：

Refast 只有兩部分，視圖層 View 和 邏輯層 Logic。View 與其他的 Flux 并無二致。有區(qū)別的是 Logic。 它是一些修改組件狀態(tài)的函數(shù)（大體與 Action 類似，一般也稱之為 Action）集合。大體是這個(gè)樣子：

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

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

我們推薦使用 async/await 來處理異步操作。Logic 的第一個(gè)參數(shù)始終是 context。他封裝了 setState、 getState、getProps 等幾個(gè)通用的方法或者對(duì)象。

context.setState?設(shè)置組件的 state, 用法與組件的?setState?相同

context.getState?獲取組件當(dāng)前的 state

context.getProps?獲取組件當(dāng)前的 props

在大部分場景下，你會(huì)對(duì) context 按需擴(kuò)展。比如將輕提示、警告對(duì)話框、數(shù)據(jù)請(qǐng)求、工具函數(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
})

擴(kuò)展后的 context 會(huì)在每一個(gè) Logic 函數(shù)中生效。可以很輕易的調(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 一個(gè)很有用的特性，Refast 的靈性，一半源于此。那另一半在哪里呢？就在我們接下來要提及的 LogicRender 組件了。這也是 Refast 與其他數(shù)據(jù)流框架最大的區(qū)別之處。

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

1、比如，條件渲染。你可以給 LogicRender 設(shè)置一個(gè)名為 show 的 props。 當(dāng)它不為真時(shí)，LogicRender 就不會(huì)渲染其子組件。

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 指定一個(gè) Logic，初始化時(shí)執(zhí)行一次。如果設(shè)置了 awareOf，在當(dāng)組件更新時(shí)，一旦 awareOf 發(fā)生變化，就會(huì)再次執(zhí)行 Logic。

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

render(){
  return (
    
     
  )
}

Refast 的介紹到這里就結(jié)束了。上文基本上也就是 Refast 文檔的絕大部分內(nèi)容。簡單到極致，就是我們?cè)O(shè)計(jì) Refast 的初衷。希望 Refast 能夠幫助到大家。

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/87230.html

相關(guān)文章

  • 2017-08-12 前端日?qǐng)?bào)

    摘要：前端日?qǐng)?bào)精選中的操作符譯理解教程構(gòu)建一個(gè)預(yù)渲染友好的應(yīng)用示例譯如何學(xué)習(xí)開發(fā)如何編寫輕量級(jí)框架中文譯后臺(tái)運(yùn)行實(shí)戰(zhàn)手冊(cè)分析器入門博客眾成翻譯一款簡單到極致的數(shù)據(jù)流框架使用組件的四個(gè)技巧關(guān)鍵請(qǐng)求教程奇舞周刊第期前端路上的旅行如何只用完 2017-08-12 前端日?qǐng)?bào) 精選 JSX中的spread操作符【譯】理解Service WorkerVue.js教程: 構(gòu)建一個(gè)預(yù)渲染SEO友好的應(yīng)用示例...

    zhiwei 評(píng)論0 收藏0

  • UI大全：前端UI框架集合（持續(xù)更新，當(dāng)前32個(gè)）

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

    only_do 評(píng)論0 收藏0

  • UI大全：前端UI框架集合（持續(xù)更新，當(dāng)前32個(gè)）

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

    church 評(píng)論0 收藏0

  • 前端之從零開始系列

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

    Youngdze 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<