wordpress站群教程,柯桥建设局网站,wordpress视频教程 百度云,零食销售网站开发与设计在上一篇文章《React 18中hook函数详解之useState和useEffect》介绍了react v16.8版本以后#xff0c;引入的Hooks函数的一些概念#xff0c;以及useState和useEffect的一些用法。本文将接着上一篇文章着重介绍Hook函数当中常用的另一个函数#xff1a;useRef。
useRef 是一…在上一篇文章《React 18中hook函数详解之useState和useEffect》介绍了react v16.8版本以后引入的Hooks函数的一些概念以及useState和useEffect的一些用法。本文将接着上一篇文章着重介绍Hook函数当中常用的另一个函数useRef。
useRef 是一个 React Hook它能帮助引用一个不需要渲染的值。
useRef 返回一个只有一个属性的对象:
current初始值为传递的 initialValue。之后可以将其设置为其他值。如果将 ref 对象作为一个 JSX 节点的 ref 属性传递给 ReactReact 将为它设置 current 属性。
在后续的渲染中useRef 将返回同一个对象。
一、获取dom元素
最简单的用法在函数组件中可以基于useRef获取DOM元素
function App() {const [num, setNum] useState(0);const btnBox useRef(null); useEffect(() {console.log(btnBox.current);}, [num]);return (divspan{num}/spanbutton ref{btnBox} onClick{() setNum(num 1)}按钮/button/div);
}
在父子组件当中可以使用useRef在父组件当中获取子组件的实例进而调用子组件的方法。获取子组件的方法就要用到另一个hook函数——useImperativeHandle。useImperativeHandle是获取函数子组件内部状态或者方法的hook。
定义一个父组件app.tsx:
import React, { useRef, useEffect } from react;
import ChildName from ./components/Child;
const parentRef () {const domRef useRefany(null);const childRef useRefany(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这是外层组件/h2divonClick{() {console.log(ref:deom, domRef, domRef.current);domRef.current.focus();domRef.current.value hh;}}aria-hiddentruespan这是一个dom节点/spaninput ref{domRef} //divbr /button onClick{showChild} style{{ marginTop: 20px }} aria-hiddentrue调用子组件的函数/buttondiv style{{ border: 1px solid, padding: 10px }}ChildName ref{childRef} //div/div/);
};export default parentRef;二、父组件知识点
useRef是一个方法且useRef返回一个可变的ref对象initialValue被赋值给其返回值的.current对象可以保存任何类型的值:dom、对象等任何可变值ref对象与自建一个{current‘’}对象的区别是useRef会在每次渲染时返回同一个ref对象即返回的ref对象在组件的整个生命周期内保持不变。自建对象每次渲染时都建立一个新的。ref对象的值发生改变之后不会触发组件重新渲染。有一个窍门把它的改变动作放到useState()之前本质上useRef就是一个其.current属性保存着一个可变值“盒子”。目前我用到的是pageRef和sortRef分别用来保存分页信息和排序信息
定义一个子组件Child.tsx:
import React, { useImperativeHandle, forwardRef } from react;const ChildName (_props: any, ref: React.Refunknown | undefined) {useImperativeHandle(ref, () ({say: sayHello}));const sayHello () {alert(hello,我是子组件);};return h3子组件/h3;
};export default forwardRef(ChildName);三、子组件知识点
useImperativeHandle(ref,createHandle,[deps])可以自定义暴露给父组件的实例值。如果不使用父组件的ref(chidlRef)访问不到任何值childRef.currentnulluseImperativeHandle应该与forwradRef搭配使用React.forwardRef会创建一个React组件这个组件能够将其接受的ref属性转发到其组件树下的另一个组件中React.forward接受渲染函数作为参数React将使用prop和ref作为参数来调用此函数
