React中获取DOM节点的两种方法

React提供的获取DOM元素的方法有两种，一是react-dom中的findDOMNode()，二是refs。

findDOMNode通常用于React组件的引用，其语法如下：

当组件被渲染到DOM中后，findDOMNode会返回该组件实例对应的DOM节点。

示例：

注：如果render()中返回null，那么findDOMNode()也返回null。findDOMNode只对已经挂载的组件有效。

refs多用于React组件内子组件的引用。使用ref获取DOM节点有两种情况：

（1）子组件为原生DOM组件：获取到的就是这个DOM节点。如下例，thisinput就获取到了当前 <input /> 节点。

通过thismyInput，我就可以对 <input /> 进行一系列 *** 作，比如让输入框聚焦：

注：refs也支持字符串格式：

通过thisrefsmyInput获取到节点。

（2）子组件为React组件，比如 <MyInput/> ：获得的就是 <MyInput/> 的实例，因此就可以调用 <MyInput/> 的实例方法。

示例：

注：调用 <Comp /> 实例方法的方式：thisrefsmyCompmethod()，但并不建议这种调用方式。

课程目标

理解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等等。

授课思路

根据 DOM，HTML 文档中的每个成分都是一个节点。

HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。

以上就是关于React中获取DOM节点的两种方法全部的内容，包括:React中获取DOM节点的两种方法、ref与DOM-findDomNode-unmountComponentAtNode、请问解析DOM文档中的Node是什么意思等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！