1、React处理组件的流程

1.1 处理类组件

react-reconciler/src/ReactFiberClassComponent.js：

  1. function constructClassInstance(
  2.     workInProgress, // 当前正在工作的 fiber 对象
  3.     ctor,           // 我们的类组件
  4.     props           // props 
  5. ){
  6.      /* 实例化组件，得到组件实例 instance */
  7.      const instance = new ctor(props, context)
  8. }

1.2 处理函数组件

react-reconciler/src/ReactFiberHooks.js

  1. function renderWithHooks(
  2.   current,          // 当前函数组件对应的 `fiber`， 初始化
  3.   workInProgress,   // 当前正在工作的 fiber 对象
  4.   Component,        // 我们函数组件
  5.   props,            // 函数组件第一个参数 props
  6.   secondArg,        // 函数组件其他参数
  7.   nextRenderExpirationTime, //下次渲染过期时间
  8. ){
  9.      /* 执行我们的函数组件，得到 return 返回的 React.element对象 */
  10.      let children = Component(props, secondArg);
  11. }

2、React 底层类组件的定义

react/src/ReactBaseClasses.js

  1. function Component(props, context, updater) {
  2.   this.props = props;      //绑定props
  3.   this.context = context;  //绑定context
  4.   this.refs = emptyObject; //绑定ref
  5.   this.updater = updater || ReactNoopUpdateQueue; //上面所属的updater 对象
  6. }
  8. /* 绑定setState 方法 */
  9. Component.prototype.setState = function(partialState, callback) {
  10.   this.updater.enqueueSetState(this, partialState, callback, 'setState');
  11. }
  13. /* 绑定forceupdate 方法 */
  14. Component.prototype.forceUpdate = function(callback) {
  15.   this.updater.enqueueForceUpdate(this, callback, 'forceUpdate');
  16. }

Component 底层 React 的处理逻辑是，类组件执行构造函数过程中会在实例上绑定 props 和 context ，初始化置空 refs 属性，原型链上绑定setState、forceUpdate 方法。对于 updater，React 在实例化类组件之后会单独绑定 update 对象。

3、问与答

问：如果没有在 constructor 的 super 函数中传递 props，那么接下来 constructor 执行上下文中就获取不到 props ，这是为什么呢？

答：绑定 props 是在父类 Component 构造函数中，执行 super 等于执行 Component 函数，此时 props 没有作为第一个参数传给 super() ，在 Component 中就会找不到 props 参数，从而变成 undefined