react源码解析-debugger阶段-类组件mount阶段的beginWork

Posted 2022-04-06 coderlin_

类组件的beginWork。

Appfiber执行完递阶段之后，轮到DDfiber执行递解端。

对于类组件，在beginWork的时候，会调用updateClassComponent方法。

类组件的fiber如：

alternate: null
child: null
elementType: ƒ DD()
key: null
lanes: 16
mode: 1
pendingProps: 
ref: null
return: FiberNode tag: 0, key: null, stateNode: null, elementType: ƒ, type: ƒ, … //指向父亲
sibling: null
stateNode: null //存放类的实例
tag: 1
type: ƒ DD()
updateQueue: null

fiber.stateNode存放着类的实例。

updateClassComponent

对于updateClassComponent，主要做如下事情：

1. 取出workInprogress.stateNode，判断如果为null，就调用constructClassInstance和mountClassInstance,并且将shouldUpdate置为true。constructClassInstance会new一个实例。
2. 如果stateNode不为null，但是current为null，也就是处于mount阶段却有类实例，就调用resumeMountClassInstance方法
3. 如果stateNode不为null，并且处于update阶段。调用updateClassInstance。
4. 最后就是每个组件都会做的，为儿子创建fiber并且连接起来，然后返回子fiber。调用finishClassComponent。

constructClassInstance(workInProgress, Component, nextProps);

做的事情：

1. 如果类上有静态属性contextType，获取context的value，通过context._currentValue

2. 直接new一个实例，初始化State，并且调用adoptClassInstance赋值类实例的updater对象

3. 返回实例

function constructClassInstance(workInProgress, ctor, props) 
...
// 1
const contextType = ctor.contextType; // context
if (typeof contextType === 'object' && contextType !== null) 
    context = readContext((contextType: any)); // 获取context._currentValue的值

...
// 2
let instance = new ctor(props, context);  //创建实例
//赋值类实例的updater对象，调用setState就是调用updater上的方法，将instance挂载在fiber.stateNode上
adoptClassInstance(workInProgress, instance); 
...
// 3
return instance

mountClassInstance(workInProgress, Component, nextProps, renderLanes);

主要做的事情：

1. 初始化实例赋初值

2. 初始化fiber的udpateQueue

3. 有contextType赋值类实例的context属性

4. 执行applyDerivedStateFromProps，返回值会与老的state进行合并。

5. 没有getDerivedStateFormProps和getSnapShorBeforeUpdate，就会执行componentWillMount

function mountClassInstance(workInProgress, ctor, newProps, renderLanes)
  // 1给实例赋初值
  const instance = workInProgress.stateNode;
  instance.props = newProps;
  instance.state = workInProgress.memoizedState;
  instance.refs = emptyRefsObject;
    
  // 2初始化类fiber的updateQueue，跟hostRoot一样
  initializeUpdateQueue(workInProgress);
    
  const contextType = ctor.contextType;
  if (typeof contextType === 'object' && contextType !== null) 
  // 3如果有contextType，赋值实例的context属性 
  instance.context = readContext(contextType); //从context._currentValue上获取context存储的state
  ....
  
  // 4执行getDerivedStateFormProps，他是在state改变之前触发，他的返回值会作为新的state合并
  const getDerivedStateFromProps = ctor.getDerivedStateFromProps;
  if (typeof getDerivedStateFromProps === 'function') 
    applyDerivedStateFromProps(//调用getDeruveStateFormProps，并且将返回值与老的state合并，fiber.memoizedState;上
      workInProgress,
      ctor,
      getDerivedStateFromProps,
      newProps,
    );
    instance.state = workInProgress.memoizedState; //真正的改变类实例的state
  
 ...
   // 5 判断没有getDerivedStateFormProps或者没有getSnapshotBeforeUpdate的时候
   callComponentWillMount(workInProgress, instance); //执行componentWillMount
   // 消费update
   processUpdateQueue(workInProgress, newProps, instance, renderLanes);
   instance.state = workInProgress.memoizedState;

类实例的getDerivedStateFormProps和componentWillMount是在类组件render阶段的beginWork执行的。

我们目前只看类组件mount阶段的beginWork，update的时候以后再注意，接着就要调用finishClassComponent创建子组件的fiber了。

finishClassComponent(current,workInProgress,Component,shouldUpdate…)

做的事情：

1. 不管mount或者update，还是shouldCOmponentUpdate返回False，都需要更新ref

2. 通过shouldUpdate判断是否需要更新。调用类实例的render方法，获取返回的vdom

3. 调用reconcilerChildren，根据vdom创建子fiber，并且将他与类fiber连接起来，返回子fiber

function finishClassComponent(current,workInProgress,Component,shouldUpdate...)
	// 1 不管mount还是Update, 或者shouldComponentUpdate返回false，也需要更新ref
	markRef(current, workInProgress);
    ...
	// 不需要更新
 	 if (!shouldUpdate && !didCaptureError) 
  	  return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
	  
    // 需要更新
  	const instance = workInProgress.stateNode;
    ...
    // 2 调用render方法，获取返回的vdom
    nextChildren = instance.render();
    ....
    // 3 传入render返回的vdom，根据vdom创建fiber，并且与类fiber连接起来。
    reconcileChildren(current, workInProgress, nextChildren, renderLanes);
    ...
    return workInProgress.child;

至此，类组件的beginWork执行完毕。

总结：

• 类组件mount的beginWork阶段，调用updateClassComponent，主要就是调用生命周期，创建实例，创建子fiber连接，并且返回子fiber。
• updateClassComponent调用constructClassInstance，new一个实例，并且赋值类实例的updater属性。
• updateClassComponent调用mountClassInstance，他会初始化fiber的updateQueue，并且执行getDerviedStateFormProps或者是componentWillMount
• 调用finishClassComponent方法，赋值ref，通过render获取返回的vdom，调用reoncilerChildren根据vdom创建子fiber并且连接，将子fiber返回。