React组件refs的使用详解

更新时间：2018年02月09日 16:44:01 作者：ABangBlog

这篇文章主要介绍了React组件refs的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

ref顾名思义我们知道，其实它就可以被看座是一个组件的参考，也可以说是一个标识。作为组件的属性，其属性值可以是一个字符串也可以是一个函数。

其实，ref的使用不是必须的。即使是在其适用的场景中也不是非用不可的，因为使用ref实现的功能同样可以转化成其他的方法来实现。但是，既然ref有其适用的场景，那也就是说ref自有其优势。关于这一点和ref的适用场景，官方文档中是这样说的：

在从 render 方法中返回 UI 结构之后，你可能想冲出 React 虚拟 DOM 的限制，在 render 返回的组件实例上调用某些方法。通常来说，这样做对于应用中的数据流动是不必要的，因为活跃的数据（ Reactive data ）流总是确保最新的 props 被传递到每一个从 render() 输出的子级中去。然而，仍然有几个场景使用这种方式是必须的，或者说是有益的：查找渲染出的组件的DOM标记（可以认为是DOM的标识ID），在一个大型的非React应用中使用React组件或者是将你现有的代码转化成React。

下面我们来看这样的一个场景（下面的例子经常被用于ref的讲解，可见下面描述的场景应该是比较经典的）：通过某个事件使<input />元素的值被设为空字符串，然后使该<input />元素获得焦点。

var App = React.createClass({
  getInitialState: function() {
   return {userInput: ''};
  },
  handleChange: function(e) {
   this.setState({userInput: e.target.value});
  },
  clearAndFocusInput: function() {
   this.setState({userInput: ''}); // 设置值为空字符串
        //这里想要实现获得焦点   
  },
  render: function() {
   return (
    <div>
     <input
      value={this.state.userInput}
      onChange={this.handleChange}
     />
          <input type="button"
           value="Reset And Focus"
           onClick={this.clearAndFocusInput}
        />
    </div>
   );
  }
 });

在上面例子中，我们已经实现了点击按钮通知input元素将值设为空字符串，但是还没有实现使input元素获得焦点。这实现起来有些困难，因为在render()中返回的并不是实际的子组件的组合，仅仅是一个特定时间特定实例的描述。这句话感觉挺绕的，其实render返回的是虚拟的DOM，并不是真实的DOM。因此我们不需要仅仅着眼于那些从render()中返回的那些组件。

那说到这，对于我们如何实现获得焦点并没有太大的帮助。要想实现获得焦点这个功能我们需要借助ref来实现。上面我们提到过ref的值有两种类型，一种是字符串、一种是回调函数。

ref字符串上属性

React支持一个特殊的属性，你可以将这个属性加在任何通过render()返回的组件中。这也就是说对render()返回的组件进行一个标记，可以方便的定位的这个组件实例。这就是ref的作用。

ref的形式如下

<input ref="myInput" />

要想访问这个实例，可以通过this.refs来访问：

this.refs.myInput

先前版本中，我们可以通过React.findDOMNode(this.refs.myInput)来访问组件的DOM。但是现在，已经放弃了findDOMNode函数了，可以直接使用this.refs.myInput来进行访问。

ref回调函数

ref属性也可以是一个回调函数而不是一个名字。这个函数将要在组件被挂载之后立即执行。这个参照的组件将会作为该函数的参数，这个函数可以立即使用这个组件参数，当然也可以将其保存供以后使用。

其形式也比较简单：

render: function() {
  return <TextInput ref={(c) => this._input = c} } />;
},
componentDidMount: function() {
  this._input.focus();
},

或者是

render: function() {
  return (
   <TextInput
    ref={function(input) {
     if (input != null) {
      input.focus();
     }
    }} />
  );
},

这里需要注意，当这个参照组件被卸载并且这个ref改变的时候，先前的ref的参数值将为null。这将有效的防止了内存的泄露。所以在上面代码中会有if判断：

if(input != null){
     input.focus();
}

上面介绍了ref的使用场景和方法，下面我们就将上面的例子来补充完整，从而实现获得焦点的功能

var App = React.createClass({
  getInitialState: function() {
    return {userInput: ''};
  },
  handleChange: function(e) {
    this.setState({userInput: e.target.value});
  },
  clearAndFocusInput: function() {
    this.setState({userInput: ''}); // Clear the input
    // We wish to focus the <input /> now!
    if (this.refs.myTextInput !== null) {
      this.refs.myTextInput.focus();
    }
  },
  render: function() {
    return (
      <div>
        <input
          value={this.state.userInput}
          onChange={this.handleChange}
          ref=”myTextInput”   
                     />
        <input
          type="button"
          value="Reset And Focus"
          onClick={this.clearAndFocusInput}
          />
      </div>
    );
  }
});
ReactDOM.render(
  <App />,
  document.getElementById('content')
);

在这个例子中， render 函数返回一个 <input /> 实例的描述。但是真正的实例通过 this.refs. myTextInput获取。只要 render 返回的某个子组件带有 ref="myTextInput" ，this.refs. myTextInput就会获取到正确的实例。

上面就是ref的所有内容，更多关于ref的介绍可以参考Ref to Components。

对于ref我们就介绍到这，希望本文对大家有所帮助。也希望大家多多支持脚本之家。

您可能感兴趣的文章:

React
refs

React18中的useDeferredValue示例详解
这篇文章主要介绍了React18中的useDeferredValue的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-03-03
使用React实现轮播效果组件示例代码
React刚出来不久，组件还比较少，不像jquery那样已经有很多现成的插件了，于是自己写了一个基于React的轮播效果组件，现在分享给大家，有需要的可以参考借鉴。
2016-09-09
React函数组件hook原理及构建hook链表算法详情
这篇文章主要介绍了React函数组件hook原理及构建hook链表算法详情，每一个 hook 函数都有对应的 hook 对象保存状态信息，更多详细分析，需要的朋友可以参考一下
2022-07-07
React实现二级联动(左右联动)
这篇文章主要为大家详细介绍了React实现二级联动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
React各种状态管理器的解读及使用方法
这篇文章主要介绍了对于React各种状态管理器的解读,文中给大家提到了状态管理器是如何使用的，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-12-12
react-redux集中式状态管理及基本使用与优化
react-redux把组件分为两类，一类叫做UI组件，一类叫做容器组件，这篇文章主要介绍了集中式状态管理＜react-redux＞基本使用与优化,需要的朋友可以参考下
2022-08-08
React中useCallback useMemo使用方法快速精通
在React函数组件中，当组件中的props发生变化时，默认情况下整个组件都会重新渲染。换句话说，如果组件中的任何值更新，整个组件将重新渲染，包括没有更改values/props的函数/组件。在react中，我们可以通过memo，useMemo以及useCallback来防止子组件的rerender
2023-02-02
React useState超详细讲解用法
我正在处理的组件是表单的时间输入。表单相对复杂，并且是动态生成的，根据嵌套在其他数据中的数据显示不同的字段。我正在用useReducer管理表单的状态，到目前为止效果很好
2022-11-11
全栈轻量级搭配之Remix Prisma Sqlite使用分析
这篇文章主要为大家介绍了全栈轻量级搭配之Remix Prisma Sqlite使用示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
浅谈React高阶组件
这篇文章主要介绍了浅谈React高阶组件,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03