[原文地址](https://www.cnblogs.com/yky-iris/p/12355243.html)
### 简介
大家都知道React中的`ref`属性可以帮助我们获取子组件的实例或者Dom对象,进而对子组件进行修改,是一个很方便的特性。在传统类组件中,我们通过使用 `React.createRef()` 创建的,并通过 `ref`属性附加到 `React 元素`来使用。而随着hooks的越来越广泛的使用,我们有必要了解一下在函数式组件中,如何使用Ref.
想要在函数式组件中使用Ref,我们必须先了解两个Api,`useRef`和`forwardRef`
### useRef
```
const refContainer = useRef(initialValue);
```
`useRef`返回一个可变的`ref`对象,其`.current`属性被初始化为传入的参数`(initialValue)`。返回的ref对象在整个生命周期内保持不变。
下面看一个例子
```
function TextInputWithFocusButton() {
// 关键代码
const inputEl = useRef(null);
const onButtonClick = () => {
// 关键代码,`current` 指向已挂载到 DOM 上的文本输入元素
inputEl.current.focus();
};
return (
<>
// 关键代码
>
);
}
```
效果如下
![Feb-23-2020 21-10-30.gif](https://cdn.learnku.com/uploads/images/202104/23/64262/CH2reLCXzr.gif!large)
可以看到我们点击button,先通过`useRef`创建一个ref对象`inputEl`,然后再将`inputEl`赋值给`input`的`ref`,最后,通过`inputEl.current.focus()`就可以让 input 聚焦。
然后,我们再想下,如果 input 不是个普通的dom元素,而是个组件,该怎么办呢?
这就牵扯到另外一个 api, `forwardRef`。
### forwardRef
我们修改一下上面的例子,将input单独封装成一个组件`TextInput`。
```
const TextInput = forwardRef((props,ref) => {
return
})
```
然后用`TextInputWithFocusButton`调用它
```
function TextInputWithFocusButton() {
// 关键代码
const inputEl = useRef(null);
const onButtonClick = () => {
// 关键代码,`current` 指向已挂载到 DOM 上的文本输入元素
inputEl.current.focus();
};
return (
<>
// 关键代码
>
);
}
```
可以看到`React.forwardRef`接受一个渲染函数,其接收`props`和`ref`参数并返回一个 React 节点。
这样我们就将父组件中创建的`ref`转发进子组件,并赋值给子组件的 input 元素,进而可以调用它的 focus 方法。
至此为止,通过 useRef + forwardRef ,我们就可以在函数式组件中使用 ref 了。当然,这篇文章还远不止如此,下面还要介绍两个重要的知识点`useImperativeHandle`和`回调Ref`,结合上面两个 api, 让你的代码更加完美。
### useImperativeHandle
有时候,我们可能不想将整个子组件暴露给父组件,而只是暴露出父组件需要的值或者方法,这样可以让代码更加明确。而`useImperativeHandle`Api就是帮助我们做这件事的。
语法:
```
useImperativeHandle(ref, createHandle, [deps])
```
`useImperativeHandle` 可以让你在使用 ref 时自定义暴露给父组件的实例值。
一个例子🌰:
```
const TextInput = forwardRef((props,ref) => {
const inputRef = useRef();
// 关键代码
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
return
})
function TextInputWithFocusButton() {
// 关键代码
const inputEl = useRef(null);
const onButtonClick = () => {
// 关键代码,`current` 指向已挂载到 DOM 上的文本输入元素
inputEl.current.focus();
};
return (
<>
// 关键代码
>
);
}
```
这样,我们也可以使用 current.focus() 来事 input 聚焦。这里要注意的是,子组件 TextInput 中的 useRef 对象,只是用来获取 input 元素的,大家不要和父组件的 useRef 混淆了。
### 回调Ref
什么是`回调Ref`呢?
上面的例子,都有一个问题,就是当 `ref`对象内容发生变化时,`useRef` 并不会通知你。变更 `.current`属性不会引发组件重新渲染,看下面这个例子。
比如下面这个例子:
```
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const [value, setValue] = useState("");
useEffect(() => {
setValue(inputEl.current.value);
}, [inputEl]);
const onButtonClick = () => {
// `current` 指向已挂载到 DOM 上的文本输入元素
console.log("input值", inputEl.current.value);
setValue(inputEl.current.value);
};
return (
<>
子组件:
父组件: {}} />
>
);
}
const TextInput = forwardRef((props, ref) => {
const [value, setValue] = useState("");
const inputRef = useRef();
useImperativeHandle(ref, () => ({
value: inputRef.current.value,
}));
const changeValue = e => {
setValue(e.target.value);
};
return ;
});
```
![Feb-23-2020 23-26-09.gif](https://cdn.learnku.com/uploads/images/202104/23/64262/TQzDiEuZBV.gif!large)
可以看到,父组件获取不到子组件实时的值,必须点击按钮才能获取到,即使我写了`useEffect`,希望它在`inputEl`改变的时候,重新设置`value`的值。
那怎么办呢?这就需要回调 Ref,我们改一下代码
```
function TextInputWithFocusButton() {
const [value, setValue] = useState("");
const inputEl = useCallback(node => {
if (node !== null) {
console.log("TCL: TextInputWithFocusButton -> node.value", node.value)
setValue(node.value);
}
}, []);
const onButtonClick = () => {
// `current` 指向已挂载到 DOM 上的文本输入元素
console.log("input值", inputEl.current.value);
setValue(inputEl.current.value);
};
return (
<>
子组件:
父组件: {}} />
>
);
}
const TextInput = forwardRef((props,ref) => {
const [value, setValue] = useState('')
const inputRef = useRef();
useImperativeHandle(ref, () => ({
value: inputRef.current.value
}));
const changeValue = (e) =>{
setValue(e.target.value);
}
return
})
```
![Feb-23-2020 23-32-09.gif](https://cdn.learnku.com/uploads/images/202104/23/64262/mhpoIRdMGQ.gif!large)
可以看到,这里我们输入时,父组件就可以实时地拿到值了。
这里比较关键的代码就是使用`useCallback`代替了`useRef`,`callback ref`会将当前ref的值变化通知我们。
好,以上就是整理的关于函数式组件中使用Ref的方法。
当然,其中关于api介绍的比较简陋,大家看完可能不知所云。因为此篇文章的主要目的,仅是将散落在官网中关于ref的相关方法进行一下整合,形成一个使用ref的思路,关于api的更深入的了解,还请移步[React官网](https://react.docschina.org/docs/getting-started.html)。
如有不足,欢迎指出。
参考文献:
[官网中useRef useImperativeHandle Api的介绍](https://react.docschina.org/docs/hooks-reference.html#useref)
[官网中forwardRef的介绍](https://react.docschina.org/docs/forwarding-refs.html)
[官网中回调Ref的介绍](https://react.docschina.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node)