React Refs的作用和用法详解 – ReactJS实战教程 reactrefs|React

上一章ReactJS实战教程请查看：React key的作用和用法
Refs是React中引用（references）的缩写，它类似于React中的keys。它是一个属性，可以存储对特定DOM节点或React元素的引用。它提供了访问React DOM节点或React元素以及如何与之交互的方法，当我们想要更改子组件的值时使用它，而不需要使用props。
何时使用应用refsrefs可用于以下情况:

当需要管理焦点、文本选择或媒体播放等DOM度量时。
它用于触发命令式动画。
与第三方DOM库集成时。
它也可以用作回调。

何时不使用refs

对于任何可以声明性地进行的操作，都应该避免使用它。例如，你不需要在对话框组件上使用open()和close()方法，而是需要向它传递一个isOpen prop。
你应该避免过度使用refs。

如何创建引用refs？在React中，可以使用React.createref()创建Refs，可以通过ref属性将其分配给React元素。它通常在创建组件时分配给实例属性，然后可以在整个组件中引用。

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

如何访问Refs在React中，当ref被传递给render方法中的元素时，可以通过ref的当前属性访问节点的引用。

const node = this.callRef.current;

引用当前属性ref值根据节点的类型不同而不同:

当在HTML元素中使用ref属性时，使用React.createref()创建的ref将接收作为其当前属性的底层DOM元素。
如果在自定义类组件上使用ref属性，则ref对象将该组件的挂载实例作为其当前属性接收。
ref属性不能用于函数组件，因为它们没有实例。

向DOM元素添加Ref在下面的示例中，我们添加了一个ref来存储对DOM节点或元素的引用。

import React, { Component } from 'react'; import { render } from 'react-dom'; class App extends React.Component { constructor(props) { super(props); this.callRef = React.createRef(); this.addingRefInput = this.addingRefInput.bind(this); }addingRefInput() { this.callRef.current.focus(); }render() { return ( < div> < h2>向DOM元素添加Ref< /h2> < input type="text" ref={this.callRef} /> < input type="button" value="http://www.srcmini.com/添加文本输入" onClick={this.addingRefInput} /> < /div> ); } } export default App;

将Ref添加到类组件在下面的示例中，我们添加了一个ref来存储对类组件的引用。
例子

import React, { Component } from 'react'; import { render } from 'react-dom'; function CustomInput(props) { let callRefInput = React.createRef(); function handleClick() { callRefInput.current.focus(); }return ( < div> < h2>将Ref添加到类组件< /h2> < input type="text" ref={callRefInput} /> < input type="button" value="http://www.srcmini.com/Focus input" onClick={handleClick} /> < /div> ); } class App extends React.Component { constructor(props) { super(props); this.callRefInput = React.createRef(); }focusRefInput() { this.callRefInput.current.focus(); }render() { return ( < CustomInput ref={this.callRefInput} /> ); } } export default App;

回调refs在react中，有另一种使用refs的方法，称为“回调refs”，它在设置和取消设置refs时提供了更多的控制。React不使用createRef()方法创建引用，而是允许通过向组件的ref属性传递回调函数来创建引用。它看起来像下面的代码。

< input type="text" ref={element => this.callRefInput = element} />

回调函数用于在实例属性中存储对DOM节点的引用，可以在其他地方访问。可以按如下方式访问：

this.callRefInput.value

下面的示例有助于理解回调引用的工作原理。

import React, { Component } from 'react'; import { render } from 'react-dom'; class App extends React.Component { constructor(props) { super(props); this.callRefInput = null; this.setInputRef = element => { this.callRefInput = element; }; this.focusRefInput = () => { //使用原始DOM API聚焦input if (this.callRefInput) this.callRefInput.focus(); }; }componentDidMount() { //自动聚焦 this.focusRefInput(); }render() { return ( < div> < h2>回调Refs例子< /h2> < input type="text" ref={this.setInputRef} /> < input type="button" value="http://www.srcmini.com/Focus input text" onClick={this.focusRefInput} /> < /div> ); } } export default App;

在上面的例子中，React将调用“ref”回调，以在组件挂载时存储对输入DOM元素的引用，当组件卸载时，用null调用它。Refs总是在componentDidMount或componentDidUpdate触发之前更新的。组件之间传递的回调refs与处理对象refs相同，后者是用React.createref()创建的。
将Ref从一个组件转发到另一个组件Ref转发是一种技术，用于将一个Ref通过一个组件传递给它的一个子组件，它可以通过使用React.forwarding()方法来执行。这种技术对于高阶组件特别有用，特别用于可重用的组件库。最常见的例子如下。
例子

import React, { Component } from 'react'; import { render } from 'react-dom'; const TextInput = React.forwardRef((props, ref) => ( < input type="text" placeholder="Hello World" ref={ref} /> )); const inputRef = React.createRef(); class CustomTextInput extends React.Component { handleSubmit = e => { e.preventDefault(); console.log(inputRef.current.value); }; render() { return ( < div> < form onSubmit={e => this.handleSubmit(e)}> < TextInput ref={inputRef} /> < button>提交< /button> < /form> < /div> ); } } export default App;

在上面的示例中，有一个组件TextInput，它的输入字段是一个子字段。现在，要将ref向下传递或转发到输入，首先创建一个ref，然后将你的ref向下传递到< TextInput ref={inputRef}>。之后，React将ref作为第二个参数转发到forwarding函数。接下来，我们将这个ref参数转发到< input ref={ref}>。现在，可以在inputRef.current访问DOM节点的值。
React使用useRef()在React 16.7及以上版本中有介绍。它有助于访问DOM节点或元素，然后我们可以与该DOM节点或元素进行交互，比如聚焦输入元素或访问输入元素值。它返回ref对象，其.current属性初始化为传递的参数。返回的对象在组件的生命周期内保持不变。
语法

const refContainer = useRef(initialValue);

例子
【React Refs的作用和用法详解 – ReactJS实战教程】在下面的代码中，useRef是一个函数，它被分配给一个变量inputRef，然后附加到HTML元素中要引用的一个名为ref的属性。

function useRefExample() { const inputRef= useRef(null); const onButtonClick = () => { inputRef.current.focus(); }; return ( < > < input ref={inputRef} type="text" /> < button onClick={onButtonClick}>提交< /button> < /> ); }