1. Intersection method

beginWork()

Determine whether component updates can be optimized

Distribution handles different update logic based on node type

Check whether a node can be skipped according to information such as expirationTime

2. Tag judgment of different methods

1. Function components

Pass in the JSX to the Children’s props and turn it into the React.createElement to call the reconcileChildren

reconcileChildren

1. Generate fiber subtree according to props. Children

2. Check whether the Fiber object is reusable

3. The list is optimized by key

3. General component update process

4. Class component updates

1. When mountIntance is used, willMount is executed

2. When the component is first mounted, the sub-component is mounted first. We will only create instance and not create current(fiber of the component will have current only after the render function is executed). We determine if the parent component has current to perform whether the child component is mounted or updated, in such a sequence that the parent has instance first and the parent has instance and fiber have current mounted.

If there is a setstate, it will trigger an update. Create an update payload. Add the new state to the fiber Queue of this class Basestate :{number:0} and firstUpdate->secondUpdate in updateQueue

Then go to SchduleWork and find the one with the highest root priority to perform the update go to RequestWork and find that it is still rendering(because in Didmont it was still render)

Schdulework will be executed at commit lifeCycle once the mount phase is complete, then performSyncwork will be executed and then updateClasssComponent will be executed as an update

4.5. Lifecycle update process

5. The lifecycle does not execute Performwork at first because it starts in the Render phase by collecting state rather than immediately executing performwork events at the start of the Batch phase

They’re all added to the queue first

It’s all done later by performing PerformWork to update all queues in the class component to perform update uE

6. Asynchronous functions modify state only by logging the callback function in the first place. The batch state is not batch state. The batch state is batch state in the requestWork At this point, performSyncwork updates the view directly

So all asynchronous functions have one setState going once performwork has one update ue and one baseState instead of two setStates in a queue sharing one baseState.

handleClick=(e) = >{
    // Base Estate is the same. They are the same update ue
    this.setState({number:this.state.number+1})
     this.setState({number:this.state.number+1})
     // The following setTimeout does not go batch, so it is performWork, updateQueue, baseState
     setTimeout(() = >{
       this.setState({
         number:this.state.number+1
       })
       console.log('state'.this.state.number);
       this.setState({
         number:this.state.number+1
       })
       console.log('state'.this.state.number);
     },1000)}Copy the code

5.nextUnitofWork

Start from root and work your way down to the beginwork node to determine if the node needs to be updated or not. Only the nodes that need to be updated are updated

If you want to update the components and the expirationTime of the current task, compare the expirationTime of your element

        if(oldProps === newProps && ! hasContextChanged() && ((updateExpirationTime === NoWork ||/ /! With the new
        updateExpirationTime > renderExpirationTime))/ /! Or the current render has a priority and does not perform this node update
Copy the code

You don’t have to update this one because your updateExpirationTime is 0 so you don’t have to update it or you have a low priority and you don’t have to update your element at this point

Or your props didn’t change

As soon as one satisfies that node it needs to be updated for example

class app{
 render(){
 return <div>{{this.state.number}}</div>
 }
}


Copy the code

If the number changes, the props will change and the div needs to update the props

And the app is because updateExpirationTime===renderExpirationTime because you just happen to change the state of this app so your renderExpirationTime is also an app, And then when you find that the app element is equal you need to update that app and the logic is to update that component’s update ue

6. Dom mounting for the first time

updateContainerAtExpirationTime->schedulework->schedulework->requestwork->performsyncwork->performwork->renderRoot->work Loop -> performUnitWork – The unitwork is the root element, and the payload of its update ue update is its child node

-> Beginwork (if updateExpirationTime > renderExpirationTime is displayed) -> Beginwork (if updateExpirationTime is displayed

->updateHostRoot(this method takes out the updateQueue and executes the processQueue) and the state after the reconcilechildren becomes the child element Nextchidren = NextState. element, and then the reconcilechildren Build the new Children fiber tree

So this is building fiber is parent first but mounting elements are child first and then we’ll talk about the commit phase and how do we turn this fiber tree into a real DOM tree