# createRef

是的就是返回一个{ current: null }的对象,最终current被赋值要等到后面渲染组件的时候,后面会有专门的章节来讲具体逻辑

export function createRef(): RefObject {
  const refObject = {
    current: null,
  };
  if (__DEV__) {
    Object.seal(refObject);
  }
  return refObject;
}

# forwardRef

forwardRef主要配合HOC使用,他接收FunctionalComponent作为参数,因为FunctionalComponent没有实例,所以在他上面使用ref没有什么意义,二ref本身不是props,无法在FunctionalComponent中获取到再赋值给他的子节点。

forwardRefFunctionalComponent可以接收第二个参数function FunComp(props, ref) {},第二个参数就是他的父辈组件作用在他上面的ref,他可以获取到并且当作变量传递给他的子孙节点。

forwardRef的代码也是异常简单,

可以看到他返回的是一个对象,里面有一个比较特殊的变量$$typeof,他的值是一个常量,用来表明这个个节点的类型是forwardRef,而我们传入的FunctionalComponent则是返回对象的另外一个属性,在后期讲组件更新的时候,我们会再详细讲对于forwardRef更新


export default function forwardRef<Props, ElementType: React$ElementType>(
  render: (props: Props, ref: React$Ref<ElementType>) => React$Node,
) {
  
  // some dev code

  return {
    $$typeof: REACT_FORWARD_REF_TYPE,
    render,
  };
}