react中ref的四种用法

1字符串

通过 thisrefsdemo 来引用真实dom的节点,建议不要使用它，因为字符串引用有一些问题，被认为是遗留问题，很可能会在未来的某个版本中删除。新版好像不推荐这样使用了

<input  ref="demo" type ="text" placeholder='点击之后提示数据'/>

2回调函数(内联形式)

回调函数就是在dom节点或组件上挂载函数，函数的入参是dom节点或组件实例，达到的效果与字符串形式是一样的，都是获取其引用。(实际开发中使用的比较多)

 <input ref={(currentNode)=>{thisinput1=currentNode}} type="text" placeholder='点击之后提示数据'/> 

3回调函数(外联形式)

<input ref={thissaveInput} type="text" placeholder='点击之后提示数据'/>

saveInput=(current)=>{

    consolelog(current)

    thisinput1=current

  }

4ReactcreateRef()

ReactcreateRef()是React 163之后引入的新API。如果您使用的是早期版本的React，我们建议您使用回调引用。Refs是使用属性创建的，ReactcreateRef()并通过ref属性附加到React元素。在构造组件时，通常将Refs分配给实例属性，以便可以在整个组件中引用它们。

<input ref={thismyRef1} type="text" placeholder='点击提示createRef'/>

myRef1= ReactcreateRef() //专人专用每次都只能一次,

myRef2= ReactcreateRef() //专人专用每次都只能一次,

获取input的值:consolelog(thismyRefcurrentvalue)

React 官方文档中如此声明："如果你目前还在使用 thisrefstextInput 这种方式访问 refs ，我们建议用回调函数或 createRef API 的方式代替。" 为何如此糟糕？

自行百度吧、因为我也不知道!!!!

以上就是react中ref一些总结、希望能帮到一些同学们

React提供的这个ref属性，表示为对组件真正实例的引用，其实就是ReactDOMrender()返回的组件实例；

ref 可以挂载到组件上也可以是dom元素上；

Q：ref属性可以设置为一个回调函数

React 支持给任意组件添加特殊属性。ref 属性接受一个回调函数，它在组件被加载或卸载时会立即执行。

Q：当给组件、H5标签添加 ref 属性后，此实例只能在当前组件中被访问到，父组件的 refs 中是没有此引用的，例如：

Q：获取ref引用组件对应的dom节点

不管ref设置值是回调函数还是字符串，都可以通过ReactDOMfindDOMNode(ref)来获取组件挂载后真正的dom节点。

但是对于html元素使用ref的情况，ref本身引用的就是该元素的实际dom节点，无需使用ReactDOMfindDOMNode(ref)来获取，该方法常用于React组件上的ref。

Q： thisrefs 和 ReactDOMfindDOMNode 的区别

Q：新版本的React已经不推荐我们使用ref string转而使用ref callback

课程目标

理解react的框架使用中，真实dom存在的意义。

使用真实dom和使用虚拟dom的场景。

灵活掌握并能够合理使用 *** 作真实dom的方法。

知识点

react中提供了ref这个属性来获取原生的dom节点，使用方式：在虚拟dom中添加ref属性，即可在组件实例的refs属性中获取该真实dom节点。由于组件实例化的时候，真实dom节点是在最后才生成的。所以，我们获取真实dom节点应该是在componentDidMount这个生命周期中。

class HelloWorld extends Component{

render(){

return <div>

<h1 ref="h">hello world</h1>

</div>

}

componentDidMount(){

consolelog(thisrefsh); // 打印的是h1这个dom节点。

}

}

ref也可以使用在组件标签上使用，此时获取的是该组件标签的组件实例。如下：

class Button extends Component{

render(){

return <button>确定</button>

}

}

let btn = ReactcreateElement()

propsref function

propsref(btn)

class HelloWrold extends Component{

getBtnThis = btn => {

consolelog(btn) // Button组件的第二个组件实例

}

render(){

return <div>

<Button ref="btn"></Button>

/

let btn = new Button()

btnref === typeof function

btnref(btn)

}

findDomNode这个方法可以根据组件实例（每个组件实例都对应的有一段dom节点获取该组）件实例所对应的真实dom节点。该方法的使用如下

/

context 一个组件的组件实例

dom 该组件实例所对应的真实dom节点。

/

const dom = ReactfindDomNode(context);

unmountComponentAtNode该方法的作用是：从 DOM 中移除已经挂载的 React 组件，清除相应的事件处理器和 state。如果在 container 内没有组件挂载，这个函数将什么都不做。如果组件成功移除，则返回 true；如果没有组件被移除1，则返回 false。

const result = ReactunmountComponentAtNode(DOMElement container)

掌握在什么情况下需要真实的dom节点；react的虚拟dom不能实现的原生dom的api的情况，比如：文本框自动聚焦，音频视频相关的api，获取元素的宽高和位置等。基本原则是：能不用真实dom节点尽量不用，实在不能用虚拟dom的时候，才使用真实dom节点。再一种情况是，现有的一些库是针对dom *** 作而构建的，那么想要把这些库和react结合在一起，就必须要使用真实dom节点，比如swiper betterScroll echarts等等。

授课思路

ref是React提供的用来 *** 纵React组件实例或者DOM元素的接口。

ref可以作用于：

React组件有两种定义方式：

将ref回调函数作用于某一个React组件，此时回调函数会在当前组件被实例化并挂载到页面上才会被调用。

ref回调函数被调用时，会将当前组件的 实例 作为参数传递给函数。

首先，能够使用ref的child Component必然是一个类，如果要实现，必然要破坏child component的封装性，直接到child component中获取其中DOM。

Forwarding Refs，ReactforwardRef类似一个HOC，参数是一个 function ，这个function包含两个参数props和ref，返回Component，可以将这个ref用于任何子组件或者DOM

注意ReactforwardRef参数必须是function，而这个API通常用来解决HOC中丢失ref的问题。

我们使用ref的时候，正常理解是，ref的回调函数在组件被mount的时候调用一次，将组件的ref赋值个Parent Component的某一个属性，自此之后再不会被重新调用，除非赋了ref的组件被移除。

但是如果使用inline function 作为ref回调函数：

所以尽量避免使用inline function作为Component props

在JavaScript中需要通过documentquerySelector("#demo")来获取dom节点，然后再获取这个节点的值。在Vue中，我们不用获取dom节点，元素绑定ref之后，直接通过this$refs即可调用，这样可以减少获取dom节点的消耗。

this$refs是一个对象，持有当前组件中注册过 ref特性的所有 DOM 元素和子组件实例

当ref和v-for一起使用时，获取到的引用将会是一个数组，包含循环数组源

1子组件code：

2父组件code:

获取DOM或者组件实例可以使用ref属性，写法和vue20需要区分开 。

总结：

1Vue2中可以通过ref直接 *** 作单个DOM和组件 this$refsinfoinnerHTML

2Vue2中可以批量通过ref *** 作DOM和组件 this$refsfruit[0]innerHTML

vue30里面模板的ref是跟着定义走的（先定义再使用， 模板中的名字和定义的名字要一致 ）先返回再使用

vue20里面的使用是跟着模板走（先模板中用，然后根据模板使用ref， 获取DOM的ref要和模板的一样 ）

总结： *** 作单个DOM或者组件的流程

1定义一个响应式变量

2把变量返回给模板使用

3模板中绑定上述返回的数据

4可以通过info变量 *** 作DOM或者组件实例

1定义 *** 作DOM的函数----通过形参获取单个DOM元素

总结： ref批量 *** 作元素的流程

1定义一个 *** 作DOM的函数

2把该函数绑定到模板上（ 必须动态绑定 ）

3在函数中可以通过参数得到单个元素，这个元素一般可以放到数组中

4通过上述数组即可 *** 作批量的元素

需求是这样的，一个聊天窗口，对话框你一句我一句，然后这个对方的回答可能很长，这个时候要检测对方的回答渲染上去后，对应的那条话dom高度有没有超出指定高度，如果超出，就给他多余部分隐藏，并且那条话显示查看更多的按钮，

一开始想的是每一句对话都用各自的ref，然后useEffect每次都去检测ref上的高度，但是其实这样不对，ref如果先绑上了，ref上的属性再变动，是不会触发重新render的也就没法检测到，

看到一个大佬的博客

>

<video ref="videoEle" class="video_channel" width="100%" height="auto" :poster="list[0]img"> <source :src="list[0]video"> </video>

<script>

// ref就是获取Dom, 只是把这个元素获取以后帮到$refs对象里了

Vue$refs['video']play();

</script>

以上就是关于react中ref的四种用法全部的内容，包括:react中ref的四种用法、React之ref、ref与DOM-findDomNode-unmountComponentAtNode等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！