寒冬期前端准备总结---框架篇

⚠️⚠️传送门⚠️⚠️

寒冬期前端准备总结---JS篇
寒冬期前端准备总结---浏览器篇
寒冬期前端准备总结---服务器和网络篇
寒冬期前端准备总结---CSS篇
[寒冬期前端准备总结---框架篇]
寒冬期前端准备总结---算法篇

  • 技术选型:考虑项目、团队、框架发展程度和生态等问题

  • react-native和native和H5

* 页面布局灵活度:H5 > react-native(flex) > native

* 内存:native < react-native/h5;rn/h5内存包含框架大小,可优化

* 更新成本:H5 < react native < native,h5随时更新,rn可以部分热更新,native跟版本

* 用户体验:native > react native > h5

react native的UI组件为原生应用的一致,跨平台且有热更新能力

react native的热更新(jsbundle的拆分和加载原理)

- react-native-update插件校验app启动时是否有新版本可以下载

- react-native-code-push 在rn中配置热更新
  • Vue和React对比
**相同**

* 两者都只是JS的UI框架,路由和状态管理等功能都是和框架分离的组件;数据的单向流动(单向下流绑定)

* 虚拟DOM:改变实际的DOM状态花销远大于对一个JS对象的改变,计算新旧虚拟DOM的效率取决于diff算法的性能

* 都提供模块化

**不同**

* 使用jsx语法(在js中写html);Vue使用HTML模板系统,便于原生项目迁移

* state对象在react应用中时不可以直接改变的,需要使用setState方法异步更新状态;vue中的data参数都是数据的直接保存者,可以直接改变

* vue的组件可以全局注册、局部注册;react是import在模版中按需引用

* react更适合大型应用和更好的可测试性

* vue实例实现了事件接口,方便通信,小型项目可以不使用状态管理

* 数据更新时,vue会从根节点渲染整个虚拟DOM,而react会从调用setState的这个组件开始渲染子虚拟DOM

生命周期:

* vue:

 beforeCreate 

 created

 beforeMount 

 mounted

 beforeUpdate

 updated

 beforeDestroy 

 destroyed 

* react: 

 getDefaultProps

 getInitialState

 ~~(componentWillMount)~~

 componentDidMount

 shouldComponentUpdate

~~(componentWillUpdate)~~

** getDerivedStateFromProps** 新增

 **render**

 **getSnapshotBeforeUpdate** 新增

 componentDidUpdate

~~ (componentWillUnmount)~~

 componentUnmounted
  • React的setState机制
* 每一次的setState调用会进入到react的state的更新队列中,react会对这个队列做合并处理也就是说setState的key值相同时会被合并

* 通过addEventListener和setTimeOut等回调方法中的setState会被同步执行同步更新;在react原生方法OnClick、onChange或者生命周期中的setState方法会被react的state的更新机制合并后最后批量更新。

this.setState({count: state.count + 1});

this.setState({count: state.count + 1});

// 等同于

Object.assign({count: state.count + 1}, {count: state.count + 1});

// 被合并只执行最后一次的set
  • RN和flutter
RN中通过NativeModules调用原生定义的模块化的方法,实现通信;

flutter是偏服务端语言的语言,一个无关UI的SDK
  • React V16的改动
* 删除了WillMount WillReceiveProps WillUpdate三个周期

* react V17 开启异步渲染模式:组件的渲染可以被打断,避免造成渲染过长,页面无法交互等问题,比如不同的事件处理同时对数据更新,会造成渲染冲突,实现异步渲染的机制保证每一次的更新都能被捕捉到

* WillMount并不能保证渲染时数据已经请求完成,避免首屏渲染空白问题接口请求应该放在constructor

* 增加getDerivedStateFromProps静态方法:用来监听新的props和setState以及强制重新渲染,返回新的state对象或者null

* 增加getSnapshotBeforeUpdate用在DidUpdate之前,render之后,可以保证此时读取的DOM状态与更新后的相同
image.png
  • react组件类型
* pure component纯组件,不会带副作用,具体理解就是:shouldComponentUpdate不能重写,组件直接根据props数据的变化来判断是否刷新视图,基本类型的数据改变会重新渲染,引用类型的数据只要引用地址不变就不会触发视图更新,可以用来解决react的渲染问题

* react函数式组件没有生命周期,纯返回dom,接收props参数,且新出的react hook增加只能在函数组件中使用的state功能
  • vue 中图片存放目录
* assets文件夹中的图片会被打包成base64的js文件,需要require引入相对路径(CommonJS)或者import(ES6)进来

* static文件夹中的图片不会,可以直接使用
  • vue的computed和watch
* computed: 依赖基础data数据,根据基础数据计算得到的新数据,当基础数据没有变动时,会从缓存获取结果

* watch:监听data数据的变化,回调处理,可以设置immediate(初始值处理)和deep
  • vue组件通信
// 父向子

组件属性 + props

// 子向父

this.$emit + @自定义事件

this.$parent.event 直接调用父组件方法

// 兄弟

bus.$emit + bus.$on
  • vue子父组件的生命周期执行顺序(由外到内,再由内到外)
* 加载渲染:父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMounted -> 子mounted -> 父mounted

* 子组件更新:父beforeUpdate -> 子beforeUpdate -> 子Updated -> 父Updated

* 父组件更新:父beforeUpdate -> 父Updated

* 销毁:父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed
  • vue的data为函数的原因
当组件被多次重用时,如果数据都指向同一个data对象,会存在数据被同步修改(对象存储引用地址)
  • vue的props
prop属性的值可以进行类型设定,让父组件传递到子组件时类型更准确
  • vue生命周期的实际应用
* beforeCreated:loading

* created: 异步请求

* mounted: 获取DOM节点 ,可以进行视图操作,但是不一定所有的字组件会被挂载,可以使用$nextTick回调处理
  • 状态管理对比(flux、redux、vuex)
    flux的核心思想是数据和逻辑永远是单向流动的,三部分:

*   dispatcher负责分发时间

*   store负责保存数据,同时响应事件并更新数据

*   view负责订阅store中的数据,并使用这些数据渲染相应的页面

    redux和vuex都是基于flux思想实现的

*   redux只有一个全局的store,内置State对象,更新的逻辑也不是在store中,而是在reducer函数中

*   redux没有dispatcher的概念,使用reducer函数(返回一个新的state对象)

*   vuex基于redux,使用mutation代替redux的reducer

    react的mobx核心是通过action出发state的变化,进而触发state的衍生对象,使用更灵活,observable、autorun、action等装饰器

**redux**

- 核心对象:store

- 数据存储:state

- 状态更新提交接口:dispatch

- 状态更新提交参数:带type和payload的action

- 状态更新计算:reducer

- 限制:reducer必须是纯函数,不支持异步

- 特性:支持中间件

store dispatch action ;action 调用reducer修改state(同步);subscribe注册订阅事件

**vuex**

- 核心对象:store

- 数据存储:state

- 状态更新提交接口:commit

- 状态更新提交参数:带type和payload的mutation

- 状态更新计算:mutation handler

- 限制:mutation handler为非一步方法

- 特性:支持带缓存的getter,用于获取state经过某些计算后的值

store dispatch actions(异步); actions commit mutation(同步); mutation set state
  • Virtual DOM和diff算法
渲染视图的实现原理是diff+特定的DOM更新,和直接操作原生DOM的性能对比取决于节点数以及diff算法

当小数量的数据更新是Virtual DOM的性能可能会高于直接操作原生DOM(全部重新渲染)

* diff算法区别

react和vue(V3.0会更新diff算法⚠️)都是同级比较,新旧NodeTree的头尾四个指针,两两对比。

react是逐层比较,一层之后比下一层;vue是一层中的某个节点,先对比完节点下的所有子节点;也因此,react的渲染是根据当前组件为根节点渲染整个节点数,而vue是只重新渲染更新的节点,精准度更高

附 https://www.jianshu.com/p/398e63dc1969
  • webpack
构建流程

1 找到入口文件

2 并针对不同的模块使用不同的loader,对模块进行解析,并递归该模块中用到的模块,进行解析

3 解析完模块后,得到模块的内容以及他们之间的依赖关系

4 根据入口文件和模块之间的依赖关系,组装成包含多个模块的chunk

5 把chunk转化成单独的js文件加入到输出列表中

6 根据输出配置,把文件内容写入到文件系统中

loader在module.rules中配置,用于为模块的解析增加规则

plugin在plugins数组中配置,用于扩展webpack的功能,比如html文件压缩等

webpack的热更新原理:应用在运行状态下,不重新刷新就能更新、增加、移除模块的机制

* 通过热更新接口向webpack声明模块是否能够热更新,以及更新的前后进行的处理

* 接受热更新,需要开发者自己再模块被替换之前清除或保留必要的数据、状态;并在模块被替换后恢复之前的数据和状态

* 在使用vue、react开发时,vue-loader插件已经帮我们做掉了这些事情
  • webpack优化前端性能
- 压缩代码

- 提取公共代码

- 修改静态资源的路径为CDN上对应的路径

- dll:把不常更改的js等静态文件提前打包生成CDN连接,以外链脚本的方式引用到应用中

打包配置sourcemap:用于线上代码debug
  • 数据绑定
单向绑定:model的更新引起view视图的变化

双向绑定:同时view的更新引起model的数据更新,例如input组件的输入、checkbox变更等

* MVC:

  model包括数据格式、数据的基本操作方法

  view即视图

  controllor包括注册事件,监听用户交互,调用model方法更新数据

**model驱动view**

* MVVM:

  model只包括数据

  view即视图

  view-model包括处理用户交互、事件处理,model数据处理

**view和model没有直接关联,VM中间处理**

数据绑定的方法

* 发布者-订阅者模式(backbone.js):使用vm.set(‘property’, value)的方式更新数据

* 脏值检查(angular):脏值检测对比数据有无更新,通过setInterval定时轮询检测数据变化,在特定的事件触发时进入脏值检测

* 数据劫持(vue):通过Object.defineProperty()来劫持各个属性的setter、getter,在数据变动时发布消息给订阅者,触发相应的监听回调。Object.defineProperty(object,property,des)在对象上添加或修改一个属性,des包括writable、value、get等

vue的数据绑定:设置数据绑定的入口,劫持Vue实例中的data,使用Observer监听数据的变更,并对Vue实例的el对象,通过Compile进行解析模版指令,最后利用Watcher来将前两者关联起来

* Observer:使用**Object.defineProperty**覆写data属性的setter、getter,实现对数据变更的监听,收集依赖,通过set扩展调用notity触发更新

* Compile:解析模版指令,在每个指令对应的节点中实例化订阅者Watcher,绑定更新函数,数据变更时通知更新函数,进而变更视图

* Watcher:往data属性中添加订阅者watcher,data属性通知数据变化时,调用自身的update方法,触发Compile中绑定的回调,更新视图

附:vue3.0的数据劫持使用es6 proxy
image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,125评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,293评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,054评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,077评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,096评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,062评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,988评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,817评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,266评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,486评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,646评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,375评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,974评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,621评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,642评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,538评论 2 352