React 生态圈

前言:

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 Redux Dva
个人分类: 编程艺术
上一篇JAVA线上常见问题排查手段
下一篇分布式场景下的一些思考
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭