# 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
中获取到再赋值给他的子节点。
forwardRef
让FunctionalComponent
可以接收第二个参数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,
};
}