React16源码: createRef与forwardRef源码实现

ref 概述

• 拿一个场景举例开始
  • 比如，在react当中写一个组件，类型是 class Component
  • 在 render function 里面渲染一系列的子组件或者 dom节点
  • 会有这样的需求，就是获取某个dom节点或某个子组件的实例来做一些手动的操作
  • 不局限于 props 更新这种方式来更新这个节点，获取节点后，可以绑定某些事件做一些操作
  • 如果没有其他好方法，可能要自己去写 document.querySelector之类的选择器来获取这个 dom 节点
• 在 react 当中就为我们提供了这种方式
  • 通过 ref 这个特殊的 attribute 可以非常方便的在一个组件内部
  • 获取到它的一个子节点的实例对象, 这就是 ref 的一个核心功能
• 在 react 当中有三种使用ref的方式
  • string ref
  • function
  • createRef

ref 应用示例

1 ) 演示代码

import React from 'react'

export default class RefDemo extends React.Component {
  constructor() {
    super()
    this.objRef = React.createRef()
  }

  componentDidMount() {
    setTimeout(() => {
      this.refs.stringRef.textContent = 'string ref'
      this.methodRef.textContent = 'method ref'
      this.objRef.current.textContent = 'obj ref'
    }, 1000)
  }

  render() {
    return (
      <>
        <p ref="stringRef">xxxx</p>
        <p ref={ele => (this.methodRef = ele)}>yyyy</p>
        <p ref={this.objRef}>zzzz</p>
      </>
    )
  }
}

2 ）代码说明

• 第一种使用了 stringRef
  • 也就是我们在想要获取的那个节点的 props上面
  • 使用了一个 ref 属性, 然后传入一个字符串, react在完成这一个节点的渲染之后
  • 它会在 this.refs 这个对象上面挂载这个string对应的一个key
  • 这个key所指向的就是我们这个节点实例的对象
  • 如果是dom节点, 它就会对应dom的实例
  • 如果是子组件，就是子组件的实例，即：class Component
  • 如果是一个 function Component，正常来讲它是会失败的
  • 拿到的会是一个 undefined，因为 function Component 没有实例
  • 如果不让其出错，需要使用 forwardRef，后续来说
    * 此种方式不被推荐
• 第二种使用了 function
  • 在 ref 属性上传入一个 method 方法，它接受一个参数
  • 这个参数就是一个节点对应的实例
    • 如果是dom节点对应的是dom实例
    • 如果是组件对应的是组件的实例
  • 然后在this上面去挂载某一个属性，比如上面的 methodRef, 基于其 textContent 属性来重新赋值
• 第三种是通过 React.createRef 这个API
  • 在 class Component 内部，我们使用 this.objRef = React.createRef() 去创建了一个对象
    • 这个对象相当于 { current: null} , 默认值是 null
  • 把这个对象传给某一个节点的 ref 属性上，在组件渲染完成之后
  • 会把这个节点对应的实例挂载到这个对象的 current 这个属性上面
  • 调用它就是通过 this.objRef.current 操作它就可以了
• 这个 demo 效果是不用跑也知道是怎样的一个变化
• 以上三种情况的前两种没有在源码中有过多的体现，我们看下第三种情况 createRef

3 ）源码探究

• 从入口文件 React.js 中可见

  import {createRef} from './ReactCreateRef';
  

• 定位到 ReactCreateRef.js 中

  /**
   * Copyright (c) Facebook, Inc. and its affiliates.
   *
   * This source code is licensed under the MIT license found in the
   * LICENSE file in the root directory of this source tree.
   * @flow
   */
  
  import type {RefObject} from 'shared/ReactTypes';
  
  // an immutable object with a single mutable value
  export function createRef(): RefObject {
    const refObject = {
      current: null,
    };
    if (__DEV__) {
      Object.seal(refObject);
    }
    return refObject;
  }
  

• 这个代码看上去，非常简单，它返回的就是一个简单的对象

• DEV 相关的判断不是核心，忽略即可

• 它里面的属性 current, 默认值是 null

forward ref

1 ）示例演示

• 关于 forward ref, 先看一个示例

  import React from 'react'
  
  const TargetComponent = React.forwardRef((props, ref) => (
    <input type="text" ref={ref} />
  ))
  
  export default class Comp extends React.Component {
    constructor() {
      super()
      this.ref = React.createRef()
    }
  
    componentDidMount() {
      this.ref.current.value = 'ref input'
    }
  
    render() {
      return <TargetComponent ref={this.ref} />
    }
  }
  

  • 在这个文件下，定义了两个组件 Comp, TargetComponent
  • Comp 组件
    • 里面创建了一个ref, 并传递给 TargetComponent 组件
    • ref 是为了去获取某一个节点的实例的，通常会获取dom节点的实例
    • 有时，也会获取一下class Component 的实例
    • 如果组件是一个 纯的 function Component, 没有实例，则会出错
      • 如果我是一个组件的提供者，就是开源了一些组件
      • 用户(开发者) 一开始并不知道是否是有实例的组件
      • 还有就是，比如一些包, 如 Redux，提供的 connect 方法里的 HOC (高阶组件)
      • 作为用户想要获取自己写的组件的实例的时候，传入ref，获得的是被包装过的组件
    • 解决之道是外面套上 React.forwardRef，如上代码所示
      • forwardRef 可以帮助我们实现一个 ref 的传递
  • TargetComponent 组件
    • 就是我们基于 React.forwardRef 实现的 function Component
    • 如果要把它改造成HOC, 也可以基于此函数的回调将 ref 进行传递挂载
    • 这样就不会违背开发者的意图

2 ）源码分析

定位到 forwardRef.js 中

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

import {REACT_FORWARD_REF_TYPE} from 'shared/ReactSymbols';

import warningWithoutStack from 'shared/warningWithoutStack';

export default function forwardRef<Props, ElementType: React$ElementType>(
  render: (props: Props, ref: React$Ref<ElementType>) => React$Node,
) {
  if (__DEV__) {
    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 {
    $$typeof: REACT_FORWARD_REF_TYPE,
    render,
  };
}

• 忽略 DEV 判断代码，其本质上就只有一个 return 对象

  return {
    $$typeof: REACT_FORWARD_REF_TYPE,
    render,
  };
  

  • $$typeoff，是 REACT_FORWARD_REF_TYPE
    • 注意
      • 使用 forwordRef 时, 用这个API最终创建出来的 ReactElement
      • 比如上面示例的 TargetComponent组件最终会被创建成一个 ReactElement，比如，别名叫 A
      • TargetComponent组件 就是 forwordRef 返回的对象，这个不难理解，因为代码如此
      • TargetComponent 对应的 组件A 的 type 是 TargetComponent
      • TargetComponent 对应的 组件A的 $$typeof 是 REACT_ELEMENT_TYPE
        • A的 $$typeof 不是 REACT_FORWARD_REF_TYPE
        • 因为，所有通过React.createElement创建的节点的 $$typeof 都是 REACT_ELEMENT_TYPE
        • TargetComponent组件最终会被React.createElement创建出来
        • 这一点不要搞混了
  • render
    • 就是我们传进来的 function component