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() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div style={{background:'red'}}>hello world</div>&nbsp; &nbsp; )&nbsp;}现在应该可以先看到红色，然后再看到蓝色了