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.
Source: stackoverflow.com
Related Query
- Virtual DOM creation order. Which node created first?
- Get DOM node of wrapped component in a higher order component (HOC)?
- Automatically going to a div element created in React Virtual Dom
- Apply MUI Theme to Created DOM Node
- Why is React's concept of Virtual DOM said to be more performant than dirty model checking?
- Getting DOM node from React child element
- How exactly is React's Virtual DOM faster?
- Should I use ref or findDOMNode to get react root dom node of an element?
- how to check the actual DOM node using react enzyme
- Removing an item causes React to remove the last DOM node instead of the one associated with that item
- Why can't browsers use a virtual dom internally as an optimisation?
- How is React's Virtual DOM faster than DOM?
- ReactJS access to Virtual DOM reconciliation result
- Does order in which you wrap component with connect and withRouter matter
- Pass React Ref from parent to child in order to get DOM element
- How's Virtual DOM implementation is different than createDocumentFragment() if no state is observed?
- Get React.refs DOM node width after render and trigger a re-render only if width has value has changed
- How to check props of a DOM node in an unit test in React 0.14?
- In which order are parent-child components rendered?
- How to get the DOM node from a Class Component ref with the React.createRef() API
- Which is the right way to detect first render in a react component
- React find DOM node by refs set to variable?
- How to tell which component generated DOM node?
- React access parent's dom node from child component
- Preventing react from rendering unchanged componets into the virtual DOM
- React's getDOMNode always return component's root DOM node instead of reffed one
- Which renders first child or parent in reactjs
- How to use Turborepo for an existing react app created with Create React App in order to make it a monorepo?
- Measure React DOM node on resize with hooks
- Can I autofocus on the first field in a redux-form created using a loop?
More Query from same tag
- Access Key of Map Created Component
- Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method
- How to pass an input target value and setState values as parameters for a helper function?
- change content if update is made in react?
- Selected element within list in React
- React + typescript using CDN script
- showing image with get method in reactjs
- Get cookie with react
- How to set a value for a React Context Provider using Hooks
- How to activate a single div using React.js and setActive?
- how to throw id parameter and display detailed data based on id at listview in react native
- Overwriting array of objects instead of updating it
- JSX/JavaScript syntax in Chrome
- Wanted to pass parameter in <img> src attribute URL in ReactJS?
- How can i pass and display data from one component to other component?
- How to debug a simple API in react
- Add class to current (clicked) element in nested map statement
- What is the <div {...props}> in the below code?
- can not retrieve Username with Amplify Auth.currentAuthenticatedUser
- TypeScript: Expected type comes from property 'children' which is declared on 'IntrinsicAttributes & Prop'
- How to give different background colors for different grid items in grid Layout in react.js
- Re-rendering an app using ReactDOM.render() rather than within its container component -- anti-pattern?
- React Load Spinner While Array of Images Load
- How to send FormData in MERN Stack project with TS
- How can I scroll to a div onClick using React?
- Slider functionality JavaScript
- Parameter 'initialState' cannot be referenced in its initializer
- React: VariableDeclarator ASTNodes are not handled by markPropTypesAsUsed
- create-react-app integrate with storybook 6.1.6 and build has error
- How to test if a functions is called in React?