React 生态圈

原创 2018年04月15日 15:24:40

前言:

React现在在前端领域已经不是什么新鲜的名词了,它的出现,使得前后端开发配合更加自然、高效。蚂蚁金服基于React封装了更加适合中后台系统的运行框架Dva,它是基于 redux、redux-saga 和 react-router 的轻量级前端框架;先给大家一览本人在学习React生态的总结概图。想要学好这个React生态,涉及到很多知识点,下面结合自己的学习之路做个总结
这里写图片描述


一、工作原理

传统的前端开发,通常服务端和前端展示耦合性太强,随着页面以及服务端和数据交互越来越多,给开发人员维护带来相当大的成本,通常一个很小功能的改动,从服务端、JSP页面调整、JS交互等等。复杂度不用我说;为了解决这个痛点,提高开发效率,采用了数据驱动的理念,一刀切的原理。前端页面的展示随着数据来驱动。其实和服务端典型的MVC原理很类似,将前端路由、展示组件、数据分开维护。数据的改变发生通常是通过用户交互行为或者浏览器行为(如路由跳转等)触发的,当此类行为会改变数据的时候可以通过 dispatch 发起一个 action,如果是同步行为会直接通过 Reducers 改变 State ,如果是异步行为(副作用)会先触发 Effects 然后流向 Reducers 最终改变 State,所以在 dva 中,数据流向非常清晰简明,并且思路基本跟开源社区保持一致(也是来自于开源社区)

这里写图片描述

涉及到和服务端交互的基本上都是通过触发Effects来改变状态,而Reducers是最基本的状态的改变,比较难理解,自己研究自己体会;更多内容了解:https://github.com/dvajs/dva/blob/master/docs/Concepts_zh-CN.md

二、generator的相关概念

generator的相关语法对于我们开发,理解这个概念相当重要;在Redux中,对于状态的维护一定要保证state的独立性,操作的时候每次都要当作不可变数据(immutable data)来对待,保证每次都是全新对象,没有引用关系;但是涉及到和服务端数据处理,避免不了异步操作,那么generator就是讲异步转化成同步行为,保证Reducer是一个纯函数。

import * as usersService from '../services/users';

export default {
  namespace: 'users',
  state: {
    list: [],
    total: null,
    page: null,
  },
  reducers: {
    save(state, { payload: { data: list, total, page } }) {
      return { ...state, list, total, page };
    },
  },
  effects: {
    *fetch({ payload: { page = 1 } }, { call, put }) {
      const { data, headers } = yield call(usersService.fetch, { page });
      yield put({
        type: 'save',
        payload: {
          data,
          total: parseInt(headers['x-total-count'], 10),
          page: parseInt(page, 10),
        },
      });
    },
    *remove({ payload: id }, { call, put, select }) {
      yield call(usersService.remove, id);
      const page = yield select(state => state.users.page);
      yield put({ type: 'fetch', payload: { page } });
    },
    *patch({ payload: { id, values } }, { call, put, select }) {
      yield call(usersService.patch, id, values);
      const page = yield select(state => state.users.page);
      yield put({ type: 'fetch', payload: { page } });
    },
    *create({ payload: values }, { call, put, select }) {
      yield call(usersService.create, values);
      const page = yield select(state => state.users.page);
      yield put({ type: 'fetch', payload: { page } });
    },
  },
  subscriptions: {
    setup({ dispatch, history }) {
      return history.listen(({ pathname, query }) => {
        if (pathname === '/users') {
          dispatch({ type: 'fetch', payload: query });
        }
      });
    },
  },
};

上面代码Effects就是一个 Generator 函数。它不同于普通函数,是可以暂停执行的,所以函数名之前要加星号,以示区别。
整个 Generator 函数就是一个封装的异步任务,或者说是异步任务的容器。异步操作需要暂停的地方,都用 yield 语句注明。

三、路由以及UI组件

在Dva2.0 版本引入UmiJS,即页面就是路由的概念,如图users文件下,如果请求为/users,则默认加载page.js;更多语法介绍:https://umijs.org/docs/zh-Hans/router.html
这里写图片描述

page.js

import Users from './components/Users';

export default () => {
  return (
    <div>
      <Users />
    </div>
  )
}

UI组件库就是蚂蚁的Ant-Design组件库,一般组件库定义如果组件含有自己的状态,通过extends React.Component来定义,其他可以通过functions来定义
组件库学习:https://ant.design/docs/react/introduce-cn

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hfy15352/article/details/79949647

探索React生态圈

2004年,对于前端社区来说,是里程碑式的一年。Gmail横空出世,它带来基于前端渲染的原生应用级别的体验,相对于之前的服务端渲染网页可谓提升了一个时代,触动了用户的G点。自此,前端渲染的网站成为无数...
  • yczz
  • yczz
  • 2015-08-10 13:13:54
  • 1978

React Native +React+Redux 生态圈最新学习资料

  • 2017年11月09日 10:44
  • 101.91MB
  • 下载

大数据概述及其生态圈(一)

大数据是什么经常听别人说“我要去学习大数据”,乍一听大数据应该是某个技术。百度解释:无法在规定时间内用给现有的常规软件工具对其内容进行抓取、管理和处理的数据集合。通俗讲,大数据就是大到难以处理的数据集...
  • m1213642578
  • m1213642578
  • 2016-08-30 09:39:08
  • 1101

HADOOP生态圈以及各组成部分的简介

重点组件: HDFS:分布式文件系统 MAPREDUCE:分布式运算程序开发框架 HIVE:基于大数据技术(文件系统+运算框架)的SQL数据仓库工具 HBASE:基于HADOOP的分布式海量数...
  • LearnboC
  • LearnboC
  • 2017-07-26 17:16:03
  • 518

Hadoop生态圈概要

ZooKeeper ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件。它是一个为分布式应用提供一致性...
  • super__dreamer
  • super__dreamer
  • 2016-09-16 19:41:09
  • 550

Spark-基础-Spark及其生态圈简介

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室(Algorithms, Machines, and People Lab)开发通用内存并行计算框架。Spark在201...
  • youdianjinjin
  • youdianjinjin
  • 2016-05-24 11:43:34
  • 1137

对于hadoop生态圈的理解

大数据,首先你要能存的下大数据。 传统的文件系统是单机的,不能横跨不同的机器。HDFS(Hadoop Distributed FileSystem)的设计本质上是为了大量的数据能横跨成百上千台机器,...
  • xq_iris
  • xq_iris
  • 2016-02-13 16:08:42
  • 1252

七张图全面了解大数据生态圈

七大阵营包括大数据基础架构阵营、大数据分析阵营、大数据应用阵营、架构与分析跨界阵营、大数据开源阵营、数据源与API阵营和孵化器与培训阵营。通过这些不同阵营的合作,可以为企业和组织提供端到端的完整大数据...
  • swingwang
  • swingwang
  • 2016-11-09 20:45:29
  • 5843

Apache Hadoop 和Hadoop生态圈

Hadoop实现了一个分布式文件系统(Hadoop Distributed File System),简称HDFS。HDFS有高容错性的特点,并且设计用来部署在低廉的(low-cost)硬件上;而且它...
  • xinxing__8185
  • xinxing__8185
  • 2015-06-10 17:33:08
  • 854

【微信生态圈】-谈谈我的学习经验

古人观影,看的是起舞弄清影,品的是对影成三人,大概我们现在看到的都是背影。   假如现在有这样一个集合{ 微,信,生,态,圈 },那易知它的幂集有(2的5次方)个元素,在这些元素中能引起你思绪的我...
  • qq_32671403
  • qq_32671403
  • 2016-03-05 11:17:05
  • 925
收藏助手
不良信息举报
您举报文章:React 生态圈
举报原因:
原因补充:

(最多只允许输入30个字)