React函数式组件使用Ref |
您所在的位置：网站首页 › REF函数如何用 › React函数式组件使用Ref |
React函数式组件使用Ref
|
目录： 简介 useRef forwardRef useImperativeHandle 回调Ref 简介大家都知道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 ( // 关键代码 Focus the input ); }效果如下
可以看到我们点击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 ( // 关键代码 Focus the input ); }可以看到React.forwardRef 接受一个渲染函数，其接收 props 和 ref 参数并返回一个 React 节点。 这样我们就将父组件中创建的ref转发进子组件，并赋值给子组件的input元素，进而可以调用它的focus方法。 至此为止，通过useRef+forwardRef，我们就可以在函数式组件中使用ref了。当然，这篇文章还远不止如此，下面还要介绍两个重要的知识点useImperativeHandle和回调Ref，结合上面两个api,让你的代码更加完美。 useImperativeHandle有时候，我们可能不想将整个子组件暴露给父组件，而只是暴露出父组件需要的值或者方法，这样可以让代码更加明确。而useImperativeHandleApi就是帮助我们做这件事的。 语法: 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 ( // 关键代码 Focus the input ); }这样，我们也可以使用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 ; });
可以看到，父组件获取不到子组件实时的值，必须点击按钮才能获取到，即使我写了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 })
可以看到，这里我们输入时，父组件就可以实时地拿到值了。 这里比较关键的代码就是使用useCallback代替了useRef，callback ref会将当前ref的值变化通知我们。 好，以上就是整理的关于函数式组件中使用Ref的方法。 当然，其中关于api介绍的比较简陋，大家看完可能不知所云。因为此篇文章的主要目的，仅是将散落在官网中关于ref的相关方法进行一下整合，形成一个使用ref的思路，关于api的更深入的了解，还请移步React官网。 如有不足，欢迎指出。 参考文献: 官网中useRef useImperativeHandle Api的介绍 官网中forwardRef的介绍 官网中回调Ref的介绍 |
【本文地址】
今日新闻 |
推荐新闻 |