0

I'm a react rookie, I just know that React use virtual DOM instead of real DOM, so what I understand is that virtual DOM has one step to mount to real DOM, then browser start to draw, as I know React has lifecycle, what I want to know is that which step in its lifecycle the browser will start to draw or re-draw?

  • In other words, which lifecycle method ends the browser starts to draw?
  • which lifecycle method ends the browser starts to re-draw?
kalends
  • 3
  • 2

1 Answers1

0

The manin method that triggers re-drawing is setState

Draw (or better word render) happens when ReactJS first encouter your component (either at the page initial load or as a result of some ancestor component re-rendering). Re-draw (re-render) happens when you call the method this.setState of that component. To be accurate, the setState method of some ancestor component could also wipe that component out if the new rendering of the ancestor does not include this component ...

Payam V
  • 130
  • 7
  • Thanks for your answer, what I understand setState will trigger some React lifecycle method again, and I try to figure out which lifecycle method could meet my question above in these? – kalends Jan 14 '21 at 02:41
  • @kalends Yes. setState is the beginning method, and the last method to be called is render. If you are curious what other methods get called in the way use console.trace() in your render method and it prints out all the stack trace that led there. – Payam V Jan 14 '21 at 02:45