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

1.refs三种使用用法

1.字符串

1.1 dom节点上使用获取真实的dom节点

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

1.2 类组件上使用获取引用类组件的实例

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

2.回调函数

2.1 dom节点上挂载回调函数函数的入参为dom节点

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

2.2 类组件上挂载回调函数函数的参数为类组件实例

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

3.CreateRef方法

3.1 React.createRef()创建一个ref 赋值给一个变量使用ref.current属性获取dom节点

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

3.2 React.createRef()创建一个ref 赋值给一个变量使用ref.current属性获取类组件实例

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

2.React.forwardRef()使用用法

1.为啥会出现forwardRef()?

对于函数类型 function(props){return(<div>1111</div>)} 无法获取ref的值如果要获取ref的值必须要把ref传递进去

2.获取函数组件的实例

   //使用步骤
   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

3.React.createRef()源码解析

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

4.React.forwardRef()源码解析

  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
      };
    }

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

猜你喜欢