React源码 React ref

ref 的功能，在 react 当中。我们写了一个组件，在这个时候，我们的 render function 里面我们会渲染一系列的子组件或者 dom 节点，有时候我们会希望有这样的需求，就是我们要获取某个 dom 节点，或者是某个子组件的实例。去对他进行一些手动的操作，而不仅仅是 props 更新这种方式去更新这个节点。比如我们要获取一个 dom 节点，自己去绑定某一些事件，然后去做一些操作。通过 ref 这个特殊的 attr 非常方便的在组件内部去获取到子节点的具体的一个实例。这就是 ref 的核心功能。

 

代码

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 got'
      this.methodRef.textContent = 'method ref got'
      this.objRef.current.textContent = 'obj ref got'
    }, 1000)
  }

  render() {
    return (
      <>
        <p ref="stringRef">span1</p>
        <p ref={ele => (this.methodRef = ele)}>span3</p>
        <p ref={this.objRef}>span3</p>
      </>
    )
  }
}

 

 

如上，在 react 当中有3中使用 ref 的方式

1、string ref 

<p ref="stringRef">span1</p>
=>
this.refs.stringRef.textContent = 'string ref got'

也就是我们想要获取的这个节点的 props 上面使用一个 ref 属性，然后传入一个字符串，传入这个字符串之后呢，react 在完成这一个节点的渲染之后，他会在 this.refs 这个对象上面挂载这个 string 对应的一个 key 。那么这个 key 他所指向的就是我们这个节点他的实例的对象。如果是 dom 节点，他就对应 dom 的实例，如果是子组件就会是子组件的实例，就是我们的 class component。如果是 function component 怎么办呢，正常来讲，他是会失败的，也就是拿到的会是个 undefined 。因为 function component 没有实例。这是第一种使用的方式，也是 v16 之前用的最多的方式。也是最不被推荐的一种方式。在下一个大版本之中会被废弃的一种方式

 

2、function 

<p ref={ele => (this.methodRef = ele)}>span2</p>
=>
this.methodRef.textContent = 'method ref got'

这个我们的 ref 传入的是一个方法，这个方法会接收一个参数，这个参数就是这个节点对应的实例，如果是 dom 节点对应的是 dom 的实例，如果是组件对应的是组件的实例。然后我们可以自己去this上面去挂载某一个属性，比如在这里，对应的是 methodRef 。

 

3、createRef (这是 react 提供给我们的 api)

this.objRef = React.createRef()
这个 api 就是 React.createRef()，这个对象其实就是这样的 { current: null } 。然后这个对象传入给某一个节点
<p ref={this.objRef}>span3</p>

在组件渲染完成之后，会把这个节点对应的实例挂载到这个对象的 current 这个属性里面，我们要调用他就是通过

this.objRef.current.textContent = 'obj ref got'

 

运行这个js文件，显示 span1 span2 span3 。一秒钟后被 string ref got ， method ref got， obj ref got 替换。然后我们看 createRef 这个的源码，因为其他的两种方式并没有在源码上有任何的体现，因为他们传入的一个是 string ，一个 function 。并没有直接挂载到 React 上面的一个 api。只有第三种方式 React.createRef 给我们创建了这么一个东西。

 

我们看 React.js 里面 createRef 引自 ReactCreateRef

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

点开源码，震惊了，非常的少。 也非常的简单，他返回的就是这样一个对象 refObject 。他里面 current 是 null 。如果是开发状态下 Object.seal(refObject) 。refObject 这个对象被封闭，阻止添加新属性并将现有属性标记为不可配置。当前属性的值只要可写就可以改变