开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第21天，点击查看活动详情
前言
前几天不幸🐏了，在床上躺了几天，今天恢复一点就继续来水文啦。
React特殊属性ref
通常我们使用state或者props来控制组件的状态，但React还提供了一个特殊的ref属性来换种方式操控组件状态，ref属性常用于管理焦点、文本控制或者视频播放，集成第三方DOM库等，下面是ref属性使用的例子代码：
class AutoFocusTextInput extends React.Component {
componentDidMount() {
// 使用原生的 DOM API 获取焦点
this.textInput.focus();
}
render() {
// 当组件插入到 DOM 后，使用textInput状态引用input元素
return (
<div>
<input type="text" ref={(input)=>{this.textInput=input;}} />
</div>
);
}
}
我们为AutoFocusTextInput组件中的input元素定义ref，以实现当组件挂载时input能够主动获得到焦点，这就是ref属性的作用。
ref属性不仅能用于原生的DOM元素，还可以作用于自定义组件上，不过需要注意，只能为类组件定义ref属性，而函数组件则不行。
ref属性有三种获取方式
- 通过字符串获取：this.refs.xxx
- 通过回调函数获得
- 使用React.createRef方法
其中第一条通过字符串获取的方式已经不被推荐了，React官方现场推荐使用第三种React.createRef的方式来获取ref属性。
ref转发
有时我们可能也需要父组件去操控子组件的dom元素，我们可以使用间接的方式来实现操控。即在子组件上定义ref属性，随后父组件通过回调函数等方式实现引用的传递。例如下面的代码：
function Children(props) {
return (
<div>
<input ref={props.inputRef}/> // 使用父组件传递的inputRef，为input元素的ref属性赋值
</div>
)
}
class Parent extends React.Component {
render() {
return (
<Children inputRef={{e=>this.inputElement = e}}/>
)
}
}
React还提供了一种方式来进行实现组件的ref属性传递子组件的特性，例如下面的官方例子：
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));
// 创建Ref引用变量
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;
