react 点击使父元素消失_React 基础：Refs 和 DOM 引用之间的关系

前言

这系列是 React 基础教程(参考 React 官网)，记录了自己入门学习 React 的笔记。不太适合有 React 丰富经验的同学，但希望看到此文的你，多少都有些收获。

文章代码均可在我的码云中找到：https://gitee.com/eminoda/react-learn/branches

为了更好的阅读体验，可在底下的“了解更多”查看原文(我的语雀知识库)。

Refs 概要

随着项目发展，肯定会有 React 要和第三方库(类似 jQuery)，或者操作 DOM 的需求。

同时，对于自上而下的 React 数据流中，光靠 props 属性来控制子组件通常是不够的。一些特定场景，我们需要一种额外手段来修改子组件的"状态"。

综上，需要一个"靠谱"的方式来做这个事情，React 提供了 Refs 这个桥梁 。使我们能够直接访问原生的 DOM 节点，或者更好的和 React 元素(组件)进行交互。

官方示意，Refs 可以获取 class 的组件，以及 HTML 元素 DOM 的引用。函数组件由于没有 React 实例，所以不能像用于 class 组件那样来获取。

获取 Dom 引用

需求：点击 button 来触发 input 元素的聚焦操作。

代码示例：

说明：

1. 通过 React.createRef() 来创建 React 封装的 ref 引用对象 inputRefs

2. 将引用对象通过 JSX 语法赋值给 ref 属性，这样就和 Html 标签"扯上关系"了(引用对象即为 Dom 节点)

3. 通过绑定的事件操作，触发对 Dom 节点的控制(此处是聚焦操作 focus)

这样，在点击 button 后，对应的 input 就获取到了焦点了。

获取 class 引用

再次强调，Refs 不适用于获取函数组件的引用。

上面的 BaseInput 已经具备了控制焦点的操作，但可能会有其他需求来控制焦点。

比如下面示例了：父组件加载后，让 input 聚焦的需求。

代码示例：

说明：

1. 在构造器，初始化并创建 React 引用对象

2. 将该引用对象通过 JSX 模板，告知 BaseInput 的 ref 属性

3. 渲染后，就能拿到子组件实例的引用(current 属性)，即能调用到子组件中 focusTextInput 方法

4. 当父组件挂载后，会触发生命周期 componentDidMount，从而用子组件引用来控制焦点事件

Refs 回调

看下例，比较和上面的用例的不同：

Refs 的回调方式：

1. 去除了 React.createRef() 方法，将引用对象以回调函数的形式来初始化

2. 同时，定义了 element (inputElement )。

3. 当渲染 render 执行后，会对该回调函数进行执行，从而 inputElement 得到赋值。

注意，该引用回调函数的触发时间点：

对于 class 组件使用：

注意：父组件中的 inputElement 将会是子组件中的元素 element，我们可以拿它来做我们需要的事情。

然后子组件通过 props.inputRefs 来接受此回调方法：

Refs 转发

如上述 Refs 的使用中，我们已经知道它不支持对函数组件的使用，另外父组件能操控到子组件上的属性方法(因为整个实例引用都拿到了)

所以为了更好的控制(例如，函数组件)，可以使用 ref 转发。

同样，参照官网写了个示例：

代码上和之前例子做个对比，可以发现：

1. 子组件没有 React.createRef() 方法了

2. 而且子组件可以不通过 class 组件方式，通过 React.forwardRef 更自由的生成 React 元素

另外，引用对象的 current 的结果也不一样了：

class 组件获取子组件的 Refs：

而由 Refs 转发得到的引用：

前者是子组件实例的引用，后者是对应 Dom 的引用。

总结

Refs 的基本作用就是获取 DOM 节点和组件的引用，让我们能更有好的操控“React 元素”。

总比直接拿 document.getElementById 之类的要方便的多，多用于 Form 表单数据操作。