代数效应#

这篇文章可以好好看看

代数效应能够将副作用从函数逻辑中分离，使函数关注点保持纯粹。

就比如我们平时用await来等待一个值的返回

1
async function getData(){
2
    const res = await loadData();
3
    return res;
4
}

代数效应相当于，我关注的是 await loadData()能给我什么东西，而不是关注他里头是异步还是同步，怎么处理这个数据的；

代数效应 in React#

在react中有个结合Suspense的例子

Suspense Demo

而我们日常用hooks，例如useState什么的，我们不需要关注函数组件的这个state状态是怎么处理的，我们只要知道这个东西能干嘛就行。

为什么不用Generator#

新老架构那片说过，React16之后引入了一个 scheduler（调度器），并且重构了Reconciler（协调器），就是为了将react的老一套同步更新 的架构变成 **异步可中断 **的

异步可中断更新可以理解为：更新在执行过程中可能会被打断（浏览器时间分片用尽或有更高优任务插队），当可以继续执行时恢复之前执行的中间状态。

缺点：

• generator它具有传染性和async await一样，就像你用async的函数那东西，你需要写await一样
• 中间状态上下文相关，可以看看这个 解释

Fiber含义#

首先我们要明白：

1. react15的时候采用递归方式去执行，数据保存在递归调用栈中，故被称为stack reconciler
2. react16 的reconciler 基于 fiber节点实现的，故称为 fiber reconciler
3. 一个 React Element 对应一个Fiber节点
   • 作为静态结构理解 --- 保存了该组件类型（原生/类组件/函数组件/…），以及对应dom节点信息
   • 作为动态结构理解 --- 每个Fiber保存了本次更新中该组件改变的状态，要执行的工作（插入/删除/更新…）

Fiber数据结构#

Fiber数据结构

1
function FiberNode(
2
  tag: WorkTag,
3
  pendingProps: mixed,
4
  key: null | string,
5
  mode: TypeOfMode,
6
) {
7
  // 作为静态数据结构的属性
8
  this.tag = tag;
9
  this.key = key;
10
  this.elementType = null;
11
  this.type = null;
12
  this.stateNode = null;
13

14
  // 用于连接其他Fiber节点形成Fiber树
15
  this.return = null;
16
  this.child = null;
17
  this.sibling = null;
18
  this.index = 0;
19

20
  this.ref = null;
21

22
  this.pendingProps = pendingProps;
23
  this.memoizedProps = null;
24
  this.updateQueue = null;
25
  this.memoizedState = null;
26
  this.dependencies = null;
27

28
  this.mode = mode;
29

30
  // 作为动态的工作单元的属性
31
  this.effectTag = NoEffect;
32
  this.subtreeTag = NoSubtreeEffect;
33
  this.deletions = null;
34
  this.nextEffect = null;
35

36
  this.firstEffect = null;
37
  this.lastEffect = null;
38

39
  // 调度优先级相关
40
  this.lanes = NoLanes;
41
  this.childLanes = NoLanes;
42

43
  // 指向该fiber在另一次更新时对应的fiber， current tree中的fiber节点和workinprogress tree的fiber节点连接
44
  this.alternate = null;
45
  }

1
// 指向父级Fiber节点
2
this.return = null;
3
// 指向子Fiber节点
4
this.child = null;
5
// 指向右边第一个兄弟Fiber节点
6
this.sibling = null;

1
function App(){
2
    return (
3
      <div>
4
          <span>hello world</span>
5
            <a>
6
                weng
7
                <span/>
8
            </a>
9
        </div>
10
    )
11
}

1
// Fiber对应组件的类型 Function/Class/Host...
2
this.tag = tag;
3
// key属性
4
this.key = key;
5
// 大部分情况同type，某些情况不同，比如FunctionComponent使用React.memo包裹
6
this.elementType = null;
7
// 对于 FunctionComponent，指函数本身，对于ClassComponent，指class，对于HostComponent，指DOM节点tagName
8
this.type = null;
9
// Fiber对应的真实DOM节点
10
this.stateNode = null;

1
// 保存本次更新造成的状态改变相关信息
2
this.pendingProps = pendingProps;
3
this.memoizedProps = null;
4
this.updateQueue = null;
5
this.memoizedState = null;
6
this.dependencies = null;
7

8
this.mode = mode;
9

10
// 保存本次更新会造成的DOM操作
11
this.effectTag = NoEffect;
12
this.nextEffect = null;
13

14
this.firstEffect = null;
15
this.lastEffect = null;

1
// 调度优先级相关
2
this.lanes = NoLanes;
3
this.childLanes = NoLanes;

what is 双缓存？#

当我们用canvas绘制动画，每一帧绘制前都会调用ctx.clearRect清除上一帧的画面。

如果当前帧画面计算量比较大，导致清除上一帧画面到绘制当前帧画面之间有较长间隙，就会出现白屏。

为了解决这个问题，我们可以在内存中绘制当前帧动画，绘制完毕后直接用当前帧替换上一帧画面，由于省去了两帧替换间的计算时间，不会出现从白屏到出现画面的闪烁情况。

这种在内存中构建并直接替换的技术叫做双缓存 。

React使用“双缓存”来完成Fiber树的构建与替换——对应着DOM树的创建与更新。

Fiber树和双缓存#

React中最多会同时存在两棵Fiber树

1. Current Fiber 树：当前显示在屏幕面前的树
2. workInProgress Fiber 树：正在内存中构建的树

current Fiber树中的Fiber节点被称为current fiber，workInProgress Fiber树中的Fiber节点被称为workInProgress fiber，他们通过alternate属性连接。

1
currentFiber.alternate === workInProgressFiber;
2
workInProgressFiber.alternate === currentFiber;

React应用的根节点通过使current指针在不同Fiber树的rootFiber间切换来完成current Fiber树指向的切换。

即当workInProgress Fiber树构建完成交给Renderer渲染在页面上后，应用根节点的current指针指向workInProgress Fiber树，此时workInProgress Fiber树就变为current Fiber树。

每次状态更新都会产生新的workInProgress Fiber树，通过current与workInProgress的替换，完成DOM更新。

1
function App() {
2
  const [num, add] = useState(0);
3
  return (
4
    <p onClick={() => add(num + 1)}>{num}</p>
5
  )
6
}
7

8
ReactDOM.render(<App/>, document.getElementById('root'));