score:1

Accepted answer

react.createelement creates virtual dom, and document.createelement creates real dom. so if we know each the call order of react.createdom/document.createelement, we can know the order of element creation as well.

as show bellow, i rewrite those functions in order to know when they are called:

<!-- load essencial libs -->
<div id="app"></div>
<script>
react.createelement = (fn => (...params) => {
  console.log('call react.createelement and params is')
  console.log(params[0])
  return fn.apply(react, params)
})(react.createelement)
document.createelement = (fn => (...params) => {
  console.log('call document.createelement, and param is')
  console.log(params[0])
  return fn.apply(document, params)
})(document.createelement)

const app = react.createelement(
  'div',
  null,
  react.createelement(
    'span',
    null,
    'text'
  )
)
reactdom.render(app, document.getelementbyid('app'))
</script>

and the output is:

call react.createelement, and param is
span
call react.createelement, and param is
div
call createelement, and param is
span
call createelement, and param is
div

so children element are created first, both of virtual dom and real dom.


Related Query

More Query from same tag