1. BeginWork and completeWork

1. The beginWork and completeWork are in the same layer. When the depth-first traversal of the element reaches the bottom of a subtree, the completeWork will be executed, and then the beginWork of its sibling node will be executed. In a word: The depth-first traversal execution beginwork is executed completeWork when the child leaves, The parent’s completeWork(beginWork and completeWork are executed on all nodes) will be executed when there are no siblings. Finally, the completeWork of rootFiber will be executed and the commit phase will be entered

React optimizes nodes with only one text. Instead of creating two fibers, use only one fiber

<p> i am text</p>
Copy the code

The fiber beginWork for p will not create the fiber for text. Put the text inside the children of pendingProps

2. Beginwork process during the first screen rendering

Example code:

 <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
ReactDom.render(App,document.getelementbyid('root'))
Copy the code

All the nodes entering the beginWork are fiber nodes, and the beginWork of RootFiber will be entered first. At this time, both current and workingProgress are available. Current is a fiber node (only the fiber has current when the first screen is rendered). WorkingProgress represents a copy of the fiber, and depth-first traversal is performed. So I’m going to do App,header, beginwork of IMG,img is the leaf, and I’m going to do the completeWork of img, and THEN I’m going to go to my brother p, I’m going to do the beginWork of P, and then I’m going to do the beginWork of textFiber, which is also a leaf, and I’m going to do the completeWork, and then I’m going to do the beginWork of code, Because it’s fiber with only one text So then execute code’s completeWork(don’t create SRC /app.js fiber), then execute textFiber’s beginWork and completeWork of save, then execute P’s completeWork, and then execute A’s beginW Ork and completeWork, then execute the header’s completeWork, then the App’s completeWork, then the RootFiber’s completeWork. In short, the parent’s completeWork is executed when no siblings or children need to return to the parent again

3. BeginWork explanation

1. The most important function is to create the first fiber node according to the child type (array /string/ single object), such as headerFiber, will only create img fiber, because the P label of the fiber is created by the IMG beginWork. Finally, we create a fiber tree for workingprogress.

2. When did we add the delete/placement tag to mount when sideEffects was passed false? Look at the answer

4. The first screen rendering completeWork

The main things you do with element tags are:

Fiber is a native label:

1. Create this DOM and put it in fiber’s stateNode

2. Then append the dom corresponding to its sub-fiber

3. Finally, add the props properties to the DOM

So when you get to the root DOM, you’ve got a DOM tree, but it’s not mounted to the page,

const instance = createInstance(
            type,
            newProps,
            rootContainerInstance,
            currentHostContext,
            workInProgress,
          );/ / create the dom

          appendAllChildren(instance, workInProgress, false.false);/ /! Insert the child dom

          workInProgress.stateNode = instance;

          // Certain renderers require commit-time effects for initial mount.
          // (eg DOM renderer supports auto-focus for certain elements).
          // Make sure such renderers get scheduled for later work.
          if (
            finalizeInitialChildren())/ /! Increase the attributes
Copy the code

I thought we said last time that the false DOM element passed by sideEffect on the first rendering wouldn’t have the placement tag, because there’s only one element (rootFiber) and it’s the only one with a current, And the beginwork is going to be sideEffect true, so sideEffect true when you create the child fiber it’s going to put a placement tag on the child node so your APP has a placement tag, So we’ve created the DOM tree later in the completeWork phase, and we’re ok.