React Refs 原理作用：其实就是去获取一个真实节点或者组件实例的引用，跟 vue 中的 ref 可以说是大同小异

作用

其实就是去获取一个真实节点或者组件实例的引用，跟 vue 中的 ref 可以说是大同小异，具体用法大家就参考官网。

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<body>
    <div id="app"></div>
    <script type="text/babel">
        // createRef 会返回一个对象 {"current":null} 
        const a = React.createRef();
        console.log(JSON.stringify(a))
        // 生成 vnode，会有 ref 属性存的是 a
        const element = <h1 ref= {a}>123</h1>
        console.log(JSON.stringify(element));
        // 在创建真实节点的过程中如果发现节点具有 ref 属性就将该节点的引用保存的 current 上
        const app = document.getElementById('app')
        ReactDOM.render(element, app)
        console.log(element);
        console.log(a);
    </script>
</body>
</html>

React.createRef

function createRef() {
    var refObject = {
      current: null
    };

    {
      Object.seal(refObject);
    }

    return refObject;
  }

elment 的值

{
  "type": "h1",
  "key": null,
  "ref": {
    "current": null
  },
  "props": {
    "children": "123"
  },
  "_owner": null,
  "_store": {}
}

经过 render 后 a.current 和 element.ref.current

a.current 保持了对 h1 的引用

element.ref.current 保持了对 h1 的引用