React函数式组件使用Ref

目录:

  1. 简介
  2. useRef
  3. forwardRef
  4. useImperativeHandle
  5. 回调Ref

简介

大家都知道React中的ref属性可以帮助我们获取子组件的实例或者Dom对象,进而对子组件进行修改,是一个很方便的特性。在传统类组件中,我们通过使用 React.createRef() 创建的,并通过 ref 属性附加到 React 元素来使用。而随着hooks的越来越广泛的使用,我们有必要了解一下在函数式组件中,如何使用Ref.
想要在函数式组件中使用Ref,我们必须先了解两个Api,useRefforwardRef

useRef

const refContainer = useRef(initialValue);

useRef返回一个可变的ref对象,其.current属性被初始化为传入的参数(initialValue)。返回的ref对象在整个生命周期内保持不变。
下面看一个例子

function TextInputWithFocusButton() {
  // 关键代码
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // 关键代码,`current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus();
  };
  return (
    <>
      // 关键代码
      <input ref={inputEl} type="text" />

      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

效果如下
Feb-23-2020 21-10-30.gif

可以看到我们点击button,先通过useRef创建一个ref对象inputEl,然后再将inputEl赋值给inputref,最后,通过inputEl.current.focus()就可以让input聚焦。
然后,我们再想下,如果input不是个普通的dom元素,而是个组件,该怎么办呢?
这就牵扯到另外一个api,forwardRef

forwardRef

我们修改一下上面的例子,将input单独封装成一个组件TextInput

const TextInput =  forwardRef((props,ref) => {
  return <input ref={ref}></input>
})

然后用TextInputWithFocusButton调用它

function TextInputWithFocusButton() {
  // 关键代码
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // 关键代码,`current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus();
  };
  return (
    <>
      // 关键代码
      <TextInput ref={inputEl}></TextInput>
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

可以看到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 <input ref={inputRef} />
})
function TextInputWithFocusButton() {
  // 关键代码
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // 关键代码,`current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus();
  };
  return (
    <>
      // 关键代码
      <TextInput ref={inputEl}></TextInput>
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

这样,我们也可以使用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 (
    <>
      <div>
        子组件: <TextInput ref={inputEl}></TextInput>
      </div>
      <div>
        父组件: <input type="text" value={value} onChange={() => {}} />
      </div>
      <button onClick={onButtonClick}>获得值</button>
    </>
  );
}
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 <input ref={inputRef} value={value} onChange={changeValue}></input>;
});

Feb-23-2020 23-26-09.gif

可以看到,父组件获取不到子组件实时的值,必须点击按钮才能获取到,即使我写了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 (
    <>
      <div>
        子组件: <TextInput ref={inputEl}></TextInput>
      </div>
      <div>
        父组件: <input type="text" value={value} onChange={() => {}} />
      </div>
    </>
  );
}
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 <input ref={inputRef} value={value} onChange={changeValue}></input>
})

Feb-23-2020 23-32-09.gif

可以看到,这里我们输入时,父组件就可以实时地拿到值了。
这里比较关键的代码就是使用useCallback代替了useRefcallback ref会将当前ref的值变化通知我们。

好,以上就是整理的关于函数式组件中使用Ref的方法。
当然,其中关于api介绍的比较简陋,大家看完可能不知所云。因为此篇文章的主要目的,仅是将散落在官网中关于ref的相关方法进行一下整合,形成一个使用ref的思路,关于api的更深入的了解,还请移步React官网
如有不足,欢迎指出。

参考文献:
官网中useRef useImperativeHandle Api的介绍
官网中forwardRef的介绍
官网中回调Ref的介绍

posted @ 2020-02-24 00:09  北辰狼月  阅读(26667)  评论(0编辑  收藏  举报