React源码解析之React.createRef()/forwardRef()

摘要：一作用获取目标的实例使用源码可修改的不可变的对象没见过这种写法初始化对象，属性初始值为解析源码比较简单，就是返回了带有属性的二作用从父组件中获取子组件是的实例使用是没有实例的，因为它是，所以没有，所以不能通过来拿到实例将的传给子组件，并绑定

一、React.createRef()
GitHub：
https://github.com/AttackXiaoJinJin/reactExplain/blob/master/react16.8.6/packages/react/src/ReactCreateRef.js

作用：
获取目标element的DOM实例

使用：

import React from "react"

export default class Father extends  React.Completed{
  constructor(props){
    super(props)
    this.father=React.createRef()
  }

  componentDidMount(){
    this.father.current.value="hahhaha"
  }

  render(){
    return 

      this is div
    
  }
  
}

源码：

import type {RefObject} from "shared/ReactTypes";

// an immutable object with a single mutable value
//可修改value的 不可变的对象
//没见过这种写法 :RefObject
export function createRef(): RefObject {
  //初始化ref对象，属性current初始值为null
  const refObject = {
    current: null,
  };
  if (__DEV__) {
    Object.seal(refObject);
  }
  return refObject;
}

解析：
源码比较简单，就是返回了带有current属性的refObject

二、React.forwardRef()
GitHub：
https://github.com/AttackXiaoJinJin/reactExplain/blob/master/react16.8.6/packages/react/src/forwardRef.js

作用：
从父组件中获取子组件是FunctionComponent的DOM实例

使用：

import React from "react"
//funciton component是没有dom实例的，因为它是PureComponent，所以没有this，
// 所以不能通过createRef()来拿到实例

//将Father的father传给子组件，并绑定子组件的DOM实例，从而能在父组件拿到子组件的DOM实例
const Child=React.forwardRef((props,ref)=>{
  return 
child div
})

export default class Father extends  React.Completed{
  constructor(props){
    super(props)
    this.father=React.createRef()
  }

  componentDidMount(){
    this.father.current.value="hahhaha"
  }

  render(){
    return 
  }

}

源码：

import {REACT_FORWARD_REF_TYPE, REACT_MEMO_TYPE} from "shared/ReactSymbols";

import warningWithoutStack from "shared/warningWithoutStack";

export default function forwardRef(
  render: (props: Props, ref: React$Ref) => React$Node,
) {
  //__DEV__可不看
  if (__DEV__) {
    if (render != null && render.$$typeof === REACT_MEMO_TYPE) {
      warningWithoutStack(
        false,
        "forwardRef requires a render function but received a `memo` " +
          "component. Instead of forwardRef(memo(...)), use " +
          "memo(forwardRef(...)).",
      );
    } else if (typeof render !== "function") {
      warningWithoutStack(
        false,
        "forwardRef requires a render function but was given %s.",
        render === null ? "null" : typeof render,
      );
    } else {
      warningWithoutStack(
        // Do not warn for 0 arguments because it could be due to usage of the "arguments" object
        render.length === 0 || render.length === 2,
        "forwardRef render functions accept exactly two parameters: props and ref. %s",
        render.length === 1
          ? "Did you forget to use the ref parameter?"
          : "Any additional parameter will be undefined.",
      );
    }

    if (render != null) {
      warningWithoutStack(
        render.defaultProps == null && render.propTypes == null,
        "forwardRef render functions do not support propTypes or defaultProps. " +
          "Did you accidentally pass a React component?",
      );
    }
  }

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

解析：
（1）不看__DEV__的话，返回的也是一个Object，也就是说，Child被forwardRef包裹后，React.forwardRef(Child)的$$typeof是REACT_FORWARD_REF_TYPE

注意：
一旦在Father组件中，用JSX引用了Child组件，那么就是React.createElement(React.forwardRef(Child))，又包裹了一层，此时的$$typeof`是`REACT_ELEMENT_TYPE`，`type`是`React.forwardRef(Child)`，`type`里面的`$$typeof是REACT_FORWARD_REF_TYPE

const ReactElement = function(type,...) {
  const element = {
    $$typeof: REACT_ELEMENT_TYPE,
    type: type,
  };
}

（2）关于forward在高阶组件的用法，请参考：https://reactjs.org/docs/react-api.html#reactforwardref

（3）如何在antdPro/FunctionComponent中使用：
子：

const Child = (props,ref) => {
  const inputRef = React.useRef();
  React.useImperativeHandle(ref, () => ({
    focus: () => {
      // inputRef.current.focus();
      inputRef.current.value="aaaa"
    }
  }));

  return ()
}

export default React.forwardRef(Child)

父：

import Child from "./Child";
const Father=(props)=> {
   const rref= React.useRef(null)
   useEffect(() => {
    //console.log(rref.current,"rref33")
    rref.current.focus()
  }, []);
return ()
}

注意：
① antdPro中使用的话，我试了是不好用dva的connect包裹的，issue上作者也没回答，就关闭了：https://github.com/ant-design/ant-design-pro/issues/3123

② useImperativeMethods已经重命名为useImperativeHandle，传送门：https://github.com/facebook/react/pull/14565

（完）