React.createRef()/forwardRef()-React源码解析(三)

    //使用步骤：
    1. <input ref="stringRef" />   
    2. this.refs.stringRef
    //值：<input />

    //使用步骤
    1. <Child ref="compStringRef" />
    2.this.refs.compStringRef
    //值：{props:{},refs:{},state:null,....}

    //使用步骤
    1.<input ref={(ref) => { this.callBackRef = ref }} />
    2.this.callBackRef //值：<input />

    //使用步骤
    1.<Child ref={(com) => { this.comCallbackRef = com }} />
    2.this.comCallbackRef

    //使用步骤
    1.this.myCreateRef = React.createRef();
    2. <input ref={this.myCreateRef} />
    3.this.myCreateRef.current

    //使用步骤
    1.this.myCompCreateRef = React.createRef()
    2.<Child ref={this.myCompCreateRef} />
    3.this.myCompCreateRef.current

   //使用步骤
   1.this.myCompCreateRef = React.createRef();
   2.<Child ref={this.myCompCreateRef} /> 
   3.this.myCompCreateRef.current
   4.const Child = React.forwardRef((props, ref) => (
     <input ref={ref} />
   )); //平时组件传递 只能传递props 调用forwardRef 可以传递第二个参数ref

  //返回一个具有current属性的refObject对象
    function createRef() {
      var refObject = {
        current: null
      };
      {
        Object.seal(refObject);
      }
      return refObject;
    }

  function forwardRef(render) {
      {
        if (render != null && render.$$typeof === REACT_MEMO_TYPE) {
          warningWithoutStack$1(false, ‘forwardRef requires a render function but received a `memo` ‘ + ‘component. Instead of forwardRef(memo(...)), use ‘ + ‘memo(forwardRef(...)).‘);
        } else if (typeof render !== ‘function‘) {
          warningWithoutStack$1(false, ‘forwardRef requires a render function but was given %s.‘, render === null ? ‘null‘ : typeof render);
        } else {
          !( // Do not warn for 0 arguments because it could be due to usage of the ‘arguments‘ object
            render.length === 0 || render.length === 2) ? warningWithoutStack$1(false, ‘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.‘) : void 0;
        }

        if (render != null) {
          !(render.defaultProps == null && render.propTypes == null) ? warningWithoutStack$1(false, ‘forwardRef render functions do not support propTypes or defaultProps. ‘ + ‘Did you accidentally pass a React component?‘) : void 0;
        }
      }
      //返回一个对象，对象里面包含一个$$typeof属性 它依然是ReactElement  使用时候：React.createElement(React.forwardRef(Child))
      //该对象在传入ReactElement方法之后，保存在type属性里 而$$typeof仍然是REACT_ELEMENT_TYPE
      return {
        $$typeof: REACT_FORWARD_REF_TYPE,
        render: render
      };
    }