React 18中hook函数详解之useRef

在上一篇文章《React 18中hook函数详解之useState和useEffect》介绍了react v16.8版本以后,引入的Hooks函数的一些概念,以及useState和useEffect的一些用法。本文将接着上一篇文章着重介绍Hook函数当中常用的另一个函数:useRef。

useRef 是一个 React Hook,它能帮助引用一个不需要渲染的值。

useRef 返回一个只有一个属性的对象:

  • current:初始值为传递的 initialValue。之后可以将其设置为其他值。如果将 ref 对象作为一个 JSX 节点的 ref 属性传递给 React,React 将为它设置 current 属性。

在后续的渲染中,useRef 将返回同一个对象。

一、获取dom元素

最简单的用法,在函数组件中,可以基于useRef获取DOM元素

javascript 复制代码
function App() {
  const [num, setNum] = useState(0);
  const btnBox = useRef(null); 

  useEffect(() => {
    console.log(btnBox.current);
  }, [num]);

  return (
    <div>
      <span>{num}</span>
      <button ref={btnBox} onClick={() => setNum(num + 1)}>
        按钮
      </button>
    </div>
  );
}

在父子组件当中,可以使用useRef在父组件当中获取子组件的实例,进而调用子组件的方法。获取子组件的方法,就要用到另一个hook函数------useImperativeHandle。useImperativeHandle是获取函数子组件内部状态或者方法的hook。

定义一个父组件app.tsx:

javascript 复制代码
import React, { useRef, useEffect } from 'react';
import ChildName from './components/Child';
const parentRef= () => {
  const domRef = useRef<any>(null);
  const childRef = useRef<any>(null);
  useEffect(() => {
    console.log('ref:deom-init', domRef, domRef.current);
    console.log('ref:child-init', childRef, childRef.current);
  });
  const showChild = () => {
    console.log('ref:child', childRef, childRef.current);
    if (childRef.current) {
      childRef.current.say();
    }
  };
  return (
    <>
      <div style={{ margin: '100px', border: '2px dashed', padding: '20px' }}>
        <h2>这是外层组件</h2>
        <div
          onClick={() => {
            console.log('ref:deom', domRef, domRef.current);
            domRef.current.focus();
            domRef.current.value = 'hh';
          }}
          aria-hidden="true">
          <span>这是一个dom节点</span>
          <input ref={domRef} />
        </div>
        <br />
        <button onClick={showChild} style={{ marginTop: '20px' }} aria-hidden="true">
          调用子组件的函数
        </button>
        <div style={{ border: '1px solid', padding: '10px' }}>
          <ChildName ref={childRef} />
        </div>
      </div>
    </>
  );
};

export default parentRef;

二、父组件知识点

  1. useRef是一个方法,且useRef返回一个可变的ref对象;
  2. initialValue被赋值给其返回值的.current对象;
  3. 可以保存任何类型的值:dom、对象等任何可变值;
  4. ref对象与自建一个{current:''}对象的区别是:useRef会在每次渲染时返回同一个ref对象,即返回的ref对象在组件的整个生命周期内保持不变。自建对象每次渲染时都建立一个新的。
  5. ref对象的值发生改变之后,不会触发组件重新渲染。有一个窍门,把它的改变动作放到useState()之前;
  6. 本质上,useRef就是一个其.current属性保存着一个可变值"盒子"。目前我用到的是pageRef和sortRef分别用来保存分页信息和排序信息;

定义一个子组件Child.tsx:

javascript 复制代码
import React, { useImperativeHandle, forwardRef } from 'react';

const ChildName = (_props: any, ref: React.Ref<unknown> | undefined) => {
  useImperativeHandle(ref, () => ({
    say: sayHello
  }));
  const sayHello = () => {
    alert('hello,我是子组件');
  };
  return <h3>子组件</h3>;
};

export default forwardRef(ChildName);

三、子组件知识点

  1. useImperativeHandle(ref,createHandle,[deps])可以自定义暴露给父组件的实例值。如果不使用,父组件的ref(chidlRef)访问不到任何值(childRef.current==null);
  2. useImperativeHandle应该与forwradRef搭配使用;
  3. React.forwardRef会创建一个React组件,这个组件能够将其接受的ref属性转发到其组件树下的另一个组件中;
  4. React.forward接受渲染函数作为参数,React将使用prop和ref作为参数来调用此函数;
相关推荐
Myli_ing29 分钟前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维1 小时前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
雯0609~1 小时前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ1 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z1 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
彭世瑜2 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4042 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish2 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five2 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序2 小时前
vue3 封装request请求
java·前端·typescript·vue