前端技术漫谈

前端之家收集整理的这篇文章主要介绍了前端技术漫谈前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

0x01 前言

擅长于Java后台开发,来前端探探路。
软件开发大体上可以分为前端、客户端、后端,这三大类。本片主要带大家来初探下前端一些相关的技术,主要围绕一直争论不断的React(因为还有很多人会认为angular、vue会是比React更好的前端开发技术)。

本篇主要漫谈的React体系技术有:redux + react-router + redux-saga + g2 + antd

0x02 React

React是什么?

React是DOM的一个抽象层,其并不是一个web应用的完整解决方案。

其实React直白的理解就是一个js库,它通过组件的方式将js、css、html封装形成一个最小单元--组件。这个库能够操作html(jsx)、css(css in js,只是目前的js操作css还在pk中未有一个胜出的解决方案)。问题来了,浏览器只能识别原生的js+css+html,React如何被浏览器解析并执行呢?

  1. 后端打包工具对React语法进行翻译成js文件,浏览器直接加载js文件

  2. 浏览器中引入React语法解析器,目前比较不错的有babel。但是一般不推荐这么用,前端渲染有点重、影响用户体验。

React优点

React采用虚拟节点->真实DOM节点的映射,根据diff算法来进行局部组件的更新操作(最小力度组件),极大的优化了前端显示渲染的时间复杂度。
React是如何感知到组件需要进行更新操作的,其每个组件内部都维护着一个组件状态参数(state),state的变化会直接渲染(render)给用户
涉及到组件,对应一个前端应用来说肯定会存在非常多的组件,React在组件之间通过props来进行传参操作。

0x03 redux

在React小结介绍过其不是一个web应用的完整解决方案,如果你的前端流足够复杂,这个时候就可能会要redux登场了。
这里要怎么开始介绍呢?redux可以简单理解为一个框架将React组件的状态(state)变化进行规范化,只要按照这个规范化进行开发框架帮你进行了复制的数据流的控制。比如:sping帮你管理好了bean的生命周期一样,屏蔽掉了bean的管理操作,而给使用者提供了方便的接口扩展来实现个性化。

redux对react组件state change管理工作流。

下面我们根据这个工作流、redux api来构建一个demo。

import React,{Component} from 'react';
import ReactDOM,{render} from 'react-dom'
import { applyMiddleware,createStore } from 'redux';
import {createLogger} from 'redux-logger';

class Counter extends Component{
    render() {
        return (
            <div>
                <h1>{this.props.value}</h1>
                <button onClick={this.props.onIncrement}>+</button>
                <button onClick={this.props.onDecrement}>-</button>
            </div>
        )
    }
};

const reducer = (state = 0,action) => {
    switch (action.type) {
        case 'INCREMENT':
            return state + 1;
        case 'DECREMENT':
            return state - 1;
        default:
            return state;
    }
};

const logger = createLogger();

const store = createStore(reducer,applyMiddleware(logger));


const renders = () => {
    render(
        <Counter
            value={store.getState()}
            onIncrement={() => store.dispatch({type: 'INCREMENT'})}
            onDecrement={() => store.dispatch({type: 'DECREMENT'})}
        />,document.getElementById('root')
    );
};

renders();
store.subscribe(renders);

0x04 redux-saga

上面的demo可以看到都是通过view发起action就直接更改了state,但是在现实场景中会出现很多需要进行异步处理的情况,如:页面对大数据量的请求,不能因为一次请求就将整个页面都阻塞到等到所有response,redux既然是给复杂应用提供基础的框架能力,这种情形肯定也有自己的解决方案,redux-saga是一个异步处理包,针对异步处理逻辑见下图。

0x05 react相关技术

react-router:这个包主要是根据用户的请求不同去映射渲染不同的component。
react-rudex:为React封装的rudex专用库,换了一种方式针对React实现了redux的工作流专用库,作用主要涉及开发更加规范标准化,复制项目之间的合作效率等。
antd:蚂蚁金服通过React封装的前端组件库。
g2:由纯 JavaScript 编写、强大的语义化图表生成工具。

蚂蚁金服开源的前端开发框架 dva = redux + react-router + redux-saga

0x06 web应用构建

一般说到web应用的构建,大家应该都会想到MVC的开发模式。

controller、model都是构建在服务端。view的实现存在多种实现方案:

view如果是通过模板引擎来时实现(如velocity等),这种前后端的开发对于开发前后端开发工程师之间的协作非常不便,如后端的model的任意修改都可能会要求前端工程师去修改他的view模板文件。最终由服务端调用模板引擎去解析模板文件渲染出html文件给到浏览器和用户进行交互。

view通过restApi的方式来和后端交互,拿到数据后由前端自己去解析渲染,这种实现方式确实做到了前后端工程师都各尽其责,对于api接口的返回类型是来自于领域建模,而前端作为数据的消费者,所想要的数据其实是 ui数据,无论是数据的含义、还是需要的数据种类、数据结构都往往有巨大的改变,所以也同样是需要前端进行修改适配。另一方面如果存在多个终端的情况下H5、Native、PC端可能需要显示的数据不尽相同,此时需要再各个不同的前端去做适配。

针对上面提到的传统的MVC方案在构建web应用的一些缺陷,提出了BFF(backend for frontend)的概念来完全解耦掉前后端的联系。

web server层提供通用数据结构,而不干涉过多的前端业务逻辑的筛选数据的逻辑,Js server作为BFF层来适配不同前端需要的个性化数据,并可以针对一些热点数据进行缓存的操作来提高整个后端的吞吐率。

原文链接:https://www.f2er.com/react/304013.html

猜你在找的React相关文章