React.forwardRef的应用场景及源码解析

export default function forwardRef<Props, ElementType: React$ElementType>(
  render: (props: Props, ref: React$Ref<ElementType>) => React$Node,
) {
  //删除了 dev 代码

  return {
    //被forwardRef包裹后，组件内部的$$typeof是REACT_FORWARD_REF_TYPE
    $$typeof: REACT_FORWARD_REF_TYPE,
    //render即包装的FunctionComponent，ClassComponent是不用forwardRef的
    render,
  };
}

const Child = React.forwardRef((props, ref) => (
  <button ref={ref}>
    {props.children}
  </button>
));

console.log(Child,'Child29')

const ReactElement = function(type, key, ref, self, source, owner, props) {
  const element = {
    // This tag allows us to uniquely identify this as a React Element
    //标识element的类型
    //因为jsx都是通过createElement创建的，所以ReactElement的类型固定:为REACT_ELEMENT_TYPE
    //重要！因为react最终渲染到DOM上时，需要判断$$typeof===REACT_ELEMENT_TYPE
    $$typeof: REACT_ELEMENT_TYPE,

    // Built-in properties that belong on the element
    //设置元素的内置属性
    type: type,
 
  };
}

{
    $$typeof: REACT_FORWARD_REF_TYPE,
    render,
  };

  const element = {
    $$typeof: REACT_ELEMENT_TYPE,
    type: type,
  };

  const element = {
    $$typeof: REACT_ELEMENT_TYPE,
    //注意！！！
    type: {
      $$typeof: REACT_FORWARD_REF_TYPE,
      render,
    },
  };

//更新被React.forwardRef包裹的 FunctionComponent
function updateForwardRef(
  current: Fiber | null,
  workInProgress: Fiber,
  Component: any,
  nextProps: any,
  renderExpirationTime: ExpirationTime,
) {
  // TODO: current can be non-null here even if the component
  // hasn't yet mounted. This happens after the first render suspends.
  // We'll need to figure out if this is fine or can cause issues.

  //删除了 dev 代码

  //Component:{
  //   $$typeof: REACT_FORWARD_REF_TYPE,
  //   render,
  // }

  //FunctionComponent
  const render = Component.render;
  // 开发层面上不允许FunctionComponent，但你打印 props 的话是有的，
  // 因为是 React 只允许内部通过 props 传进来 ref
  const ref = workInProgress.ref;

  // The rest is a fork of updateFunctionComponent
  let nextChildren;
  //context 相关的可跳过
  prepareToReadContext(workInProgress, renderExpirationTime);
  prepareToReadEventComponents(workInProgress);
  if (__DEV__) {
    //删除了 dev 代码
  } else {
    //渲染的过程中，对里面用到的 hook函数做一些操作
    //关于renderWithHooks的讲解，请看：https://www.jianshu.com/p/959498695e83

    //注意：在updateFunctionComponent()中传的参数不是 ref，
    //而是 context：nextChildren = renderWithHooks(
    //   current,
    //   workInProgress,
    //   Component,
    //   nextProps,
    //   传的是 context 而不是 ref
    //   context,
    //   renderExpirationTime,
    // );
    nextChildren = renderWithHooks(
      current,
      workInProgress,
      render,
      nextProps,
      ref,
      renderExpirationTime,
    );
    //renderWithHooks 内部通过let children = Component(props, refOrContext)来更新 ref 或 context
  }

  //如果 props 相同，并且 ref 也相同的话，就不需要更新
  if (current !== null && !didReceiveUpdate) {
    //跳过hooks更新
    //关于bailoutHooks的讲解，请看：https://www.jianshu.com/p/959498695e83
    bailoutHooks(current, workInProgress, renderExpirationTime);
    //跳过该节点及所有子节点的更新
    //关于bailoutOnAlreadyFinishedWork的讲解，请看：https://www.jianshu.com/p/06b18db8b5d4
    return bailoutOnAlreadyFinishedWork(
      current,
      workInProgress,
      renderExpirationTime,
    );
  }

  // React DevTools reads this flag.
  workInProgress.effectTag |= PerformedWork;
  //将 ReactElement 变成 fiber对象，并更新，生成对应 DOM 的实例，并挂载到真正的 DOM 节点上
  //关于reconcileChildren的讲解，请看：https://www.jianshu.com/p/959498695e83
  reconcileChildren(
    current,
    workInProgress,
    nextChildren,
    renderExpirationTime,
  );
  return workInProgress.child;
}

let children = Component(props, refOrContext);

React.forwardRef((props, ref) => (
  xxx
));