⚠️⚠️传送门⚠️⚠️
寒冬期前端准备总结---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
网友评论