一款简单到极致的 React 数据流框架——Refast

laznrbfe 发布于2019-08-21 11:53 / 3517人阅读

摘要：经过派发器，调用回调，修改数据层。这是一个循环往复的过程，最大的特点是数据单向流动。是团队开发并开源的一款数据流框架。它是一些修改组件状态的函数大体与类似，一般也称之为集合。的第一个参数始终是。简单到极致，就是我们设计的初衷。

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 能更快成长，更好的助力业务！

私有云服务器托管 php简单的mvc框架前端框架react react如何部署到云服务器上简单爬虫框架

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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