componentDidMount is triggered after the component is indeed rendered into dom. If I append a colored div, that absolutely locates the top0 at this time, the expected effect should be to display the react component first, and then immediately display the red div, but actually directly display the red div, which does not have a flash effect. Why?
class App extends Component {
constructor(){
super();
}
componentDidMount() {
const div=document.createElement("div");
div.style="position:absolute;height:100px;width:100vw;background:blue;top:0";
document.body.appendChild(div)
}
render(){
return (
<div style={{background:"red"}}>hello world</div>
)
}
}