react和vue系统性总结

﹏ヽ暗。殇╰゛Y 2024-04-17 20:11 78阅读 0赞

### vue项目中的坑 ###

*  1.数组，对象。不能实时变化，必须使用变异方法
 *  2.elementyi  scope   样式不能使用   去掉scope就可以了
 *  3.v-show 和 v-if正确使用
 *  4.普通的watch中只能监听到某不对象的变化才会调用，当想监听对象以及对象中属性的变化都调
 *  用函数时，可以使用deep:true
 *  5.echarts的id值必须唯一

### Reac项目中的坑 ###

*  1.在react中怎么引入css文件呢：这样引入css文件：import './style/nav.css'   需要注意的是：webpack.config.js文件中针对css文件引入的包需要loader必须写全，不能简写
 *  2.html元素中添加css样式的时候：两种：一种是class名字填写，但是在jsx中class需要写成className; 二种是在行间写样式style=\{ \{\}\}里面放置样式 ;三种是style=\{colorstyle\}里面放置一个变量
 *  3.导入css模块化和引入一个文件二者只能选其一

### es6的坑 ###

*  深拷贝注意null不是对象
 *  一定要先if判断
 *  let copyObj = JSON.parse(JSON.stringify(obj));慎用
 *  Map的foreach不能是箭头函数

### react和vue比较 ###

相同之处：

*  组件化 
 *  用虚拟DOM实现快速渲染
 *  轻量级
 *  响应式组件
 *  服务端渲染
 *  集成路由工具，打包工具，状态管理工具的难度低
 *  优秀的支持和社区

不同之处：（1）react如果状态变化，是从根节点开始重新渲染；vue是确定到某一个节点需要变  
化，只是更新这个节点；（2）react是用jsx渲染模板；vue使用的是Template模板渲染，还是Html  
模板；

vue:

*  简单的语法和项目配置
 *  更快的渲染速度和更小的体积
 *  vue是确定到某一个节点需要变  
    化，只是更新这个节点
 *  使用的是Template模板
 *  如何处理数据（数据是可变的），当向state添加一个新对象的时候，Vue将遍历其中的所有属性并且转换为getter，setter方法，现在Vue的响应系统开始保持对state的跟踪了，当state中的内容发生变化的时候就会自动重新渲染DOM。令人称道的是，Vue中改变state的状态的操作不仅更加简洁，而且它的重新渲染系统也比React 的更快更有效率。

react

*  react如果状态变化，是从根节点开始重新渲染；
 *  适用于大型项目(为什么？)
 *  如何处理数据（state是不可变）：通过比较当前state和前一个state来决定何时在DOM中进行重渲染以及渲染的内容，因此需要不可变（immutable）的state。
 *  Web端和移动端原生APP通吃
 *  更大的生态系统，更多的支持和好用的工具

react为什么更适合大型项目

*  模板容易出现很难注意到的运行时错误，同时也很难去测试，重构和分解。
 *  Javascript模板可以组织成具有很好的分解性和干（DRY）代码的组件。干代码的可重用性和可测试性更好。
 *  React的不可变应用状态(state)可能写起来不够简洁，但它在大型应用中意义非凡，因为透明度和可测试性在大型项目中变得至关重要。

### vue的key ###

[https://mp.weixin.qq.com/s/GV1LL-oNDPBsfBqcAdo5bA][https_mp.weixin.qq.com_s_GV1LL-oNDPBsfBqcAdo5bA]

*  有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
 *   `key` 值，可以进行map映射，直接找到相应的值。没有 `key` 值，则需要遍历才能拿到。相比于遍历，映射的速度会更快。

看一下vue如何操作dom

> 先看官方解释：
> 
> > 如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
> 
> 比如现在有一个数组 \[1,2,3,4\]变成了\[2,1,3,4\]，那么没有 `key` 的值会采取一种“就地更新策略”，见下图。它不会移动元素节点的位置，而是直接修改元素本身，这样就节省了一部分性能
> 
> ![format_png][]
> 
> 而对于有 `key` 值的元素，它的更新方式如下图所示。可以看到，这里它对 DOM 是移除/添加的操作，这是比较耗性能的。
> 
> ![format_png 1][]

### React中的key  ###

*  有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
 *  key在diff算法中的使用

> eact官方文档是这样描述key的：
> 
> > Keys可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识。
> 
> react的diff算法是把key当成唯一id然后比对组件的value来确定是否需要更新的，所以如果没有key，react将不会知道该如何更新组件。
> 
> 你不传key也能用是因为react检测到子组件没有key后，会默认将数组的索引作为key。
> 
> react根据key来决定是销毁重新创建组件还是更新组件，原则是：
> 
>  *  key相同，组件有所变化，react会只更新组件对应变化的属性。
>  *  key不同，组件会销毁之前的组件，将整个组件重新渲染。

看下react是如何操作DOM的

> 如果子组件只是受控组件，使用index作为key，可能表面上不会有什么问题，实际上性能会受很大的影响。例如下面的代码：
> 
>     // ['张三','李四','王五']=>
>     <ul>
>         <li key="0">张三</li>
>         <li key="1">李四</li>
>         <li key="2">王五</li>
>     </ul>
>     // 数组重排 -> ['王五','张三','李四'] =>
>     <ul>
>         <li key="0">王五</li>
>         <li key="1">张三</li>
>         <li key="2">李四</li>
>     </ul>
> 
> 当元素数据源的顺序发生改变时，对应的：
> 
> key为0，1，2的组件都发生了变化，三个子组件都会被重新渲染。（这里的重新渲染不是销毁，因为key还在）
> 
> 相反，我们使用唯一id作为key：
> 
>     // ['张三','李四','王五']=>
>     <ul>
>         <li key="000">张三</li>
>         <li key="111">李四</li>
>         <li key="222">王五</li>
>     </ul>
>     // 数组重排 -> ['王五','张三','李四'] =>
>     <ul>
>         <li key="222">王五</li>
>         <li key="000">张三</li>
>         <li key="111">李四</li>
>     </ul>
> 
> 根据上面的更新原则，子组件的值和key均未发生变化，只是顺序发生改变，因此react只是将他们做了移动，并未重新渲染。
> 
>

### React生命周期 ###

（[https://zhuanlan.zhihu.com/p/38030418?utm\_source=wechat\_session&utm\_medium=social&utm\_oi=1142240990822797312][https_zhuanlan.zhihu.com_p_38030418_utm_source_wechat_session_utm_medium_social_utm_oi_1142240990822797312]）

16.3以前的生命周期

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

更新的生命周期

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

### 为甚么这个生命周期现在给变了 ###

答：这个生命周期函数的组合在Fiber（[React Fiber是什么][React Fiber]）之后就显得不合适了，因为，**如果要开启async rendering，在render函数之前的所有函数，都有可能被执行多次。**长期以来，原有的生命周期函数总是会诱惑开发者在render之前的生命周期函数做一些动作，现在这些动作还放在这些函数中的话，有可能会被调用多次，这肯定不是你想要的结果。

### 废弃了哪些？ ###

答：随着getDerivedStateFromProps的推出，同时deprecate了一组生命周期API，包括：

*  componentWillReceiveProps
 *  componentWillMount
 *  componentWillUpdate

### 为什么引入getDerivedStateFromProps ###

答：这个getDerivedStateFromProps是一个静态函数，所以函数体内不能访问this，简单说，就是应该一个[纯函数][Link 1]，纯函数是一个好东西啊，输出完全由输入决定。（**老实做一个运算就行，别在这里搞什么别的动作**。比如ajax）

再啰嗦一下:用一个静态函数getDerivedStateFromProps来取代被deprecate的几个生命周期函数，就是强制开发者在render之前只做无副作用的操作，而且能做的操作局限在根据props和state决定新的state，而已。这是进一步施加约束，防止开发者乱来。

### getSnapshotBeforeUpdate这个生命周期是什么？（[https://zhuanlan.zhihu.com/p/36062486?utm\_source=wechat\_session&utm\_medium=social&utm\_oi=1142240990822797312][https_zhuanlan.zhihu.com_p_36062486_utm_source_wechat_session_utm_medium_social_utm_oi_1142240990822797312]） ###

答：应用场景（另一个常见的 `componentWillUpdate` 的用例是在组件更新前，读取当前某个 DOM 元素的状态，并在 `componentDidUpdate` 中进行相应的处理。但在 React 开启异步渲染模式后，render 阶段和 commit 阶段之间并不是无缝衔接的，也就是说在 render 阶段读取到的 DOM 元素状态并不总是和 commit 阶段相同，这就导致在`componentDidUpdate` 中使用 `componentWillUpdate` 中读取到的 DOM 元素状态是不安全的，因为这时的值很有可能已经失效了。 ）

getSnapshotBeforeUpdate(prevProps, prevState) 会在组件更新之前获取一个 snapshot，并可以将计算得的值或从 DOM 得到的信息传递到 componentDidUpdate(prevProps, prevState, snapshot) 函数的第三个参数，常常用于 scroll 位置定位等场景。

### React的diff算法 ###

计算出Virtual DOM中真正变化的部分，并只针对该部分进行原生DOM操作，而非重新渲染整个页面。

**diff策略**

React用 三大策略 将O(n^3)复杂度 转化为 **O(n)复杂度**

策略一（**tree diff**）： Web UI中DOM节点跨层级的移动操作特别少，可以忽略不计。

策略二（**component diff**）： 拥有相同类的两个组件 生成相似的树形结构， 拥有不同类的两个组件 生成不同的树形结构。

策略三（**element diff**）： 对于同一层级的一组子节点，通过唯一id区分。

将Virtual DOM树转换成actual DOM树的**最少操作的过程** 称为 调和 。

### 什么是虚拟DOM?      ：用JS对象模拟DOM树     ###

用 JavaScript 来表示一个 DOM 节点是很简单的事情，你只需要记录它的节点类型、属性，还有子节点：

element.js

function Element (tagName, props, children) {
      this.tagName = tagName
      this.props = props
      this.children = children
    }
    
    module.exports = function (tagName, props, children) {
      return new Element(tagName, props, children)
    }

例如上面的 DOM 结构就可以简单的表示：

var el = require('./element')
    
    var ul = el('ul', {id: 'list'}, [
      el('li', {class: 'item'}, ['Item 1']),
      el('li', {class: 'item'}, ['Item 2']),
      el('li', {class: 'item'}, ['Item 3'])
    ])

现在ul只是一个 JavaScript 对象表示的 DOM 结构，这就是虚拟DOM

### Fiber架构是啥 ###

改变了之前react的组件渲染机制，新的架构使原来同步渲染的组件现在可以异步化，可中途中断渲染，执行更高优先级的任务。释放浏览器主线程

###    画Filber渲染树 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]

### 介绍react高阶组件 ###

[https_mp.weixin.qq.com_s_GV1LL-oNDPBsfBqcAdo5bA]: https://mp.weixin.qq.com/s/GV1LL-oNDPBsfBqcAdo5bA
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9taWFvQ3dzWHpKU28zTG1pYWNXeDdhS0R6QWZIaEhHY2ZuSnNaanM4OVZpY2NPTmJTeFFWNW5JUnNOd2RReHdmc1pGNEM1U2duRm9waWJWRVdPZXdZWFl5OEEvNjQwP3d4X2ZtdD1wbmcmdHA9d2VicCZ3eGZyb209NSZ3eF9sYXp5PTEmd3hfY289MQ?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9taWFvQ3dzWHpKU28zTG1pYWNXeDdhS0R6QWZIaEhHY2ZuVTVFeFhHcUVvMFVKcmhBSGxoaWNyMDNTNmRYTFl2Q2dKQWRINGY5UTVBWVoxaWNHUDdMZGxMQWcvNjQwP3d4X2ZtdD1wbmcmdHA9d2VicCZ3eGZyb209NSZ3eF9sYXp5PTEmd3hfY289MQ?x-oss-process=image/format,png
[https_zhuanlan.zhihu.com_p_38030418_utm_source_wechat_session_utm_medium_social_utm_oi_1142240990822797312]: https://zhuanlan.zhihu.com/p/38030418?utm_source=wechat_session&utm_medium=social&utm_oi=1142240990822797312
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/269ed66d557a485caa0de8ec2005fce8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/6152ae988bd248748e7a18439e5e0a61.png
[React Fiber]: https://zhuanlan.zhihu.com/p/26027085
[Link 1]: https://zhuanlan.zhihu.com/p/26174525
[https_zhuanlan.zhihu.com_p_36062486_utm_source_wechat_session_utm_medium_social_utm_oi_1142240990822797312]: https://zhuanlan.zhihu.com/p/36062486?utm_source=wechat_session&utm_medium=social&utm_oi=1142240990822797312
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/430c9291361a433f824b88a19f4f2a1d.png