[react] useRef场景

本文主要是介绍[react] useRef场景，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.记忆功能 --  清定时器

先看和useState的差别

代码如下

不断地开启定时器

 

加上缓存就行,这样每次都是它

 2.获取dom节点

当然!你可以直接在模板上面写函数!

 函数变种也是可以的

 你想获取整个组件也是没问题的

import React, { useRef, forwardRef } from "react";const Son = forwardRef<HTMLDivElement>((props, ref) => {return (<div ref={ref}><div>我是孩子</div></div>);
});function App() {const sonRef = useRef(null);return (<div className="App" onClick={() => {console.log(sonRef.current);}}><Son ref={sonRef} /></div>);
}export default App;

3.暴露子组件

刚刚的方法可以暴露,但是你想执行暴露的东西怎么执行

import React, { useRef, forwardRef, useImperativeHandle } from "react";const Son = forwardRef((props, ref) => {// 在子组件内部创建一个内部的refconst innerRef = useRef(null);// 使用useImperativeHandle将子组件的方法暴露给父组件useImperativeHandle(ref, () => ({hi1() {},hi2() {}}));return (<div ref={innerRef}><div>我是孩子</div></div>);
});function App() {const sonRef = useRef(null);return (<div className="App" onClick={() => {console.log(sonRef.current);}}>{/* 将ref传递给Son组件 */}<Son ref={sonRef} /></div>);
}export default App;我在子组件还想暴露这行 <div>我是孩子</div>

这篇关于[react] useRef场景的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---