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

1.refs三种使用用法

ref 获取组件或是dom节点实例 一般对于函数 不能获取函数的实例 如果需要获取函数的ref 则React.forwardRef方法

  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的值 必须forwardRef把ref传递进去

      2.获取函数组件的实例 

   //使用步骤
   1.this.myCompCreateRef = React.createRef();
   2.<Child ref={this.myCompCreateRef} /> 
   3.this.myCompCreateRef.current
   4.const Child = React.forwardRef((props, ref) => ( //箭头函数没有实例 如果想获取值 则需要forwardRef进行包装 <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) { //render一般指函数function组件
      {
        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
      };
     
    }

举例：

import React from 'react';
//平时组件传递 只能传递props 调用forwardRef 可以传递第二个参数ref
const Child1 = React.forwardRef((props, ref) => {
  return <div ref={ref}> CHild2</div >
})

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.myCreateRef = React.createRef();
  }
  componentDidMount() {
    setTimeout(() => {
      console.log(this.myCreateRef.current, 'onbject')
    }, 1000)
  }

  render() {
    return (
      <div>
        <Child1 ref={this.myCreateRef} />  {/*通过React.forwaedRef依然是一个ReactElement*/}
      </div>
    )
  }
}
export default Child

返回dom元素：

<div>CHild2</div >

原因：
通过调用forwardRef返回的对象{ $$typeof: REACT_FORWARD_REF_TYPE,render: render} 对应到代码中Child1属性为一个对象 

当调用React的creactElement(type,config[...children])函数时候 会把这个Child1属性对象作为参数type传递进去 保存在type属性中$$typeof仍然是REACT_ELEMENT_TYPE