React学习笔记 - 基础概念(五) 从React Element到Fiber节点

·  阅读 366
React学习笔记 - 基础概念(五) 从React Element到Fiber节点

React中的每个组件都有一个UI表示形式,我们可以调用从该render ****方法返回的视图或模板。这是我们ClickCounter ****组件的模板:

<button key="1" onClick={this.onClick}>Update counter</button>
<span key="2">{this.state.count}</span>
复制代码

React Elements

模板通过JSX编译器后,您最终将获得一堆React元素。这实际上是从render ****React组件的方法返回的,而不是HTML。由于我们不需要使用JSX,因此可以像下面这样重写组件的render ****方法ClickCounter ****:

class ClickCounter {
    ...
    render() {
        return [
            React.createElement(
                'button',
                {
                    key: '1',
                    onClick: this.onClick
                },
                'Update counter'
            ),
            React.createElement(
                'span',
                {
                    key: '2'
                },
                this.state.count
            )
        ]
    }}
复制代码

方法React.createElement中对的调用render将创建两个数据结构,如下所示:

[
    {
        $$typeof: Symbol(react.element),
        type: 'button',
        key: "1",
        props: {
            children: 'Update counter',
            onClick: () => { ... }
        }
    },
    {
        $$typeof: Symbol(react.element),
        type: 'span',
        key: "2",
        props: {
            children: 0
        }
    }]
复制代码

您可以看到React将属性添加 $$typeof ****到这些对象,以将它们唯一地标识为React元素。然后,我们有属性typekey ****并且props ****描述的元素。这些值取自传递给React.createElement函数的内容。请注意,React如何将文本内容表示为span ****和button ****节点的子代。以及点击处理程序如何成为button ****元素道具的一部分。React元素上还有其他字段,例如ref ****超出本文范围的字段。

ClickCounter的React元素没有任何props 或key:

{
    $$typeof: Symbol(react.element),
    key: null,
    props: {},
    ref: null,
    type: ClickCounter
}
复制代码

Fiber nodes

reconciliation 期间,从该render方法返回的每个React元素的数据都将合并到Fiber tree中。每个React元素都有一个对应的Fiber节点。与React元素不同,并不是在每个渲染器上都重新创建Fiber(??)。这些是保存组件状态和DOM的可变数据结构。

前面我们讨论过,框架需要根据React元素的类型执行不同的活动。在我们的示例应用程序中,对于类组件,ClickCounter它调用生命周期方法和render方法,而对于span宿主组件(DOM节点),它执行DOM mutation。因此,每个React元素都被转换为相应类型的Fiber节点,该节点描述了需要完成的工作。

您可以将Fiber视为代表要完成的某些工作或换句话说,一个工作单元的数据结构。Fiber的体系结构还提供了一种方便的方式来跟踪,安排,暂停和中止工作。

首次将React元素转换为Fiber时,React使用元素中的数据在createFiberFromTypeAndProps函数中创建光纤。在随后的更新中,React重用了Fiber,并仅使用来自相应React元素的数据来更新必要的属性。key相同的React元素不再从render方法中返回,React可能还需要根据prop在层次结构中移动节点或将其删除。

React为每个React元素创建了一个Fiber node,并且由于我们拥有这些元素的树,所以我们将拥有一棵光纤节点树。在我们的示例应用程序中,它看起来像这样:

image.png 所有纤维的节点上使用光纤节点以下性质通过一个链表连接:childsiblingreturn

分类:
前端
标签: