search

gnosis23 / hello-world-blog

还是 issues 里面写文章方便
https://bohao.work
0 stars 0 forks source link

React Inside #39

Open gnosis23 opened 5 years ago

gnosis23 commented 5 years ago

Version

15: old 16+: Fiber

Fiber

gnosis23 commented 5 years ago

Hello World

首先来暖场的：

然后稍微提高一点难度：

更高阶一点的问题：

References

gnosis23 commented 5 years ago

Sources

Fiber

setState

gnosis23 commented 5 years ago

探索 v15.3

带着问题阅读

Reconciler

比较children

答案就在：

// stack
ReactMultiChild._updateChildren （ diff 算法：插入、移动、删除 ）
  |-ReactMultiChild_reconcilerUpdateChildren（ 将children放到map里 ）
    |--ReactChildReconciler.updateChildren （ 新增、更新、删除 ）

默认会给孩子赋一个 key

// src/shared/utils/traverseAllChildren.js 
function getComponentKey(component, index) {
  // Do some typechecking here since we call this blindly. We want to ensure
  // that we don't block potential future ES APIs.
  if (component && typeof component === 'object' && component.key != null) {
    // Explicit key
    return KeyEscapeUtils.escape(component.key);
  }
  // Implicit key determined by the index in the set
  return index.toString(36);
}

Component

问题2的答案：

State

原理是：

只有标记为dirty的component会渲染

Reference

gnosis23 commented 5 years ago

探索 v16

Fiber 结构

参考这篇文章 。

// 非真实
interface FiberNode {
  // root | host | class
  tag: FiberType;
  // user defined class | DOM tag
  type?: typeof Component | string;
  // class instance | DOMElement
  stateNode?: FiberDOMElement | Text | Component;
  props: object;
  child?: FiberNode;
  sibling?: FiberNode;
  parent?: FiberNode;
  // old tree
  alternate?: FiberNode;
  // PLACEMENT | UPDATE | DELETION
  effectTag?: EffectTag;
  // fibers
  effects?: FiberNode[];
  partialState?: object;
}