注意：只有类组件才有生命周期钩子函数  
    
    
    
，函数组件没有生命周期钩子函数    
    
    
    
。

生命周期

装载阶段：constructor()　　render()　　componentDidMount() 更新阶段：render()　　componentDidupDate() 卸载阶段：componentWillUnmount()

(面试题)shouldComponentUpdate()

返回true时

     


     


     


     ，正常进入更新阶段 




 




 




 



，返回false时  

   

   

   

，不进入更新阶段   


     


     


     


。 this.$forceUpdate()这个方法调用

     

     

     

    ，会绕过shouldComponentUpdate(),一定会 进入更新阶段



 




 




 




 。 shouldComponentUpdate()一般用于性能调优  




  




  




  


，阻塞掉哪些不参与视图渲染的变量更新导致的(Fiber)生成   

   

   

   
。 shouldComponentUpdate()只有在类组件Component中才有用  


  


  


  


，在PureComponent中没用    

     

     

     

。

React组件的渲染(更新)流程

由两个阶段构成
     
     
     
   ，一个是render阶段
   




   




   




   

，一个是commit阶段




  




  




  




 。

render阶段： 目标是生成Fiber树 



 



 



 



，这个过程是异步的                  ，可以中断的

    




    




    




    
，并且不执行任何副作用  


  


  


  
。

commit阶段：目标是把协调运算的结果



















，一次性提交渲染(更新)成真实DOM                  ，这个过程在React(v17)是不可中断的

     



     



     



     ，在React(v18)中可以人为的中断（由startTransitansition进行中断）

React响应式原理(Fiber架构)

什么是Fiber单元

每一个JSX元素节点都是一个Fiber单元（React.creatElement()的返回值）

为什么React要构建复杂的Fiber树

为了让协调运算



















，commit阶段可以循环执行  
    
    
    
，而不是递归

怎么执行协调运算

没个Fiber单元上都有一个alternater指针

     


     


     


     ，指向旧Fiber中的自己     
     
     
     
。如果新的Fiber树存在 




 




 




 



，但旧的Fiber树不存在  

   

   

   

，说明新增节点；如果新的Fiber树不存在

     

     

     

    ，但旧的Fiber树存在  




  




  




  


，说明这个节点是要删除的节点；如果新旧Fiber树都存在这个节点  


  


  


  


，进一步遍历新旧节点的属性
     
     
     
   ，对比新旧节点的变化




   




   




   




 。

这些独立的Fiber单元是怎么串联成Fiber树

给每个Fiber单元添加(child
   




   




   




   

，sibling 



 



 



 



，parent)指针