说说对React refs 的理解?应用场景?

简介: 说说对React refs 的理解?应用场景?

Refs 在计算机中称为弹性文件系统(英语:Resilient File System,简称ReFS)

React 中的 Refs提供了一种方式,允许我们访问 DOM节点或在 render方法中创建的 React元素

本质为ReactDOM.render()返回的组件实例,如果是渲染组件则返回的是组件实例,如果渲染dom则返回的是具体的dom节点

#二、

如何使用

创建ref的形式有三种:

传入字符串,使用时通过 this.refs.传入的字符串的格式获取对应的元素

传入对象,对象是通过 React.createRef() 方式创建出来,使用时获取到创建的对象中存在 current 属性就是对应的元素

传入函数,该函数会在 DOM 被挂载时进行回调,这个函数会传入一个 元素对象,可以自己保存,使用时,直接拿到之前保存的元素对象即可

传入hook,hook是通过 useRef() 方式创建,使用时通过生成hook对象的 current 属性就是对应的元素.

三、

应用场景

在某些情况下,我们会通过使用refs来更新组件,但这种方式并不推荐,更多情况我们是通过props与state的方式进行去重新渲染子元素

过多使用refs,会使组件的实例或者是DOM结构暴露,违反组件封装的原则

例如,避免在 Dialog 组件里暴露 open() 和 close() 方法,最好传递 isOpen 属性

但下面的场景使用refs非常有用:

对Dom元素的焦点控制、内容选择、控制

对Dom元素的内容设置及媒体播放

对Dom元素的操作和对组件实例的操作

集成第三方 DOM 库


相关文章
|
16天前
|
前端开发 JavaScript API
React Refs
10月更文挑战第10天
10 1
|
3月前
|
前端开发 JavaScript
你对 React 中的 refs 有何理解?
【8月更文挑战第30天】
40 6
|
6月前
|
存储 前端开发 中间件
🚀React+Node全栈无死角解析,吃透文件上传的各个场景
🚀React+Node全栈无死角解析,吃透文件上传的各个场景
|
3月前
|
JavaScript 前端开发 容器
React组件属性refs(七)
【8月更文挑战第14天】React组件属性refs(七)
49 0
React组件属性refs(七)
|
3月前
|
前端开发 JavaScript API
|
4月前
|
前端开发 JavaScript 数据可视化
React的应用场景有哪些?
React 是一个由 Facebook 开发并广泛使用的 JavaScript 库,专门用于构建用户界面。由于其灵活性和强大的生态系统,React 被广泛应用于多种场景。
96 4
|
6月前
|
前端开发 JavaScript 开发者
React Hooks 的应用场景有哪些?
【5月更文挑战第28天】React Hooks 的应用场景有哪些?
61 1
|
6月前
|
开发框架 前端开发 JavaScript
【专栏】对比分析两种流行的跨平台开发框架——Flutter和React Native,探讨它们的优势、劣势以及适用场景
【4月更文挑战第27天】本文对比分析了Flutter和React Native两大跨平台移动开发框架。Flutter,由Google推出,以其接近原生的性能、快速启动和流畅滚动受青睐,适合高性能和高度定制的项目。React Native,Facebook维护,依赖JavaScript,虽性能受限,但热重载优势和丰富第三方库使其适合快速迭代的项目。两者都在拓展多平台应用,Flutter在桌面和Web,React Native在Windows。选择框架需考虑项目需求、团队技能和性能效率平衡。
352 1
|
6月前
|
前端开发 JavaScript
React生命周期方法在实际开发中的应用场景有哪些?
【4月更文挑战第6天】 React 生命周期方法应用于数据获取、订阅管理、渲染逻辑处理、用户交互响应、性能优化、资源清理、强制更新、错误处理、动画实现、代码分割、服务端渲染、路由处理、依赖注入和集成第三方库。它们帮助控制组件行为和性能,但现代开发推荐使用Hooks替代部分生命周期方法。
55 0
|
6月前
|
缓存 前端开发 JavaScript
彻底学会react hooks API以及应用场景
【4月更文挑战第6天】 React Hooks是16.8版引入的新特性,允许在函数组件中使用state和其它React功能,避免类组件。主要包括useState(添加state)、useEffect(处理副作用)、useContext(访问上下文)、useReducer(使用reducer)、useCallback(缓存函数)、useMemo(缓存计算结果)和useRef(访问DOM元素)。Hooks简化了代码组织和重用,提高了代码效率和可维护性。
98 0