React source code part3 – fiber architecture

Time:2021-12-31

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 Part4 – render rendering (Mount stage): https://segmentfault.com/a/11…
React source code Part4 – render rendering (update 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…

Why does the fiber architecture appear?

  • In order to solve the problem of synchronization of rendering mechanism in react15 and the problem that the recursive update process cannot be interrupted

What is fiber architecture?

  • Purpose of fiber architecture: implement the algebraic effect mentioned earlier and realize the interruptible asynchronous mechanism, that is, the new rendering mechanism in react16
  • The meaning of fiber

    1. The meaning of Architecture: recursive rendering before the end of the problem to achieve interruptible asynchronous updates
    2. Static data structure: each fiber node stores a component information, which contains many attributes, including data in the component and DOM information, that is, virtual dom
    3. Dynamic unit of work: when updating the fiber tree, it will try to use the data in the previous node, which requires the attributes in the fiber nodealternateProperty that points to the old fiber node
  • The reason why the fiber architecture does not use async and generator is that the use of async and await is infectious and requires that the parent is also of promise type; The generator can also implement interruptible asynchronous updates, but can not modify the priority of execution content, so the react team implemented a schedler scheduler itself.

How react updates fiber

  • ReactFirst callReactDOM.renderCreate two fibers, one called fiberroot and rootfiber.

    1. FiberRoot: it is the node of react application. There is only one node. Fiberroot has a current pointer, and the rootfiber pointed to by the pointer is what we see in the view layer.
    2. rootFiber: is the component node in the mount belt page. There can be multiple, that is, the content we render.
  • When first loaded·Current pointer of fiberrootPoint to rootfiber; When an update occurs, a new rootfiber will be created, and the nodes in the rootfiber will try to reuse the old fiber nodes, which requiresalternateProperties. When the new rootfiber node is built,Current pointer of fiberrootPoint to the rootfiber just built, and the view is updated.
  • Fieber’sBuild, update and replace pointer pointingAll happen in memory, fast ~
    React source code part3 - fiber architecture

What is a dual cache mechanism?

  • What kind of problem to solve: when the amount of calculation is large,Clear previous framereachRendering of the current frame is completeBlank in the middle.
  • Implementation principle of dual cache:The drawing and replacement of the content are placed in the computer memory. After the drawing is completed, the content of the previous frame is replaced, and the content of the previous frame is not cleared during the calculation.
  • Application of double cache principle: the pointer of fiberroot points to the replacement process and the update of rootfiebr, which is the application of the double cache principle
PS: what is algebraic effect https://segmentfault.com/a/11…