实例化自定义组件的内部属性

252 阅读2分钟

综合组件在被实例化为挂载实例的时候会带有一些内部属性,这些属性都是以'_'开头。

全部的属性如下:


    this._currentElement = element;
    this._rootNodeID = null;
    this._instance = null;

    ' 
        See ReactUpdateQueue
    '    
    this._pendingElement = null;
    this._pendingStateQueue = null;
    this._pendingReplaceState = false;
    this._pendingForceUpdate = false;

    this._renderedComponent = null;

    this._context = null;
    this._mountOrder = 0;
    this._topLevelWrapper = null;

    '
        See ReactUpdates and ReactUpdateQueue.
    '
    this._pendingCallbacks = null;
    

this._currentElement

this._currentElement = element

这里是将构建当前挂载实例的element 赋值给 this._currentElement。这样一个挂载实例的 _currentElement 属性就存储了构建这个挂载实例的element。

_rootNodeID

_rootNodeID 表示的是组件的根ID.也就是我们定义的组件在挂载的时候最外层的元素上的data-reactid 属性。

_instance

这个属性存储的是,组件的实例。关于组件实例,组件挂载实例的区别请参考文章

组件实例就是我们定义的组件的实例,这里包含了我们定义组件的内容,事件,方法,生命周期函数等。

一般我们 new 一个 element.type 来得到一个组件实例。

ReactUpdateQueue

接下来这四个属性是在 ReactUpdateQueue 中用到。

_pendingElement

这个属性存储接下来要挂载的组件信息,全文只在挂载根组件的时候用到过,为包装组件的挂载实例 的属性 _pendingElement 赋值为新 element 也就是App组件的element.

_pendingStateQueue

在调用setState 或者是replacState的时候,React会为这个属性赋值,值是一个数组,数组存储的是多次修改的state。 就是state队列,多个state的处理属性。

_pendingReplaceState

属性值是一个布尔值。

在调用方法replaceState 的时候会被赋值为true

这个属性表示是否有 replaceState。

_pendingForceUpdate

在强制更新 forceUpdate 的时候 该属性会被改为true。

_renderedComponent

该属性用来存储当前挂载实例之后的挂载实例,相当于一个链条,链接从根组件一直到最后一个组件的链条。也形成一个挂载实例的树形结构。

_context

顾名思义,就是保存当前组件的上下文,在组件挂载的时候传入,也就是调用挂载实例的 mountComponent 方法的时候传入。

_mountOrder

是一个标识,标识当前的组件在组件树中的位置,从根组件开始为1,根组件内的组件一个个的安装出现的顺序设定_mountOrder的值。 从1开始,每一个组件被挂载的时候 也就是调用组件实例的 mountComponent 方法的时候会加加的。

_topLevelWrapper

_topLevelWrapper 值一直为null没有起到作用