React面试专用

雨点打透心脏的1/2处 2022-09-05 12:55 167阅读 0赞

## 声明式编程 ##

**命令式编程**：命令“机器”如何去做事情(how)，这样不管你想要的是什么(what)，它都会按照你的命令实现。  
**声明式编程**：告诉“机器”你想要的是什么(what)，让机器想出如何去做(how)。  
比如使用map函数 vs 循环遍历数组。  
React遵循组件设计模式、声明式编程范式和函数式编程概念。

## 虚拟DOM ##

虚拟DOM只不过是真实 DOM 的 javascript对象表示。 与更新真实 DOM 相比，更新 javascript 对象更容易，更快捷。React将整个DOM副本保存为虚拟DOM，每当有更新时，它都会维护两个虚拟DOM，以比较之前的状态和当前状态，并确定哪些对象已被更改。它通过比较两个虚拟DOM 差异，并将这些变化更新到实际DOM，一旦真正的DOM更新，它也会更新UI。

## JSX ##

在JSX中，我们结合了javascript和HTML，并生成了可以在DOM中呈现的react元素。如果HTML中包含任何动态变量，我们应该使用表达式\{\}。

## 虚拟DOM和diff ##

参考文章：https://juejin.cn/post/6844903806132568072\#heading-9

**虚拟DOM**：就是用JS的对象去模拟DOM树的结构，这样DOM更新的时候不会更新所有DOM节点，而是运用diff算法计算出不同的地方，再更新改变的地方。

// 虚拟DOM元素的类，构建实例对象，用来描述DOM
    class Element { 
        constructor(type, props, children) { 
            this.type = type;
            this.props = props;
            this.children = children;
        }
    }

**DOM-diff的过程**：

1.  用JS对象模拟DOM（虚拟DOM）。可以创造一个节点类，其中节点属性、子结点、节点类型都是这个类的属性。
2.  把此虚拟DOM转成真实DOM并插入页面中（render）。**递归**的调用render函数进行渲染，使用createElement（‘type’）来生成真实的节点，直到节点是文本元素就可以直接添加到页面。
3.  如果有事件发生修改了虚拟DOM，比较两棵虚拟DOM树的差异，得到差异对象（diff）。使用**深度优先遍历**两棵树的节点，将不同的地方生成补丁对象**Patch**。

> 比较规则：
> 
> 1.  新的DOM节点不存在\{type: ‘REMOVE’, index\} ，移动／增加／删除 子节点，我们将这个过程称之为REORDER。
> 2.  文本的变化\{type: ‘TEXT’, text: 1\}
> 3.  当节点类型相同时，去看一下属性是否相同，产生一个属性的补丁包\{type: ‘ATTR’, attr: \{class: ‘list-group’\}\}
> 4.  节点类型不相同，直接采用替换模式\{type: ‘REPLACE’, newNode\}

1.  把差异对象应用到真正的DOM树上（patch），递归遍历。

**Virtual DOM有什么好处？**  
Virtual DOM 是以对象的方式来描述真实dom对象的，那么在做一些update的时候，可以在**内存中**进行数据比对，减少对真实dom的操作减少浏览器重排重绘的次数，减少浏览器的压力，提高程序的性能，并且因为diff算法的差异比较，记录了差异部分，那么在开发中就会帮助程序员减少对差异部分心智负担，提高了开发效率。

**Virtual DOM 有什么坏处？**  
在初始化时增加了对JSX的解析，最终需要生成Virtual DOM，那么就会产生一定的内存消耗，比初始化时直接挂载到真实dom 对象上的展示要慢一些。

虚拟dom的操作准确的来说让渲染变的更慢，但是让开发者编码水平变得更好，因为虚拟dom中diff算法存在，减少了开发人员对update时付出的心智，变相的提高了开发者的手动优化每一个操作真实dom 的方式，从而提高整体程序相对而言说的过去的的性能和渲染效率。

=========================================================

## React基本使用 ##

## 标题在JSX里面设置innerHTML。 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_37_color_FFFFFF_t_70_g_se_x_16]

## 常用的逻辑判断方法 ##

1.  if …else…
2.  xxx:xxx?xxx 三元表达式
3.  xxx && xxx &&的短路运算

## JSX渲染列表 ##

使用map，记得map里返回的DOM节点必须有key属性。

## React合成事件 ##

事件是写在组件类的里面，不用加function关键字。  
**因为事件回调函数中this默认是undefined!!!**  
如果是普通函数，则需要在constructor里面通过bind绑定this。因此最好使用箭头函数，就不需要绑定this。

![在这里插入图片描述][dafb6361753c443b98c41bc8f1109ce5.png]  
事件回调函数中event.\_\_proto\_\_是SyntheticEvent对象。  
其中第三点，从React17开始不会挂载到document上。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_46_color_FFFFFF_t_70_g_se_x_16]

事件绑定函数传参，event加在最后面  
![在这里插入图片描述][9a23df3b313942a0a0fbd577495eddf9.png]

合成事件特点：

*  React 上注册的事件最终会绑定在document这个 DOM 上，而不是 React 组件对应的 DOM(减少内存开销就是因为所有的事件都绑定在 document 上，其他节点没有绑定事件)
 *  React 自身实现了一套事件冒泡机制，所以这也就是为什么我们 event.stopPropagation() 无效的原因。
 *  React 通过队列的形式，从触发的组件向父组件回溯，然后调用他们 JSX 中定义的 callback
 *  React 有一套自己的合成事件 SyntheticEvent，不是原生的，这个可以自己去看官网
 *  React 通过**对象池**的形式管理合成事件对象的创建和销毁，减少了垃圾的生成和新对象内存的分配，提高了性能。事件对象可能会被频繁创建和回收，因此 React 引入事件池，在事件池中获取或释放事件对象。即 React 事件对象不会被释放掉，而是存放进一个数组中，当事件触发，就从这个数组中弹出，避免频繁地去创建和销毁(垃圾回收)。

## 原生事件vs合成事件 ##

参考文章：https://juejin.cn/post/6897911576053940231\#heading-2  
https://segmentfault.com/a/1190000013364457  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YiYU3VybWFu_size_20_color_FFFFFF_t_70_g_se_x_16]  
**React 事件与原生事件执行顺序**  
原生事件=》react事件=》原生挂在到document上的事件  
我们可以理解：

*  React 所有事件都挂载在 document 对象上；
 *  当真实 DOM 元素触发事件，会冒泡到 document 对象后，再处理 React 事件；
 *  所以会先执行原生事件，然后处理 React 事件；
 *  最后真正执行 document 上挂载的事件。

**事件池**  
合成事件对象池，是 React 事件系统提供的一种性能优化方式。合成事件对象在事件池统一管理，不同类型的合成事件具有不同的事件池。在 React 17 已经不使用事件池。

*  当事件池未满时，React 创建新的事件对象，派发给组件。
 *  当事件池装满时，React 从事件池中复用事件对象，派发给组件。

在 React 16 及之前的版本，合成事件对象的事件处理函数全部被调用之后，所有属性都会被置为 null 。这时，如果我们需要在事件处理函数运行之后获取事件对象的属性，可以使用 React 提供的 **e.persist()** 方法，保留所有属性。比如在回调函数中设置定时器在访问event中的值。

**阻止事件冒泡**  
React的onClick绑定的事件是**合成事件**，没有绑定在真实DOM上，而是在document处监听所有支持的事件，当**事件冒泡至document时**，React将事件内容封装并交由真正的处理函数运行。

React中event事件是syntheticEvent（合成事件），合成事件有对原生stopPropagation进行封装，但没有对stopImmediatePropagation进行封装，在react的事件中没有stopImmediatePropagation函数。但可以通过**event.nativeEvent.stopImmediatePropagation**进行调用。

1.  **e.stopPropagation() ：**  
    **只能阻止合成事件间冒泡**，即下层的合成事件，不会冒泡到上层的合成事件。因为原生时间是在合成事件之前就调用，所以原生事件依然会被执行，并且绑定在document上的原生事件也会被执行。和原生事件、合成事件、docuement上的事件的执行顺序无关。
2.  **event.nativeEvent.stopImmediatePropagation**  
    stopImmediatePropagation() 方法阻止监听同一事件的其他事件监听器被调用。因为stopImmediatePropagation只是阻止同层级且绑定靠后的事件，非document层的原生事件（document层外层以及内层）还是没有阻止。相当于这个方法只能阻止document层的其他事件。  
    并且因为合成事件被调用的时候，原生事件已经执行完毕了，因此也不能阻止document里面的原生事件。

合成事件和原生事件最好不要混用。 **原生事件中如果执行了stopPropagation方法，则会导致其他React事件失效**。因为所有元素的事件将无法冒泡到document上。

## 表单 ##

受控组件：表单里面的值受state控制。  
React不像Vue可以双向数据绑定，他需要我们**设置value**的值为state（不要直接写在innerhtml，会直接写死），然后监听onChange事件来改变state的值，达到双向绑定的效果。

## 父子组件通信 ##

1.  父组件给子组件传递参数（第二个框）
2.  父组件给子组件传递父组件中的函数，子组件接受该函数可以调用，并且传递自组件的参数给父组件的函数，父组件就可以获得子组件传来的参数。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_32_color_FFFFFF_t_70_g_se_x_16]

## setState ##

state在constructor中进行申明。

*  不可变值。不能直接操作state的值，在setState中，更新的值不能改变原来state中的结果！  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_43_color_FFFFFF_t_70_g_se_x_16]  
    比如list1使用concat会返回新的数组，但是不会修改原来的数组的值。满足不可变值的条件。list5是先生成副本，在修改副本。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_38_color_FFFFFF_t_70_g_se_x_16]
 *  可能是异步更新  
    **异步情况：**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_43_color_FFFFFF_t_70_g_se_x_16 1]  
    **同步情况：**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_34_color_FFFFFF_t_70_g_se_x_16]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_38_color_FFFFFF_t_70_g_se_x_16 1]
 *  可能会被合并  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_27_color_FFFFFF_t_70_g_se_x_16]  
    setstate使用的是对象的形式，相当于assign，对象是可以被合并的。因为可能是异步的，所以第一次执行后state的值还没有改变，相当于都修改的相同的值，都是1。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_28_color_FFFFFF_t_70_g_se_x_16]  
    函数是不可以被合并的。因此只能挨个执行。

## 组件生命周期 ##

常见：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_60_color_FFFFFF_t_70_g_se_x_16]  
不常用的：shouldComponentUpdate可以做一些性能优化方面的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_38_color_FFFFFF_t_70_g_se_x_16 2]

*  父子组件生命周期  
    都是父组件先进入（先开始），但是等子组件渲染完毕父组件才完毕。  
    渲染过程：父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted  
    子组件更新过程：父beforeUpdate->子beforeUpdate->子updated->父updated  
    销毁过程：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YiYU3VybWFu_size_20_color_FFFFFF_t_70_g_se_x_16 1]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YiYU3VybWFu_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
**1. componentWillReceiveProps (nextProps)**

1.  在接受父组件改变后的props需要重新渲染组件时用到的比较多
2.  接受一个参数nextProps
3.  通过对比nextProps和this.props，将nextProps的state为当前组件的state，从而重新渲染组件

**2. shouldComponentUpdate(nextProps,nextState)**

1.  主要用于性能优化(部分更新)
2.  唯一用于控制组件重新渲染的生命周期，由于在react中，setState以后，state发生变化，组件会进入重新渲染的流程，在这里return false可以阻止组件的更新
3.  **因为react父组件的重新渲染会导致其所有子组件的重新渲染**，这个时候其实我们是不需要所有子组件都跟着重新渲染的，因此需要在**子组件**的该生命周期中做判断

============================================================

## React高级特性 ##

## 函数组件和类组件 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_63_color_FFFFFF_t_70_g_se_x_16]  
**差异：**  
参考：https://zhuanlan.zhihu.com/p/139610875  
函数式组件捕获了渲染所使用的值。而类组件渲染的是实时的props和state。

原因：  
类方法从 this.props.user 中读取数据。在 React 中 Props 是不可变(immutable)的，所以他们永远不会改变。然而，this是，而且永远是，可变(mutable)的。

事实上，这就是类组件 this 存在的意义。**React本身会随着时间的推移而改变，以便你可以在渲染方法以及生命周期方法中得到最新的实例**。所以如果在请求已经发出的情况下我们的组件进行了重新渲染，this.props将会改变。showMessage方法从一个“过于新”的props中得到了user。

因此在类组件中，我们可以使用**闭包**，来捕获渲染时的props的值。这样，你在渲染的时候就已经“捕获”了props。

class ProfilePage extends React.Component {
      render() {
        // Capture the props!
        const props = this.props;
    
        // Note: we are *inside render*.
        // These aren't class methods.
        const showMessage = () => {
          alert('Followed ' + props.user);
        };
    
        const handleClick = () => {
          setTimeout(showMessage, 3000);
        };
    
        return <button onClick={handleClick}>Follow</button>;
      }
    }

事实上，我们可以通过删除类的“包裹”来简化代码，这就得到了我们的函数式组件，因此可见函数式组件是捕获渲染时的值。

使用Hooks，同样的原则也适用于state。即想要延时打印当前渲染时的props或者state的值，可以使用函数式组件。

但是如果我们想要读取并不属于这一次特定渲染的，最新的props和state呢？可以使用ref。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_47_color_FFFFFF_t_70_g_se_x_16]

## 非受控组件 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_47_color_FFFFFF_t_70_g_se_x_16 1]  
创建ref，并设置给非受控组件，非受控组件不受state控制，不会改变state。因此赋初始值的时候使用defaultValue和defaultChecked。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_42_color_FFFFFF_t_70_g_se_x_16]  
然后通过ref操作DOM节点。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_43_color_FFFFFF_t_70_g_se_x_16 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_51_color_FFFFFF_t_70_g_se_x_16]  
优先使用受控组件，必须操纵DOM时再使用非受控组件。

## Portals 传送门 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_36_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_39_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_50_color_FFFFFF_t_70_g_se_x_16]

## context 上下文 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_46_color_FFFFFF_t_70_g_se_x_16 1]

1.  创建Context  
    ![在这里插入图片描述][d346d226d67e4a938b026291c7adde20.png]  
    2.使用context.provider来包裹最高层的组件，并指定context的Value。（这里相当于在最外层生产了这个数据）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_37_color_FFFFFF_t_70_g_se_x_16 1]3. 当子组件是类组件时，指定组建的contextType，然后在组件中使用this.context向上找到最近的context.Provider，然后读取他的value。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_39_color_FFFFFF_t_70_g_se_x_16 1]  
    4.当组件是函数式组件时，因为没有实例，所以没有this，所以不能使用this.context，因此使用context.consumer来包裹子组件的DOM。里面是一个函数。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_38_color_FFFFFF_t_70_g_se_x_16 3]

## 异步加载组件 ##

组件过大时可以使用。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_52_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][64d89ddcb591475389378935fcb4e24b.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_39_color_FFFFFF_t_70_g_se_x_16 2]

## 性能优化（SCU）重要！ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_49_color_FFFFFF_t_70_g_se_x_16]  
**SCU**  
SCU默认返回true。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_33_color_FFFFFF_t_70_g_se_x_16]

**在React中，默认情况下，如果父组件有任何的更新，则子组件无条件更新，就算子组件没有改变！！！因此我们可以在子组件中设置SCU，来避免子组件更新，提高性能**  
SCU必须配合不可变值来使用，不然可能判断会有问题。

**纯组件 memo 备忘录**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_42_color_FFFFFF_t_70_g_se_x_16 1]  
使用方法：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_46_color_FFFFFF_t_70_g_se_x_16 2]  
![在这里插入图片描述][1e5ef97b03924e15b53b65e865c838af.png]  
这样就相当于已经实现了SCU，并且做的是浅比较，而SCU做的是深比较。

## 高阶组件HOC ##

可以用于抽离组件的公共逻辑。类似工厂模式。  
是一个函数，传入一个组件，返回一个新的有公共逻辑的组件，在新的组件中处理一些值，再通过给传入的组件传值来展示，并且将props透传给传入的组件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_49_color_FFFFFF_t_70_g_se_x_16 1]  
实际使用：获取鼠标的位置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_35_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_36_color_FFFFFF_t_70_g_se_x_16 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_39_color_FFFFFF_t_70_g_se_x_16 3]

## render props ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_64_color_FFFFFF_t_70_g_se_x_16]

## react-router ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_54_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_67_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_57_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_50_color_FFFFFF_t_70_g_se_x_16 1]

==============================================================

## React原理 ##

## JSX的本质 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_63_color_FFFFFF_t_70_g_se_x_16 1]  
createElement(tag,\{节点的属性\},child1,child2,child3…)  
jsx会使用这个函数，然后返回一个node节点。

## 合成事件 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_55_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_46_color_FFFFFF_t_70_g_se_x_16 3]

## batchUpdate ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_47_color_FFFFFF_t_70_g_se_x_16 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_41_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_67_color_FFFFFF_t_70_g_se_x_16 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_48_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_48_color_FFFFFF_t_70_g_se_x_16 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_47_color_FFFFFF_t_70_g_se_x_16 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_50_color_FFFFFF_t_70_g_se_x_16 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_58_color_FFFFFF_t_70_g_se_x_16]

## React渲染和更新的过程 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_47_color_FFFFFF_t_70_g_se_x_16 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_55_color_FFFFFF_t_70_g_se_x_16 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_54_color_FFFFFF_t_70_g_se_x_16 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_49_color_FFFFFF_t_70_g_se_x_16 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_51_color_FFFFFF_t_70_g_se_x_16 1]  
参考：https://zhuanlan.zhihu.com/p/26027085

在React Fiber中，一次**同步的耗时长的任务**在执行的过程中可能无法及时响应用户的请求，比如渲染更新过程。会分成多个分片完成，所以完全有可能一个更新任务还没有完成，就被另一个更高优先级的更新过程打断，这时候，优先级高的更新任务会优先处理完，而低优先级更新任务所做的工作则会完全作废，然后等待机会重头再来。

因为一个更新过程可能被打断，所以React Fiber一个更新过程被分为两个阶段(Phase)：第一个阶段Reconciliation Phase和第二阶段Commit Phase。

在第一阶段Reconciliation Phase，React Fiber会找出需要更新哪些DOM，这个阶段是可以被打断的；但是到了第二阶段Commit Phase，那就一鼓作气把DOM更新完，绝不会被打断。

这两个阶段大部分工作都是React Fiber做，和我们相关的也就是生命周期函数。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YiYU3VybWFu_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
因为第一阶段的过程会被打断而且“重头再来”，就会造成意想不到的情况。

比如说，一个低优先级的任务A正在执行，已经调用了某个组件的componentWillUpdate函数，接下来发现自己的时间分片已经用完了，于是冒出水面，看看有没有紧急任务，哎呀，真的有一个紧急任务B，接下来React Fiber就会去执行这个紧急任务B，任务A虽然进行了一半，但是没办法，只能完全放弃，等到任务B全搞定之后，任务A重头来一遍，注意，是重头来一遍，不是从刚才中段的部分开始，也就是说，componentWillUpdate函数会被再调用一次。

在现有的React中，每个生命周期函数在一个加载或者更新过程中绝对只会被调用一次；在React Fiber中，不再是这样了，第一阶段中的生命周期函数在一次加载和更新过程中可能会被多次调用！使用React Fiber之后，一定要检查一下第一阶段相关的这些生命周期函数，看看有没有逻辑是假设在一个更新过程中只调用一次，有的话就要改了。

特别是componentWillMount和componentWillUpdate。

## React和jQuery ##

1.  在React中，只有当事件发生的时候，state才发生改变，之后，React自动调用render()来更新UI，state成为了事件以及render()之间过渡，每个事件不需要担心哪一部分的DOM发生变化，他们只需要设置state就可以了。相应的，当你写render()的时候，你也只需要担心现在的state是什么。
2.  jQuery没有中间的过渡层’state’，我们需要花费很大的精力来解决它们之间相互的联系(对于复杂的组件，建议使用React而不是jQuery)
3.  React中把各个UI组件独立出来，有利于提高UI组件的复用率同时降低各个UI组件的耦合，新手在直接操作DOM时很难写出高效而又优雅的代码，从而使得前端代码满满变得越来越难以维护
4.  也就是说，React适合用在那些DOM操作复杂的单页面应用，有利于提高代码可读性以及提高页面性能（可以参考React Diff算法）；jQuery则是个用来帮你完成一些基本操作的工具库。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_37_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/14c33ecac6ff4f4caee64cfb8d40d6f9.png
[dafb6361753c443b98c41bc8f1109ce5.png]: /images/20220829/abbbb750f48946c2873d340322e5377a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_46_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/b156e6dccf9c4185af5a959dccb0b726.png
[9a23df3b313942a0a0fbd577495eddf9.png]: /images/20220829/05868ad74df64d4085223ed72ddd061c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YiYU3VybWFu_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/1c1b9d2252094cb6a5c3da9087973431.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_32_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/591e7ce631ae425d862a6668cff0d4ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_43_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/bb6f97cf10614d80ab2051e85dccf174.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_38_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/7c1fbe088a2343589779ed470a101ca2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_43_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/8af7721d23cf4b8b8e5de877d9b04d84.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_34_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/8624163daa044ea5b32596a2bb82e512.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_38_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/f2daa32928ed40b791f2c184aa6408f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_27_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/aeaaa704d35c4775b62cd74186b94d48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_28_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/b35c647ba1c64e5785c83fdb779a19bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_60_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/0e447ce89d6d4b0d86eb6e57f471a0d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_38_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/6cba86019cc24ceea3b416fa6b2d43c4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YiYU3VybWFu_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/eeccd90c957e4e9db3d898fda651b93e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YiYU3VybWFu_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/2140ef4daf924d3b801d6a74f7e4435d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_63_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/76ddcab7746d4c5da2435073361f53d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_47_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/f1ae4206010942d2af3e474059ed3afb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_47_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/0b7bf59358b34cffaf28ec14d561bbd3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_42_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/1cee457f3e3f404bb9500a68f1daafc0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_43_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/ddd4596f7a5d4dcdacb23bcb67a163fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_51_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/59cbafb53879423095ecad449eb93f9a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_36_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/5213b2da17f3411ba3b12c1259ae15b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_39_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/ccb5e3f466f04004be9fda17a417307f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_50_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/08239a9f9d3d4f199a24c02a36285123.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_46_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/9b3a1a5ac7b14422a4b380efb4f41bc4.png
[d346d226d67e4a938b026291c7adde20.png]: /images/20220829/3c1ba39898fe4fe1902a6de6abc27030.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_37_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/8aff9932e59f4fb4abe57136ce318419.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_39_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/a02fb9c25af542268774904ee38d8eb2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_38_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/975ebe961d7749eb8a7fd43884be08f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_52_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/3a84e0cc4e524e2babb3de9892565f79.png
[64d89ddcb591475389378935fcb4e24b.png]: /images/20220829/6795dfd2a9044c1a8d89bc7378746494.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_39_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/250265a766ac4a28b7d447810ccda72a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_49_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/b0041ef031134f67a107c24d76af4f71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_33_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/e967f9225fa3446eb4a3b90f9f9a11e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_42_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/d87306bc8bdb48808c55268334f4f476.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_46_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/e249a7fa45a64cc8ae41dd5ae70643a4.png
[1e5ef97b03924e15b53b65e865c838af.png]: /images/20220829/88e96bd855be4b8aba498e074f1c47fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_49_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/3888342f64ec434593b34ee36d2eda0e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_35_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/cf8b5f6adaf0420e90e935c2628b52f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_36_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/e596e17511e3467e8956633caee3c19c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_39_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/1a86383307a04577977cd139d4f55f41.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_64_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/ce99e8e9776d46bf9927c27d8fb628d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_54_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/ded5c5aac9e440a3aefb0d58e5e38679.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_67_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/f933c159773849cf80509aaf6f621b30.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_57_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/e1eea91d4436477583e9e9c4f5504657.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_50_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/07e576f56faa459bbc8edb59a7732b3d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_63_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/ecbf328c448f426196a27f73cc244874.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_55_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/ea146502e48c4b9c81e024ae6006ee63.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_46_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/e957647243d54438a87c579cf3249687.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_47_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/e816120e451d4e9f91bab5eacc877210.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_41_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/335038ce29bf4b7a8f7a18a68b11d63c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_67_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/1039c6b449464d1b9d2447b26b55e661.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_48_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/f20ad861b8c04a908c5f6dbe57f1584c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_48_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/307496cdf39d4090b37f0bd4838db270.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_47_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/9228854798f442aebe8c1709b78a444d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_50_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/73165b671f9f4338b5587bb784eac500.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_58_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/0f65fa324c5743948dff45c327e3fc99.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_47_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220829/14347fdf66c545f4b5320af577e9cf2a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_55_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/bfa6d43313a04b62843009d6f7b4592c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_54_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/6573753579c7421db667bc6acb215e9a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_49_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/9686e4273f014604a1f6f309ce4a7642.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5YiYU3VybWFu_size_51_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/498aa7fc3a5c4cedb14fd215d89624a1.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YiYU3VybWFu_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/ef27f359c6354219a41353117dd77323.png