react componentDidMount时机问题

Question

componentDidMount是组件确实渲染成了dom后触发，如果我在这时候append一个绝对定位top0的有颜色的div，预期效果应该是先显示react组件，后立马显示红色div但是实际是直接显示红色div了，都没有闪一下的效果，这是为何？

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>
    )
  }
}

Answer 1

同1楼，这个过程肉眼是看不出来的。就想同理如果在这个生命在后期中调用api来获取数据，实际是调用了2次，但是在浏览器中，是根本看不出来的。

Answer 2

你为什么会觉得现代计算机有这么慢？
想看效果自己用setTimeout设置延迟。

Answer 3

render部分写法有误

render() {
    return (
      <div style={{background:'red'}}>hello world</div>
    )
 }

现在应该可以先看到红色，然后再看到蓝色了