含义以及使用方法

ref （reference）是引用，在 vue 中是用于或者真实的dom, 那么在react 中，ref 的作用是啥呢？

场景：希望直接使用dom元素中的某个方法，或者希望直接使用自定义组件中的某个方法

ref作用于内置的html组件

ref作用于内置的html组件，得到的将是真实的dom对象

使用string 方式

import React, { Component } from 'react'
export default class TestRef extends Component {// 组件挂载完成后打印thiscomponentWillMount() {// 可以通过this.refs.属性名来进行获取console.log(this);   }render() {return (<div ref='test'><h1>234234324</h1></div>)}
}

注意：string 类型的已经过时了哦，不建议使用哦

使用函数方式

函数的调用时间：

componentDidMount的时候会调用该函数

在componentDidMount事件中可以使用ref

如果ref的值发生了变动（旧的函数被新的函数替代），分别调用旧的函数以及新的函数，时间点出现在componentDidUpdate之前
旧的函数被调用时，传递null

新的函数被调用时，传递对象

如果ref所在的组件被卸载，会调用函数

import React, { Component } from 'react'
export default class TestRef extends Component {// 组件挂载完成后打印thiscomponentWillMount() {// 这里的this.refs里面是没有任何东西的console.log(this);   }render() {return (<div ref={(el) => {// 这里可以获取到ref绑定dom 元素，前提是ref 是作用在react 内置组件的。console.log(el)}}><h1>234234324</h1></div>)}
}

效果：

注意：我上面直接在ref 后面绑定的函数不太建议使用哦，原因是每一次渲染（render）或者说是每一次使用 this.setState({}) 都会创建一个匿名函数，并且进行执行。

解决办法是，直接定义一个函数来进行绑定，就不会出现这个问题的,

结果：

使用react对象方式

需要使用 React.createRef() 这个方式来定义一个对象

样例：

import React, { Component } from 'react'export default class TestRef extends Component {// 定义一个对象的属性，类型是react的对象private getRef:React.RefObject<HTMLDivElement>;constructor(props:{}){super(props);this.getRef = React.createRef();}// 组件挂载完成后打印thiscomponentDidMount() {// 可以通过this.getRef.current  属性名来进行获取console.log(this); }render() {return (<div ref={this.getRef}><h1>234234324</h1></div>)}
}

结果：

从这个结果来看，我们发现，getRef 是一个普通对象，那么我们手动定义一个对象可以么？
答案是可以的哦？

总的来说，ref 需要使用的最好方式是 直接在属性中定义函数或者属性来进行赋值，这样的效率最好

ref作用于类组件，得到的将是类的实例

我们知道上面所说的 react 的内置组件如 div, ul， li 等普通的html元素获取到的是真实的

样例代码

import React, { Component } from 'react'
interface IProp<T> {msg: string,ref: React.RefObject<T>
}
// 定义A组件
class A extends Component<IProp<A>> {render(){return <h1>{this.props.msg}</h1>}
}export default class TestRef extends Component {private getRef:React.RefObject<A> = React.createRef();// 组件挂载完成后打印thiscomponentDidMount() {// 可以通过this.getRef.current  属性名来进行获取 实列对象console.log(this); }render() {return (<div><A msg={'2r3242344'} ref={this.getRef}></A></div>)}
}

结果：

ref不能直接作用于函数组件

函数是没有实例，没有声明周期，ref 不能直接作用于函数组件，如果需要，那么需要使用ref 转发

总结何时使用 Refs

下面是几个适合使用 refs 的情况：

管理焦点，文本选择或媒体播放。
触发强制动画。
集成第三方 DOM 库。
避免使用 refs 来做任何可以通过声明式实现来完成的事情。

react 组件进阶之 ref （ts 版本）相关推荐

前端学习-React组件进阶
一.组件通讯介绍组件是独立且封闭的单元,默认情况下,只能使用组件自己的数据.在组件化过程中,我们将一个完整的功能拆分成多个组件,以更好的完成整个应用的功能.而在这个过程中,多个组件之间不可避免的要共 ...
React组件进阶--组件通讯介绍，组件的 props特点，组件通讯的三种方式子到父，父到子，兄弟到兄弟组件，Context，回顾练习
1.组件通讯介绍组件是独立且封闭的单元,默认情况下,只能使用组件自己的数据(state). 在组件化过程中,我们将一个完整的功能拆分成多个组件,以更好的完成整个应用的功能. 而在这个过程中,多个组 ...
【前端框架】react框架第四章 react组件进阶
目录 1. 组件的props 特点 2. 组件通迅的三种方式父组件传递数据给子组件子组件传递数据组父组件兄弟组件 3. Context Context使用步骤 4. props深入 props校 ...
React Redux 进阶: Hooks 版本用法 Custom Context 局部 Store 实践
React Redux 进阶: Hooks 版本用法 & Custom Context 局部 Store 实践文章目录 React Redux 进阶: Hooks 版本用法 & Cu ...
react 子组件ref_React中Ref 的使用方法详解
本文实例讲述了React中Ref 的使用方法.分享给大家供大家参考,具体如下: React中Ref 的使用 React v16.6.3 在典型的React数据流中,props是父组件与其子组件交互的唯 ...
React组件（进阶--生命周期）
目录一.生命周期 - 概述二.生命周期 - 挂载阶段三.生命周期 - 更新阶段四.生命周期 - 卸载阶段文章推荐: 1.JSX基础(入门) 2.React组件(入门) 3.React组件动状 ...
react native loading动画_TypeScript for React (Native) 进阶
I. 为何要用TypeScript 我们公司在德国还有个团队. 我们这次要接他们的一个库. 其中的一个API要求我们传入参数, 这个API是这样定义的: /** * @param {Object} i ...
mathcal 对应于什么库_如何快速构建React组件库
前言俗话说:"麻雀虽小,五脏俱全",搭建一个组件库,知之非难,行之不易,涉及到的技术方方面面,犹如海面风平浪静,实则暗礁险滩,处处惊险- 目前团队内已经有较为成熟的 Vue 技术 ...
不挂载组件渲染_让你的 React 组件性能跑得再快一点「实践」
作者:天泽转发链接:https://www.zoo.team/article/react-render 性能和渲染(Render)正相关 React 基于虚拟 DOM 和高效 Diff 算法的完美配 ...
react打包后图片丢失_如何快速构建React组件库
俗话说:"麻雀虽小,五脏俱全",搭建一个组件库,知之非难,行之不易,涉及到的技术方方面面,犹如海面风平浪静,实则暗礁险滩,处处惊险〜目前团队内已经有较为成熟的 Vue 技术栈的 ...

react 组件进阶之 ref （ts 版本）

含义以及使用方法

ref作用于内置的html组件

使用string 方式

使用函数方式

使用react对象方式

ref作用于类组件，得到的将是类的实例

ref不能直接作用于函数组件

总结何时使用 Refs

react 组件进阶之 ref （ts 版本）相关推荐

最新文章

热门文章

react 组件 进阶之 ref （ts 版本）

含义以及使用方法

ref作用于内置的html组件

使用string 方式

使用函数方式

使用react对象方式

ref作用于类组件，得到的将是类的实例

ref不能直接作用于函数组件

总结 何时使用 Refs

react 组件 进阶之 ref （ts 版本）相关推荐

最新文章

热门文章

react 组件进阶之 ref （ts 版本）

总结何时使用 Refs

react 组件进阶之 ref （ts 版本）相关推荐