React 函数式组件使用ref

愛された事でしょ

已于 2023-03-23 10:11:19 修改

阅读量1.2k

点赞数

文章标签： javascript react.js 前端

于 2023-03-23 10:09:38 首次发布

本文链接：https://blog.csdn.net/qq_44053549/article/details/129723834

版权

React 函数式组件使用Ref

React 函数式组件使用ref

在React 中ref 可以帮助我们获取子组件的实例或DOM对象

UseRef

 const inputRef = useRef(init);

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

import React, { useState,useCallback, useEffect, useRef, } from 'react';
import { Input, Button } from 'antd';
import styles from './index.less';

const Index = (props) => {
  const inputEle = useRef(null)

  const onBurronClick = () => {
    inputEle.current.focus();
  };
  return (
    <div className={styles.warp_content}>
      <div>
        <Input ref={inputEle } style={{ width: 300 }}></Input>
      </div>
      <div>
        <Button onClick={onBurronClick}>聚焦</Button> 
      </div>
    </div>
  );
};

export default Index;

我们点击Button,先通过useRef创建一个ref对象inputEle ，然后再将inputEle 赋值给Input的ref,最后，通过inputEle.current.focus()就可以让Input聚焦。如果Input不是一个普通的dom元素，而是一个组件呢？这就引出了另一个PAI，forwardRef

forwardRef

React.forwardRef 接受一个渲染函数，其接收 props 和 ref 参数并返回一个 React 节点。

我们修改一下上面的列子，将Input封装成一个组件

import React, {useState, useRef, forwardRef } from 'react';
import { Input } from 'antd';

const InputText = forwardRef((props, ref) => {
  return <Input ref={ref}   style={{ width: 300 }}></Input>;
});
export default InputText;

然后再Index组件中引用InputText 组件

import React, { useState,useCallback, useEffect, useRef, } from 'react';
import { Input, Button } from 'antd';
import InputText from './mod/inputText';
import styles from './index.less';

const Index = (props) => {
  const inputEle = useRef(null)

  const onBurronClick = () => {
    inputEle.current.focus();
  };
  return (
    <div className={styles.warp_content}>
      <div>
        <InputText ref={inputEle } style={{ width: 300 }}></Input>
      </div>
      <div>
        <Button onClick={onBurronClick}>聚焦</Button> 
      </div>
    </div>
  );
};

export default Index;

React.forwardRef 接受一个渲染函数，其接收 props 和 ref 参数并返回一个 React 节点。
这样我们就将父组件中创建的ref转发进子组件，并赋值给子组件的input元素，进而可以调用它的focus方法。通过useRef和forwardRef这两个API，我们就可以在函数式组件中使用ref。使用useRef和forwardRef会将子组件完全暴露给父元素，但是有时候我们不想将子组件全部暴露给父组件，那应该怎么办了，这就需要我们使用另一个API useImperativeHandle

useImperativeHandle

我们可以使用useImperativeHandle将我们需要暴露的属性或方法暴露给父组件
语法：

useImperativeHandle(ref, createHandle, [deps])

我们改造一下上面的InputText 组件

import React, {useState, useRef, forwardRef, useImperativeHandle } from 'react';
import { Input } from 'antd';

const InputText = forwardRef((props, ref) => {
    const inputRef = useRef();
    useImperativeHandle(ref, () => ({
      focus: () => {
        inputRef.current.focus();
      }
    }));
  return <Input ref={inputRef}  style={{ width: 300 }}></Input>;
});

export default InputText;

然后再父组件中引用

import React, { useState,useCallback, useEffect, useRef, } from 'react';
import { Input, Button } from 'antd';
import InputText from './mod/inputText';
import styles from './index.less';

const Index = (props) => {
  const inputEle = useRef(null)

  const onBurronClick = () => {
    inputEle.current.focus();
  };
  return (
    <div className={styles.warp_content}>
      <div>
        <InputText ref={inputEle } style={{ width: 300 }}></Input>
      </div>
      <div>
        <Button onClick={onBurronClick}>聚焦</Button> 
      </div>
    </div>
  );
};

export default Index;

上述代码，我们也可以使用current.focus()来使Input聚焦
这样我们就可以只把InputText组件的focus方法暴露给父组件。需要注意的是，子组件TextInput中的useRef对象，只是用来获取Input元素的，大家不要和父组件中的useRef混淆。
useRef、forwardRef、useImperativeHandle 使用这三个API可以将只需要暴露给父组件的属性和方法暴露给父组件。

回调Ref

什么是回调Ref呢？
当 ref对象内容发生变化时，useRef 并不会通知你。变更.current属性不会引发组件重新渲染。那这个问题怎么解决了，这就需要用到回调Ref了。
我们先看一个列子：
InputText 组件：

import React, {useState, useRef, forwardRef, useImperativeHandle } from 'react';
import { Input } from 'antd';

const InputText = forwardRef((props, ref) => {
  const [value, setValue] = useState('')
    const inputRef = useRef();
    useImperativeHandle(ref, () => ({
      value: inputRef.current.props.value,
    }));
    const changeValue = (e) =>{
      setValue(e.target.value);
    }
  return <Input ref={inputRef} value={value} onChange={changeValue}  style={{ width: 300 }}/>;
});

export default InputText;

Index组件：

import React, { useState,useCallback, useEffect, useRef, } from 'react';
import { Input, Button } from 'antd';
import styles from './index.less';
import InputText from './mod/inputText';

const Index = (props) => {
  const inputEle = useRef(null);
  const [value, setValue] = useState(null);
  useEffect(() => {
    setValue(inputEle.current.value);
  }, [inputEle]);
const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    console.log("input值", inputEl.current.value);
    setValue(inputEle.current.value);
  };
  
  return (
    <div className={styles.warp_content}>
      <div style={{ paddingBottom: '15px' }}>
        <InputText ref={inputEle}></InputText>
      </div>
      <div>
        <Input onChange={() => {}} value={value} style={{ width: 300 }}></Input>
      </div>
      <div>
        <Button onClick={onButtonClick }>获取值</Button>
      </div>
    </div>
  );
};

export default Index;

上面这个例子，档子组中的Input变化时，父组件是接收不到子组件的value值的，必须要通过点击按钮，才能获取的子组件的value,即使用useEffeact方法监听inputEle，也无济于事。那需要怎么做了，这就需要使用到回调Ref.
我们改造一下上面的代码：

import React, {useState, useRef, forwardRef, useImperativeHandle } from 'react';
import { Input } from 'antd';

const InputText = forwardRef((props, ref) => {
    const [value, setValue] = useState('')
    const inputRef = useRef();
    useImperativeHandle(ref, () => ({
      value: inputRef.current.props.value,
    }));
    const changeValue = (e) =>{
      setValue(e.target.value);
    }
  return <Input ref={inputRef} value={value} onChange={changeValue}  style={{ width: 300 }}></Input>;
});

export default InputText;

Index组件：

import React, { useState,useCallback, useEffect, useRef, } from 'react';
import { Input, Button } from 'antd';
import styles from './index.less';
import InputText from './mod/inputText';

const Index = (props) => {
  //   const inputEle = useRef(null);
  const [value, setValue] = useState(null);
  const inputEle = useCallback((node) => {
    if (node !== null) {
      console.log('Index -> node.value', node);
      setValue(node?.value);
    }
  }, []);
  return (
    <div className={styles.warp_content}>
      <div style={{ paddingBottom: '15px' }}>
        <InputText ref={inputEle}></InputText>
      </div>
      <div>
        <Input onChange={() => {}} value={value} style={{ width: 300 }}></Input>
      </div>
     
    </div>
  );
};

export default Index;

上述代码就能实现子组件value变化，父组件就能自动获取到子组件的value值。关键代码就是使用useCallback代替了useRef，callback 会将当前ref的值变化通知父组件。

总结

1、ref 可以帮助我们获取子组件的实例或DOM对象
2、使用useRef()和forwardRef()会将子组件完全暴露给父元素
3、useRef()、forwardRef()、useImperativeHandle() 使用这三个API可以将只需要暴露给父组件的属性和方法暴露给父组件。
4、回调ref,使用callback()代替useRef()，callback() 会将当前ref的值变化通知父组件