概述:

引用(Refs)提供了一个获得DOM节点或者创建在render方法中的React元素的方法;

在典型的React数据流中,props是唯一的父组件与它们的子元素的通信方式。更改子元素,你需要使用新的props去重新渲染子元素。但是在一些情况下你现在典型数据流之外强制的更改元素。被更改的子元素可能是一个React组件的实例,或者是一个DOM元素。对所有这些情况,React提供了一种特殊方法:Refs;

(一)什么时候使用Refs:

  • 管理焦点、文本选择、媒体回放
  • 触发必要动画;
  • 整合第三方DOM库

避免对任何可以声明式解决的问题使用Refs;(比如相对于暴露一个对话框组件的open()、close()方法,请使用isOpen prop!)

(二)不要过度使用Refs!

你的第一个倾向可能是使用Refs去实现一些APP中的东西。在这种情况下,请停下来,仔细想想state应该存在的组件层次。经常地,我们都知道应该由更高的层次去拥有state。

(三)创建Refs:

可以通过React.createRef()创建Refs并通过ref属性联系到React组件。Refs通常当组件被创建时被分配给实例变量,这样它们就能在组件中被引用。

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <div ref={this.myRef} />;
}
}

(四)访问Refs:

当一个ref通过render放入一个元素中,一个对节点的引用可以通过ref的current属性得到;

const node = this.myRef.current;

ref的值根据节点类型的不同而不同:

  • 当ref属性用于HTML元素,在构造器中通过React.createRef()函数创建的ref接收底层DOM元素作为它的current属性;
  • 当ref属性用于传统的类组件,ref对象接收挂载好的组件实例作为它的current;
  • 你不能将ref属性用于函数式组件上,因为他们并没有实例(instance)!

下面是对应于不同ref的例子

1)DOM元素:

class CustomTextInput extends React.Component {
constructor(props) {
super(props);
// 创建一个ref去储存textInput DOM元素
this.textInput = React.createRef();
this.focusTextInput = this.focusTextInput.bind(this);
} focusTextInput() {
// 很明显的,让text input获得焦点使用了原生的DOM API
// 注意:我们通过current去获得DOM节点
this.textInput.current.focus();
} render() {
// 告诉React我们想要将<input>的ref和构造器中创建的textInput联系起来
return (
<div>
<input
type="text"
ref={this.textInput} /> <input
type="button"
value="Focus the text input"
onClick={this.focusTextInput}
/>
</div>
);
}
}

React将会将会在组件挂载时将DOM元素分配给current属性,并且在组件被卸载时,将current属性重置为null。ref将会在componentDidMount和componentDidUpdate生命周期钩子前被更新

2)类组件:

如果我们想要包装上面的CustomTextInput,模仿挂载后被点击。我们可以通过ref得到自定义的Input组件,手动调用它的focusTextInput函数。(注意!只有当CustomTextInput被声明为类的时候才有用!)

class AutoFocusTextInput extends React.Component {
constructor(props) {
super(props);
this.textInput = React.createRef();
} componentDidMount() {
this.textInput.current.focusTextInput();
} render() {
return (
<CustomTextInput ref={this.textInput} />
);
}
}

3)函数式组件(没有用的!)

function MyFunctionalComponent() {
return <input />;
} class Parent extends React.Component {
constructor(props) {
super(props);
this.textInput = React.createRef();
}
render() {
// 这样没用!函数式组件根本就没有实例!
return (
<MyFunctionalComponent ref={this.textInput} />
);
}
}

但是,你可以在函数式组件中使用ref属性,就像你引用DOM元素和类组件一样。

function CustomTextInput(props) {
// textInput 必须被声明在这里——ref才能适用于它
let textInput = React.createRef(); function handleClick() {
textInput.current.focus();
} return (
<div>
<input
type="text"
ref={textInput} /> <input
type="button"
value="Focus the text input"
onClick={handleClick}
/>
</div>
);
}

(五)向父组件暴露DOM引用(Refs)

在很罕见的情况下,你也许想要从父组件访问到子元素的DOM节点。通常来说我们不建议这样做,因为这样破坏了组件的封装性,但是在某些情况下对于类似:触发聚焦、改变子元素DOM节点的大小、位置等情况非常有用。

你可以向子组件增加ref(就像上面说的),但是这并不是一个完美的解决方案——你只会获得一个组件实例而不是DOM节点。更糟糕的是,它对函数式组件没用!

如果你使用React 16.3或者更高的版本,我们建议你在这些情况下使用ref forwarding,Ref fprwarding让组件可以选择去暴露子组件的ref作为他们自己的。你可以在ref forwarding文档中找到更全面的例子——怎样暴露子元素的DOM节点给父元素。

如果你使用React 16.2或者更低的版本,或者你需要比ref forwarding所能提供的更多的灵活性。你可以使用替代方法,并且显式的传入一个ref当做一个不同命名的prop。

如果可能,我们不建议暴露DOM节点,但是在一些情况下还是非常有用的。注意,这种方法需要你去在子组件中增加一些代码,如果你完全没有对于子组件实现的控制,你最后的选择是使用findDOMNode()方法,当然,也只能这样了。

(六)回调Refs

React同样支持另一种名为“回调refs”的方法去设置refs——它可以给我们对refs创建和销毁更细粒度的控制。

放入一个函数,而不是一个由createRef()创建的ref属性。这个函数接受React组件实例、或者HTML DOM元素作为参数——可以被储存并且在其他地方被访问。

下面的例子实现了一个通常的模式:使用ref回调储存一个DOM节点的应用在实例变量中:

class CustomTextInput extends React.Component {
constructor(props) {
super(props); this.textInput = null; this.setTextInputRef = element => {
this.textInput = element;
}; this.focusTextInput = () => {
// 通过原生DOM API聚焦文本
if (this.textInput) this.textInput.focus();
};
} componentDidMount() {
// 在挂载时自动聚焦
this.focusTextInput();
} render() {
// 使用'ref'回调去在一个实例域中储存文本输入DOM元素的引用(比如, this.textInput).
return (
<div>
<input
type="text"
ref={this.setTextInputRef}
/>
<input
type="button"
value="Focus the text input"
onClick={this.focusTextInput}
/>
</div>
);
}
}

React将会在组件挂载时使用DOM元素调用ref回调,在组件卸载时使用null调用ref回调。ref回调都会在componentDidMount或者componentDidUpdate生命周期钩子之前被调用。

你可以在组件之间传递回调refs,就像你可以对通过React.createRef()创建的对象refs一样:

function CustomTextInput(props) {
return (
<div>
<input ref={props.inputRef} />
</div>
);
} class Parent extends React.Component {
render() {
return (
<CustomTextInput
inputRef={el => this.inputElement = el}
/>
);
}
}

在上面的例子中,Parent组件将他的ref回调作为inputRef这个属性(props)传入CustomTextInput组件,接着CustomTextInput组件将同样的函数作为一个特殊的ref属性(attribute)传给<input>。从结果来看,Parent组件中的this.inputElement将会被放在与在CustomTextInput组件的<input>元素相关的DOM节点中。

(七)历史遗留的API:字符串Refs

不用管,以后都要移除(见到this.refs.textInput的形式,就使用React.createRef()或者回调模式代替)。

(八)关于回调refs的警告

如果ref回调被定义为一个行内函数,当组件更新时会被调用两次——第一次被null调用、而后被DOM元素调用。这是因为函数的新实例会在每次渲染的时候创建,所以React需要清除老的ref然后生成一个新的。你可以通过在class中定义一个绑定的ref回调方法避免这个问题,但是注意,这种问题在大多数情况下都没什么影响~

React.createRef()的更多相关文章

  1. React createRef:引用

    一 代码 import React, { Component } from 'react'; class Box extends Component { render() { return <b ...

  2. React的React.createRef()/forwardRef()源码解析(三)

    1.refs三种使用用法 1.字符串 1.1 dom节点上使用 获取真实的dom节点 //使用步骤: 1. <input ref="stringRef" /> 2. t ...

  3. [React] Reference a node using createRef() in React 16.3

    In this lesson, we look at where we came from with refs in React. Starting with the deprecated strin ...

  4. react的基本使用,及常用填坑

    import React, { Component } from 'react'; import PropTypes from 'prop-types'; import './First.css'; ...

  5. react中的DOM操作

    前面的话 某些情况下需要在典型数据流外强制修改子代.要修改的子代可以是 React 组件实例,也可以是 DOM 元素.这时就要用到refs来操作DOM 使用场景 下面是几个适合使用 refs 的情况 ...

  6. React + TypeScript:元素引用的传递

    React 中需要操作元素时,可通过 findDOMNode() 或通过 createRef() 创建对元素的引用来实现.前者官方不推荐,所以这里讨论后者及其与 TypeScript 结合时如何工作. ...

  7. React生命周期详解

    React生命周期图解: 一.旧版图解: 二.新版图解: 从图中,我们可以清楚知道React的生命周期分为三个部分:  实例化.存在期和销毁时. 旧版生命周期如果要开启async rendering, ...

  8. react高阶组件的使用

    为了提高代码的复用在react中我们可以使用高阶组件 1.添加高阶组件 高阶组件主要代码模板HOC.js export default (WrappedComponent) => { retur ...

  9. React高级指引

    深入JSX 本质上来讲,JSX是为React.createElement方法提供的语法糖 <MyButton color=}> Click Me </MyButton> 编译为 ...

随机推荐

  1. CodeForces - 1016D Vasya And The Matrix

    题面在这里! 很明显二进制每一位都是无关的,所以可以先把原问题简化:给矩阵中的每个位置填入0/1,使得特定行/列有奇数个1,其他行/列有偶数个1. 一个比较好想的方法是对行和列 列出 n+m 个异或方 ...

  2. 【DFS】BZOJ3522-[Poi2014]Hotel

    [题目大意] 给出一棵树,求三个节点使得它们两两之间的距离相等,问共有多少种可能性? [思路] 显然,这三个节点是关于一个中心点对称地辐射出去的. 枚举中心点,往它的各个子树跑Dfs.tmp[i]表示 ...

  3. PHP链接sqlserver出现中文乱码

    PHP通过dblib扩展链接sqlserver,使用的是freetds,出现中文乱码. 在freetds的配置文件中(/usr/local/freetds/etc/freetds.conf),[glo ...

  4. bzoj 4874: 筐子放球

    4874: 筐子放球 Time Limit: 10 Sec  Memory Limit: 256 MB Description 小N最近在研究NP完全问题,小O看小N研究得热火朝天,便给他出了一道这样 ...

  5. Unity随手机

    该文章持续更新! 协程的返回值必需是 IEnumerator 协程的参数不能加关键字 ref 或 out 在函数 Update 和 FixedUpdate 中不能使用 yield 语句,但可以启动协程 ...

  6. 某DP题目5

    题意 一个游戏里有k种装备,一开始等级为1,每打败一个怪兽,会随机掉落一件一种类型的装备,它的等级为[1,t+1]中的随机一个数,t为当前佩戴的类型的装备的等级,若掉落t+1等级的装备,就会佩戴该装备 ...

  7. OC 导入类 #import和@class 区别复习

    objective-c中#import和@class的区别 在Objective-C中,可以使用#import和@class来引用别的类型, 但是你知道两者有什么区别吗? @class叫做forwar ...

  8. ice地址

    http://www.zeroc.com/download/eclipse

  9. EntityFramework 7.0之初探【基于VS 2015】(

    前言 本篇作为EF 7.0的开篇也是Entity Framework目前系列末篇,因为关于EF 7.0学习资料实在是太少,我都是参考老外的资料花费了不少时间去研究去尝试同时也失败多次,个人觉得那是值得 ...

  10. 使用openURL实现程序间带参数跳转详解

    使用openURL实现程序间带参数跳转详解 实现的效果:有两款应用A与B,A打开B A --> B 1. 新建工程B,bundle ID为com.YouXianMing.B 建立一个URL 这么 ...