React source code Part4 – render rendering (update stage)

Time:2021-12-9

React source code Part-1 – algebraic effect: https://segmentfault.com/a/11…
React source code part2 – rendering principle: https://segmentfault.com/a/11…
React source code part3 – fiber architecture: https://segmentfault.com/a/11…
React source code Part4 – render rendering (Mount stage): https://segmentfault.com/a/11…
React source code Part5 – commit phase (handling class component life cycle): https://segmentfault.com/a/11…
React source code part6 – commit phase (beforemutation): https://segmentfault.com/a/11…
React source code Part7 – commit (mutation stage): https://segmentfault.com/a/11…
React source code Part8 – commit (layout stage): https://segmentfault.com/a/11…
Reference link: uncover the secrets of react Technology—— https://react.iamkasong.com/p…

Render render (update phase)

  • Like the mount stage, there are two stages: delivery and return

“Delivery phase”

  1. Different from the mount phase, in the beginwork method, the if (current !== null)This conditional branch will compare the fibre nodes built this time with the last one

     if (
       oldProps !== newProps ||
       hasLegacyContextChanged() ||
       (__DEV__ ? workInProgress.type !== current.type : false)
     ) 
  2. Will givedidReceiveUpdateField assignment, used to determine whether there is a change
  3. If there is no change in the fiber node, enterbailoutOnAlreadyFinishedWorkmethod
  4. If the conditions are not met, enter the switch statement and perform different operations according to different case conditions
  • “Step by step diagram”
    React source code Part4 - render rendering (update stage)

“Return to phase”

“Diff optimization in return phase”
  • In the update phase, the diff calculation will be optimized to extract the changed fibre nodes and update only those changed fibre nodes
  • The changed fibre nodes will form a linked list, and only the fibre nodes in these linked lists will be rebuilt
  • After the “return phase”, these linked lists that need to be updated will be mounted to the root node; When updating later, you can start from the root node
  • Conclusion:Previously, it was a deep traversal update, and the unchanged nodes will also participate in the traversal. Now, the unchanged fibre nodes can be reused directly and only the changed fibre can be rebuilt. This is also the application point of the dual cache mechanism. Both the degree and speed of traversal are improved,
“Phased process”
  1. The return phase occurs atcompleteWorkMethod, in which different case contents will be executed in the swich statement according to different tags.
  2. Preareupdate method: in the update phase, you will get an update queue, which is the fibre that needs to be updated this time, that is, the built workinprogers.
  3. Markupdate method: when updating the index in the queue, the corresponding fibre node will be marked with an update flag.
  4. Then execute the content after the completework method until the commit phase
  5. Return phase diagram
    React source code Part4 - render rendering (update stage)