微服务框架相关技术整理 (6)

ZuulServletZuulServlet交给ZuulRunner去执行。由于ZuulServlet是单例,因此ZuulRunner也仅有一个实例。ZuulRunner直接将执行逻辑交由FilterProcessor处理,FilterProcessor也是单例,其功能就是依据filterType执行filter的处理逻辑

FilterProcessor对filter的处理逻辑:1.首先根据Type获取所有输入该Type的filter:List<ZuulFilter> list 2.遍历该list,执行每个filter的处理逻辑:processZuulFilter(ZuulFilter filter) 3.RequestContext对每个filter的执行状况进行记录,应该留意,此处的执行状态主要包括其执行时间、以及执行成功或者失败,如果执行失败则对异常封装后抛出 4.到目前为止,Zuul框架对每个filter的执行结果都没有太多的处理,它没有把上一filter的执行结果交由下一个将要执行的filter,仅仅是记录执行状态,如果执行失败抛出异常并终止执行

ContextLifeCycleFilter - RequestContext 的生命周期管理:

ContextLifecycleFilter的核心功能是为了清除RequestContext;请求上下文RequestContext通过ThreadLocal存储,需要在请求完成后删除该对象RequestContext提供了执行filter Pipeline所需要的Context,因为Servlet是单例多线程,这就要求RequestContext即要线程安全又要Request安全。context使用ThreadLocal保存,这样每个worker线程都有一个与其绑定的RequestContext,因为worker仅能同时处理一个Request,这就保证了Request Context 即是线程安全的由是Request安全的。

GuiceFilter - GOOLE-IOC(Guice是Google开发的一个轻量级,基于Java5(主要运用泛型与注释特性)的依赖注入框架(IOC).Guice非常小而且快.)

StartServer - 初始化 zuul 各个组件(ioc,插件,filters,数据库等)

FilterScriptManagerServlet - uploading/downloading/managing scripts, 实现热部署
Filter源码文件放在zuul 服务特定的目录, zuul server会定期扫描目录下的文件的变化,动态的读取\编译\运行这些filter,如果有Filter文件更新,源文件会被动态的读取,编译加载进入服务,接下来的Request处理就由这些新加入的filter处理

React前端框架 React定义

React前端框架是Facebook开源的一个js库,用于动态构建用户界面.

React解决的问题:

数据绑定的时候,大量操作真实dom,性能成本太高

网站的数据流向太混乱,不好控制

React 把用户界面抽象成一个个组件.如按钮组件 Button,对话框组件 Dialog,日期组件 Calendar.开发者通过组合这些组件,最终得到功能丰富,可交互的页面.通过引入 JSX 语法,复用组件变得非常容易,同时也能保证组件结构清晰.有了组件这层抽象,React 把代码和真实渲染目标隔离开来,除了可以在浏览器端渲染到 DOM 来开发网页外,还能用于开发原生移动应用

React核心

虚拟DOM是React的基石,React的核心是组件,React的精髓是函数式编程 ,在React中是单向响应的数据流

组件的设计目的是提高代码复用率,降低测试难度和代码复杂度: 提高代码复用率:组件将数据和逻辑封装,类似面向对象中的类 降低测试难度:组件高内聚低耦合,很容易对单个组件进行测试 降低代码复杂度:直观的语法可以极大提高可读性 React特点

JSX: JSX 是 JavaScript 语法的扩展

组件: 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中

单向响应的数据流: React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单

Declarative(声明式编码): React采用声明范式,可以轻松描述应用(自动dom操作)

Component-Based(组件化编码)

Learn Once,Write Anywhere(支持客户端与服务器渲染)

高效:React通过对DOM的模拟(虚拟dom),最大限度地减少与DOM的交互

1.虚拟(virtual)DOM, 不总是直接操作DOM,减少页面更新次数; 2.高效的DOM Diff算法, 最小化页面重绘;

灵活:React可以与已知的库或框架很好地配合

React的虚拟DOM

传统DOM更新
真实页面对应一个 DOM 树.在传统页面的开发模式中,每次需要更新页面时,都要手动操作 DOM 来进行更新

在这里插入图片描述

虚拟DOM
DOM操作非常昂贵.我们都知道在前端开发中,性能消耗最大的就是DOM操作,而且这部分代码会让整体项目的代码变得难以维护.React把真实DOM树转换成JavaScript对象树,也就是Virtual DOM

在这里插入图片描述

虚拟DOM定义:

一个虚拟DOM(元素)是一个一般的js对象,准确的说是一个对象树(倒立的)

虚拟DOM保存了真实DOM的层次关系和一些基本属性,与真实DOM一一对应

如果只是更新虚拟DOM, 页面是不会重绘的

Virtual DOM算法步骤:

用JS对象树表示DOM树的结构.然后用这个树构建一个真正的DOM树插入到文档中

当状态变更的时候,重新构造一棵新的对象树.然后用新的树和旧的树进行比较,记录两棵树差异

把差异应用到真实DOM树上,视图就更新了

进一步理解:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsfpxd.html