React 参考
参考是React中参考的简写。它类似于React中的键。它是一个属性，可以存储对特定DOM节点或React元素的引用。它提供了一种访问React DOM节点或React元素以及如何与之交互的方法。
何时使用引用
引用可以在以下情况下使用: 当我们要更改子组件的值而不使用Props时使用。以下情况:
当我们需要DOM测量(例如管理焦点，文本选择或媒体播放)时。
它用于触发命令式动画。
与第三方DOM库集成时。
它也可以在回调中使用。
何时不使用参考
应避免将其用于声明式可以做的任何事情。例如，您无需在Dialog组件上使用 open()和 close()方法，而是需要向其传递 isOpen Props。
您应该避免过度使用Refs。
如何创建引用
在React中，可以使用 React.createRef()创建引用。可以通过 ref 属性将其分配给React元素。通常在创建组件时将其分配给实例属性，然后可以在整个组件中对其进行引用。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.callRef = React.createRef();
}
render() {
return <div ref={this.callRef} />;
}
}
如何访问引用
在React中，当将ref传递到render方法中的元素时，可以通过ref的当前属性访问对节点的引用
const node = this.callRef.current;
引用当前属性
参考值取决于节点的类型而不同:
在HTML元素中使用ref属性时，使用 React.createRef()创建的ref会接收底层的DOM元素作为其 current 属性。
如果在自定义类组件上使用了ref属性，则ref对象将收到该组件的 mounted 实例作为其当前属性。
ref属性不能用于功能组件，因为它们没有实例。
添加对DOM元素的引用
在下面的示例中，我们添加了一个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>Adding Ref to DOM element</h2>
<input
type="text"
ref={this.callRef} />
<input
type="button"
value="Add text input"
onClick={this.addingRefInput}
/>
</div>
);
}
}
export default App;
输出
添加引用类组件
在下面的示例中，我们添加了一个引用来存储对类组件的引用。
示例
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>Adding Ref to class Component</h2>
<input
type="text"
ref={callRefInput} />
<input
type="button"
value="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;
输出
回调裁判
在React中，还有另一种使用裁判的方式，称为" 回调裁判"，当设置裁判时，它可以提供更多控制权。 取消设置。代替通过createRef()方法创建引用，React允许通过将回调函数传递给组件的ref属性来创建引用的方法。看起来像下面的代码。
<input type="text" ref={element => this.callRefInput = element} />
回调函数用于在实例属性中存储对DOM节点的引用，并且可以在其他位置访问。可以通过以下方式访问它:
下面的示例有助于理解回调引用的工作。
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 = () => {
//Focus the input using the raw DOM API
if (this.callRefInput) this.callRefInput.focus();
};
}
componentDidMount() {
//autofocus of the input on mount
this.focusRefInput();
}
render() {
return (
<div>
<h2>Callback Refs Example</h2>
<input
type="text"
ref={this.setInputRef}
/>
<input
type="button"
value="Focus input text"
onClick={this.focusRefInput}
/>
</div>
);
}
}
export default App;
在上面的示例中，当组件装载和组件卸载时，React将调用" ref"回调来存储对输入DOM元素的引用。 ，以 null 命名。在 componentDidMount 或 componentDidUpdate 触发之前，引用始终是最新。组件之间传递的回调ref与使用React.createRef()创建的对象ref相同。
输出
将引用从一个组件转发到另一个组件
引用转发是一种技术用于将 ref 通过组件传递到其子组件之一。可以通过使用 React.forwardRef()方法来执行。此技术对于高阶组件特别有用，并且特别用于可重用的组件库中。下面是最常见的示例。
示例
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>Submit</button>
</form>
</div>
);
}
}
export default App;
在上面的示例中，有一个组件 TextInput ，其中有一个子级作为输入字段。现在，要将 ref 传递或转发到输入，首先，创建一个参考，然后将您的参考传递到
。之后，React将引用作为第二个参数转发给 forwardRef 函数。接下来，我们将此ref参数向下转发到
。现在，可以在 inputRef.current 上访问DOM节点的值。
与useRef()React
在 React 16.7 及更高版本中。它有助于访问DOM节点或元素，然后我们可以与该DOM节点或元素进行交互，例如聚焦输入元素或访问输入元素值。它返回其 .current 属性初始化为传递参数的ref对象。返回的对象在组件的生存期内一直存在。
语法
const refContainer = useRef(initialValue);
示例
在下面的代码中， useRef 是一个分配给变量 inputRef 和然后附加到您要引用的HTML元素内名为ref的属性。
function useRefExample() {
const inputRef= useRef(null);
const onButtonClick = () => {
inputRef.current.focus();
};
return (
<>
<input ref={inputRef} type="text" />
<button onClick={onButtonClick}>Submit</button>
</>
);
}
