Preact: component._parentComponent loop

[chrisHchen]

I was going through source code and find hard to understand this part. when isChild is falsy, component. _parentComponent should never exist，or maybe I missed something...

[yaodingyd]

When isChild is truthy, a high order component is being rendered code. Whatever can be rendered into a DOM node is though buildComponentFromVnode -> setComponentProps -> renderComponent flow, and in this way, all the components need to have the actual rendered DOM node reference, so it traverse through the _parentComponent property and have all the parent component have the DOM node reference.

An example, say we have the following component structure:

<OuterParent>
    <InnerParent>
        <Child>
            <div> this would be rendered into DOM node</div>
        </Child>
    </InnerParent>
</OuterParent>

In this case, OuterParent, InnerParent, Child all need the actual DOM node reference. And the render process is diff, not renderComponent with isChild is true.

[chrisHchen]

@yaodingyd
Thx for your reply. I think I understand the flow how DOM is rendered and referenced by component as you pointed out. However it does not address my doubt.
As your example, InnerParent , Child, div will all go through renderComponent with isChild = true， that is to say, they will never go into the code block I referenced. Only OuterParent will because its isChild is falsy. but OuterParent does not has _parentComponent, so it will not go throght the while block. so no one goes in the while block.
however, these HOC does have a DOM reference, it is done by this code I think.

[yaodingyd]

@chrisHchen

As your example, InnerParent , Child, div will all go through renderComponent with isChild = true， that is to say, they will never go into the code block I referenced.

I cannot agree with your comment. In my last comment I'm saying InnerParent , Child, div will not go through renderComponent, but diff code.

[chrisHchen]

@yaodingyd
their diff is done within renderComponent

[yaodingyd]

@chrisHchen Yes, but not with isChild is true.
this line will only be executed if this is a HOC.

[chrisHchen]

@yaodingyd
they are HOCs except div

[yaodingyd]

@chrisHchen
Alright I'll restructure my code:

class Child extends Component {
    render () {
        return <div>this would be rendered into DOM node</div>
    }
}

class InnerParent extends Component {
    render () {
        return <Child />
    }
}

class OuterParent extends Component {
    render () { 
        return <InnerParent />
    }
}

[chrisHchen]

@yaodingyd
actually this is the code I had in mind although you put it out in another fashion at first.
I believe we will need someone else to help

[yaodingyd]

@chrisHchen
Correct me if I'm wrong, but you are saying

class InnerParent extends Component {
    render () {
        return <Child />
    }
}

is essentially a HOC?

[chrisHchen]

I think what we usually calls HOC is something that receives a component and returns some wrapped component. However as this code goes, the author calls a component with a _component property high order component, so I think we will have to go with it in this context.

[yaodingyd]

Again I have to disagree. Any component would have a _component property if it has child component.

I truly believe if you setup a preact project and have several nested 'normal' components and print out the stack track when doing rendering, you'll better understand your issue.

[chrisHchen]

@yaodingyd
Actually I did setup a small test case using the latest develop version. I also use the four Component you provided above and put one extra console.log line with the while block I mention above. But it does not print any thing, which means nothing goes in this code block, at least in this case...

[yaodingyd]

@chrisHchen Sorry I might have wasted your time here... I just realized my understanding about HOC is wrong.

[chrisHchen]

@yaodingyd
still thanks a lot trying to help。As I said we may need someone else to take a look at this

[yaodingyd]

@chrisHchen OK! I asked the same question in Slack and this is what @developit gives:

isChild is only true when rendering is triggered from a parent
if a higher-order child updates itself (via setState/forceUpdate), isChild=false but it will have _parentComponent
the conditional block around that loop basically handles that case: if a high-order child component updates without the parent, that component and its base (the DOM element it rendered) need to have pointers to the outermost higher order parent.

[chrisHchen]

@yaodingyd
Thx a lot! I think it clears everything

[developit]

For anyone in the Preact Slack, ping me as I have some information you might find interesting about this that we've not yet publicized yet.