3

I was reading a section of the React docs which uses the following vocabulary, but I can't figure out the relationship between them:

  • A component
  • A component's instance
  • A component's backing instance
  • A virtual DOM element
  • A ReactElement

If and how are they related?

dayuloli
  • 16,205
  • 16
  • 71
  • 126
  • 1
    some of the concepts are explained [here](https://medium.com/@fay_jai/react-elements-vs-react-components-vs-component-backing-instances-14d42729f62#.5ulakfekn) – eenagy Jun 10 '16 at 10:28
  • Thanks @eenagy for the article, it does help explain a lot of the concepts. From the article, it seems like the (normal) DOM is a tree containing HTML elements, and React's version of the Virtual DOM is a tree containing React Elements. – dayuloli Jun 10 '16 at 12:26
  • But I think the article is wrong in regards to backing instance. It says "`ReactDOM.render()` returns a React Component instance", but from the docs it says "`ReactDOM.render()` returns a *reference* to your component's *backing instance*" This [comment](https://medium.com/@lewis19921006/a-react-components-backing-instance-is-the-object-in-memory-that-represents-the-node-in-the-view-c4b4b339e3fe#.tekq38wcu) following the article also points this inconsistency out. – dayuloli Jun 10 '16 at 12:28

1 Answers1

1

A virtual dom elements are javascript objects which represents your DOM nodes for better rerendering/diffing/creation support instead updating your DOM at every state change.

ReactElement is a simple javascript object representing visual pieces of your UI. Which can be html element or other react component. This javascript object will be associated with one or more virtual DOM element(s). This is for the sake of performance.

Component

According to docs it is

specification object that contains a render method

Which I would add :

for creating , combining and wrapping ReactElements with behaviour.

The behaviours can be the followings :

  • bind data
  • functions can be bound to DOM events
  • extension/inheritance support for the components
  • react's lifecycle support
  • javascript flow control (hiding/ showing multiple components)

Component's instance plainly can be thought of as the same as object definition and object's instance.

Definition is a blueprint for creating the defined object(s).

For example if you have a List with multiple ListElement.

  • List: holding grocery elements

    • ListItem : honey
    • ListItem : milk
    • ListItem : cereal
    • ListItem : fruits

One List definition --> one instance.

One ListElement definition --> multiple instances of that component

Component's backing instance(s) is/are the actually rendered element.

Note: when I say bind/bound I meant in the unidirectional sense.

eenagy
  • 912
  • 1
  • 8
  • 22