React源码分析8-状态更新的优先级机制

为什么需要优先级

优先级机制最终目的是为了实现高优先级任务优先执行，低优先级任务延后执行。

实现这一目的的本质就是在低优先级任务执行时，有更高优先级任务进来的话，可以打断低优先级任务的执行。

同步模式下的react运行时

我们知道在同步模式下，从 setState 到 虚拟DOM遍历，再到真实DOM更新，整个过程都是同步执行且无法被中断的，这样可能就会出现一个问题 —— 用户事件触发的更新被阻塞。

什么是用户事件触发的更新被阻塞？如果 React 正在进行更新任务，此时用户触发了交互事件，且在事件回调中执行了 setState，在同步模式下，这个更新任务需要 等待 当前正在更新的任务完成之后，才会被执行。假如当前 React 正在进行的更新任务耗时比较久，用户事件触发的更新任务不能及时被执行，造成下个更新任务被阻塞，从而形成了卡顿。

这时候，我们就希望能够及时响应用户触发的事件，优先执行用户事件触发的更新任务，也就是我们说的异步模式

我们可以比较一下，同步模式下和异步模式(优先级机制)下更新任务执行的差异

import React from "react";
import "./styles.css";

export default class extends React.Component {
   
  constructor() {
   
    super();
    this.state = {
   
      list: new Array(10000).fill(1),
    };
    this.domRef = null;
  }
  componentDidMount() {
   
    setTimeout(() => {
   
      console.log("setTimeout 准备更新", performance.now());
      this.setState(
        {
   
          list: new Array(10000).fill(Math.random() * 10000),
          updateLanes: 16
        },
        () => {
   
          console.log("setTimeout 更新完毕", performance.now());
        }
      );
    }, 100);
    setTimeout(() => {
   
      this.domRef.click();
    }, 150);
  }

  render() {
   
    const {
    list } = this.state;
    return (
      <div
        ref={
   (v) => (this.domRef = v)}        className="App"        onClick={
   () => {
             console.log("click 准备更新", performance.now());          this.setState(            {
    list: new Array(10000).fill(2), updat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47