React:Refs and DOM

Posted 瓶子2333

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React:Refs and DOM相关的知识,希望对你有一定的参考价值。

React的哲学是在JS层面构建UI,并把UI组件以功能单位拆分成更小的组件单元,以利于复用和整合,父组件通过props作为操作子组件的唯一通道,甚至子组件想和父组件交互时,也只能依靠父组件通过props传递下来的方法(该方法在父组件内定义,子组件只是拿到它的引用)。在文档中,称这种模式属于dataflow,即把程序分成多个块,每个块相对独立,并有各自的处理逻辑。

在React中,考虑到有些场景通过直接获取元素的引用会更方便简洁,于是提供了Ref这个接口。Ref可以帮我们获取React Element或DOM Element的引用,在文档提到:

When to Use Refs

There are a few good use cases for refs:

  • Managing focus, text selection, or media playback.  //操作元素的焦点、文本选择和媒体播放
  • Triggering imperative animations.                              //触发必要的动画效果
  • Integrating with third-party DOM libraries.                 //整合进第三方的DOM插件时

可以看出,这些场景都是想获取文档中的某个元素并触发摸个行为。在组件构建起来变得复杂时,可能元素众多,要获取/改变某个特定元素,要么经过几层筛选,要么传递的props变得臃肿,ref就像一个id,提供了简洁的接口和回调机制。

同时,文档也提醒不要滥用ref,推荐只作为一种辅佐手段。

Avoid using refs for anything that can be done declaratively.

For example, instead of exposing open() and close() methods on a Dialog component, pass an isOpen prop to it.

ref使用:

第一个例子,ref将元素的引用存储到组件的一个内部变量中。

 1   focus() {
 2     // Explicitly focus the text input using the raw DOM API
 3     this.textInput.focus();
 4   }
 5 
 6   render() {
 7     // Use the `ref` callback to store a reference to the text input DOM
 8     // element in an instance field (for example, this.textInput).
 9     return (
10       <div>
11         <input
12           type="text"
13           ref={(input) => { this.textInput = input; }} />
14         <input
15           type="button"
16           value="Focus the text input"
17           onClick={this.focus}
18         />
19       </div>
20     );
21   }

在line13中,ref作为一个html特性插入到input中,它的值是一个函数。该函数在组件挂载的时候触发,函数的唯一参数是组件本身(也就是这个input元素),函数体内用一个变量this.textInput指向了该input。

在组件从文档中卸载的时候,函数会再次触发,此时参数是null。也即是将this.textInput赋值为null,随后被js的垃圾收集机制清除。

 

 

待续...

 

以上是关于React:Refs and DOM的主要内容,如果未能解决你的问题,请参考以下文章

React开发(211):react中refs转发到dom组件

React Refs的讨论

Refs & DOM

使用 react-router-dom 时如何避免“功能组件不能被赋予 refs”?

Refs 和 DOM

Cycle.js (virtual-dom) 是不是支持 React 的 refs 或 mithril 的 config 属性?