gates gates - 1 month ago 15
React JSX Question

What is "Mounting" in React js?

I am hearing this term this term "mount" too many times while learning ReactJS. And there seem to be lifecycle methods and errors while regarding to this term. What exactly does React mean by mounting?

Examples:

componentDidMount() and componentWillMount()

Answer

In React, components you work with can both be represented as React nodes and DOM nodes.

How a React node is represented as a DOM node and where and when it appears in the DOM tree is managed by the top-level API. To get a better idea what's going, look at the most simple example possible:

let foo = React.createElement(FooComponent);

So what is foo and what can you do with it? foo, at the moment, is an instance of a FooComponent React type. It's currently not anywhere on the page, i.e. it is not a DOM element, doesn't exist anywhere in the DOM tree and, aside from being React element node, has no other meaningful representation in the document.

If you were to call React.findDOMNode(foo) you would get a falsy object back. Why? foo doesn't have a DOM representation because it currently doesn't need to exist anywhere in the DOM tree.

But, once you attempt to mount a React element node in the document, you will trigger the component lifecycle which will create a suitable managed DOM node:

React.render(foo, container);

From this point, foo is no longer just a React node. It has an associated DOM node and is now a first-class citizen in the document. You can now find it as an actual DOM node somewhere in the tree and interact with it as you would with other DOM elements: compute it's height, width, apply other styles, pass it to jQuery, etc.