你的当前位置: react生命周期

F

react生命周期

  • 发布时间: 2019-06-28 17:27:28

react 15.0的生命周期

1561946645663552.png

页面第一次加载

    componentWillMount             挂载前

    render                                      渲染Dom

    componentDidMount             挂载后


页面更新

      子组件更新

         componentWillReceiveProps             子组件有父组件传过来的值,就会触发这个生命周期

         shouldcomponentUpdata                  是否更新页面,返回boolean,return false,就不会执行后面的生命周期

        componentWillUpdata                       更新前

         render                                                 渲染Dom

         componentDidUpdata                       更新后          

        

 父组件更新

        shouldcomponentUpdata                  是否更新页面,返回boolean,return false,就不会执行后面的生命周期

        componentWillUpdata                       更新前

        render                                                 渲染Dom

        componentDidUpdata                       更新后          


页面销毁

        componentWillUnmont                             页面销毁

    



react 16.4后的生命周期

1561948425884579.png

react 16.4和react 15.0 相比删除了几个生命周期,添加了两个生命周期

        1. render之前除了shouldComponentUpdata的,其他的生命周期都被删除了,都被getDerivedStateFromProps替代

        2. getSnapshotBeforeUpdate 被调用于render之后,可以读取但无法使用DOM的时候。它使您的组件可以在可能更改之前从DOM捕获一些信息(例如滚动位置)。此生命周期返回的任何值都将作为参数传递给componentDidUpdate()。







react为什么会修改生命周期

           React Fiber这个大改变Facebook已经折腾两年多了,终于确认,React Fiber会搭上React下一个大版本v16的顺风车发布。

            

            浏览器中的渲染引擎是单线程的,几乎所有的操作都在这个单线程中执行——解析渲染DOM Tree和CSS Tree,解析执行JavaScript——除了网络操作。这个线程就是浏览器的主线程。单线程意味着,一段时间只做一件事,所以浏览器在同一时间内,其主线程只能关注于一个任务。



            比如:react要渲染一万条数据,需要6秒,渲染期间,用户在input框输入,这时候react已经占据了浏览器渲染,只能等他6秒后渲染完后,才会渲染用户输入的值,这对于用户体验非常不好。

            v2-d8f4598c70df94d69825f11dfbf2ca2c_hd (1).png

             React Fiber  就是把一万条数据分成拆分成一个个小任务每次做完一个小任务之后,放弃一下自己的执行将主线程空闲出来,看看有没有其他的任务。如果有的话,就暂停本次任务,执行其他的任务,如果没有的话,就继续下一个任务。  

            v2-78011f3365ab4e0b6184e1e9201136d0_hd (1).png


            就是因为他会执行多次主线程,就会多次调用挂载前的生命周期,所以会去掉过多的生命周期。




            如果不理解,点这里


留言
0/360
加载更多…

备案/许可证编号: 豫ICP备18034271号