个人公众号
公众号文章-React中ref的四种使用方法
个人公众号，求关注公众号~ 求指导，求点赞，求评论。
写在前面的废话
什么时候使用ref的环境就不说了，比如我们要获取一个输入框的value，无法通过state去获取，这时候用ref就很合适。
本文的重点介绍的是ref的四种方法，因为现在使用的react版本是18.2，所以部分的方法都算是已经过时了，并有自己的局限性，所以如果方便，更推荐使用useRef的方式。
stringRef
在描述stringRef之前，先贴上一段官网中关于stringRef的描述。
如果你以前使用过 React，你可能熟悉一个较旧的 API，其中属性是一个字符串，比如 ，而 DOM 节点被访问为 .我们建议不要这样做，因为字符串引用存在一些问题，被认为是遗留的，并且可能会在将来的某个版本中删除。
在知道了字符串的ref问题之后，由于部分旧的代码我们还会使用到stringRef，我们还是得看看stringRef的使用。
import { PureComponent, ReactNode } from "react";
class RefComponent extends PureComponent {
handleClick = () => {
const element: any = this.refs.stringRef;
console.log(element?.value);
};
render(): ReactNode {
return (
<div>
<input ref="stringRef" />
<button
onClick={() => {
this.handleClick();
}}
>
点击获取输入框的值
</button>
</div>
);
}
}
export default RefComponent;
效果如下：
当点击了我们的按钮的时候，就直接获取到了输入框中的值。
而在控制台中也有这么一个警告
Warning: A string ref, “stringRef”, has been found within a strict
mode tree. String refs are a source of potential bugs and should be
avoided. We recommend using useRef() or createRef() instead.Learn more about using refs safely here:
https://reactjs.org/link/strict-mode-string-ref
而这个警告也与官网的提示一样，讲述了stringRef是一个"deprecated"的API，建议我们使用useRef或者是createRef这两个API。
除此之外，在第五行的代码中，由于我们使用了this，而只有在类组件中，才存在了this，因此我们无法在函数组件中使用到stringRef。
综上所述，不建议再使用stringRef，除非你的项目很老，只能使用stringRef。
createRef
相对于stringRef，createRef算是比较正常点的，而因为stringRef有bug的原因，所以react也推荐在class组件使用createRef。
与直接使用stringRef不同，我们需要先在constructor中，使用createRef构建一个ref对象，再将其绑定到元素上去，这样子才可以去获取到元素。代码如下：
import React, { PureComponent, ReactNode, RefObject } from "react";
class RefComponent extends PureComponent {
inputRef: RefObject<HTMLInputElement> | undefined;
constructor(props: {} | Readonly<{}>) {
super(props);
this.inputRef = React.createRef();
}
handleClick = () => {
const element: any = this.inputRef;
console.log(element?.current?.value);
};
render(): ReactNode {
return (
<div>
<input ref={this.inputRef} />
<button
onClick={() => {
this.handleClick();
}}
>
点击获取输入框的值
</button>
</div>
);
}
}
export default RefComponent;
需要注意的是，我们无法再直接使用ref.value的方式去获取到值，而是需要使用ref?.current?.value的方式获取到值。
而将createRef放置在constructor中的原因，是因为如果放在
componentDidMount的时候，很容易出现createRef未能完成初始化，会出现undefined，同时，也最好使用?.的形式，防止放在constructor的时候，也未能及时初始化的情况。
同样的，本代码也只能放在类组件中使用，无法放在函数组件中使用，因为没有this…
也需要注意一点，这儿我用的类型是RefObject，而部分同学喜欢用LegacyRef，后者泛指的是Ref类型，是兼容之前stringRef的版本。
效果如下:
CallbackRef
ref属性，除了可以接受ref对象之外，也可以接受函数，这就称之为CallbackRef，也没啥好讲的，代码如下
import React, { LegacyRef, PureComponent, ReactNode, RefObject } from "react";
class RefComponent extends PureComponent {
inputRef: HTMLElement | undefined | null;
handleClick = () => {
const element: any = this.inputRef;
console.log(element?.value);
};
render(): ReactNode {
return (
<div>
<input
ref={(ref) => {
this.inputRef = ref;
}}
/>
<button
onClick={() => {
this.handleClick();
}}
>
点击获取输入框的值
</button>
</div>
);
}
}
export default RefComponent;
需要注意的是，这次的inputRef并不是RefObject,而是一个html对象，所以我们只需要当他做一个html对象处理就好了。
唯一要注意的是，依旧需要在类组件中使用，无法在函数组件中使用，毕竟都是对ref的操作。
useRef
与前面的类组件中对ref对象的操作，函数组件在获得了hook之后，也出现了对应的useRef钩子与之对应。毕竟ref对象都是只能在类组件中使用，前三个方式，无论怎么说，本质都是在类组件中对ref属性做一些变种，而useRef在函数式编程为王道的今天，更加的需要了解。
useRef返回的是一个可变的ref对象，类型为refObject,所以依旧需要用到上面的current属性去读取我们要的值。
useRef需要我们先使用userRef,接着在ref属性上使用回调函数的方式绑定ref。代码如下：
import { useRef } from "react";
function RefComponent() {
const inputRef = useRef<HTMLElement | null>();
const handleClick = () => {
const element: any = inputRef;
console.log(element?.current?.value);
};
return (
<>
<input
ref={(ref) => {
inputRef.current = ref;
}}
/>
<button
onClick={() => {
handleClick();
}}
>
点击获取输入框的值
</button>
</>
);
}
export default RefComponent;
效果如下:
最后的废话
大人，现在已经是2023年的年尾了，别想那么多了，用useRef吧…不要搞那么多事情了。
