在看源码的过程中问了自己一些问题,在此对自己记录的问题做一回答。

    • 例如一个组件有很多属性,那么在更新时是比较props地址,还是比较props里的属性?

    组件对比的是props的地址。在beginWork中处理。组件只处理生命周期!

    • 子组件为什么会成为两个呢?每一次都是新建并复制吗?

    参考:createWorkInProgress

    • 更新的高效性如何实现?

    参考:高效更新

    • 更新的是整个树,还是当前组件?

    若忽略复用这块,基本上更新的是当前组件。

    • 两者执行的流程相同吗?
      1. onClickFn = () => {
      2. console.log('app click');
      3. }
    1. onClickFn = () => {
    2. this.setState({ val: 3 });
    3. }

    两者调用流程不同。调用setState会生成更新队列,会进行更新。只console.log 没有更新队列,不进行更新。

    • react-reconciler 和 Event的关系

    在packages\react-dom\src\client\ReactDOM.js中有一段代码:

    1. setBatchingImplementation(batchedUpdates,interactiveUpdates,flushInteractiveUpdates);

    batchedUpdates、interactiveUpdates、flushInteractiveUpdates 均来自react-reconciler/inline.dom,而setBatchingImplementation 则来自 packages\events\ReactGenericBatching.js。在ReactDOM.js中将react-reconciler 与 events 建立了联系。在触发事件时,可以在event中执行和react-reconciler相关的设置和操作。

    • 事件的派发 与 原生事件的关系

    react事件系统还是依靠于原生,若原生绑定的方法中阻止了冒泡,react中的事件将无法执行。

    • What is “React Fiber”?

    fiber 是React 16中新的reconciliation 引擎。fiber代表一个 unit of work。它的主要目标是支持虚拟DOM的增量呈现。

    React, however, also uses internal objects called “fibers” to hold additional information about the component tree. They may also be considered a part of “virtual DOM” implementation in React.参考

    • fiber 的优势?fiber是递归吗?

    如何以及为什么React Fiber使用链表遍历组件树
    递归方法直观,非常适合遍历树。但是正如我们发现的,它有局限性。最大的一点就是我们无法分解工作为增量单元。我们不能暂停特定组件的工作并在稍后恢复。通过这种方法,React只能不断迭代直到它处理完所有组件,并且堆栈为空。

    • react Tree 与 dom tree 是关联还是引用?

    node[internalInstanceKey] 保存fiber 实例。fiber.stateNode 保存node实例。

    • 创建的对象是否都存在内存中呢?

    javascript是面向对象编程。对应的html也是dom对象。在渲染的过程中创建的元素,最终显示为html。创建的对象、dom Element、dom Text、html对象,其实是一份对象。

    • Mutation(变化)和Persistence(持续;固执;存留)是互斥的吗?
    • ReactWork 和 fiber work的关系?

    ReactRoot 的work,可以拆分为多个work。

    • react的时间碎片(requestCurrentTime)?

    在更新时会标注时间,标识该fiber有更新。执行完成后时间将恢复为0.