0

I have read lots of articles and believe this question is not the duplicated one.

According to What is the role of the render() function inside react component?

render function is part of the react component lifecyle where ReactDOM is the class object which exposes a method called render which is used to render the React JSX content into your DOM.

and I also read many articles which explain how the react virtual dom works, which uses diff process before render its node to the real-dom.

All the articles (at least what I've read) mention that render() reflects dom

I wonder if that dom is real-dom or virtual-dom

Actually I am having some trouble understanding componentDidUpdate() which is immediately invoked after render(), realizing my lack of understanding of component's render function

appreciate for your help

jwkoo
  • 2,393
  • 5
  • 22
  • 35

2 Answers2

1

componentDidUpdate is the last opportunity to react to change in props, during the given cycle of the react component's life.

It is the last opportunity because it has access to prevProps.

and BTW right after the render - getSnapshotBeforeUpdate(prevProps, prevState) is called and only then componentDidUpdate.

According to react doc -

getSnapshotBeforeUpdate() is invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture some information from the DOM (e.g. scroll position) before it is potentially changed. Any value returned by this lifecycle will be passed as a parameter to componentDidUpdate().

So I assume that render method refers to the real DOM.

George.S
  • 149
  • 8
  • thanks. maybe we cannot definitely choose one between real-dom and virtual-dom. since render function is related to both, right? – jwkoo Feb 23 '19 at 14:07
  • that is truly uncertain, at the point, but it seems like the aim of the render function is to add things to the DOM and they have to be pure, so that they just reflect what is supposed to be in the DOM I believe that is a reference to a real DOM. – George.S Feb 23 '19 at 14:17
1

react interact with Virtual DOM.To apply updates/changes to real DOM, the Virtual DOM core feature comes into play, the reconciliation algorithm. It's job is to come up with the most optimized solution to resolve the difference between previous and current Virtual DOM state. And then apply the new Virtual DOM to the real DOM.

this article will help to understand virtual DOM in depth https://medium.com/@gethylgeorge/how-virtual-dom-and-diffing-works-in-react-6fc805f9f84e

Vishal Rajole
  • 1,504
  • 1
  • 13
  • 19