react开发教程（六）React与DOM

最新推荐文章于 2024-12-08 20:57:29 发布

weixin_33935777

最新推荐文章于 2024-12-08 20:57:29 发布

阅读量251

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000010593738

本文详细介绍了 React 中的 ReactDOM 模块，包括 findeDOMNode、render 和 unstable_renderSubtreeIntoContainer 函数的用法及示例代码。此外还讲解了 refs 的应用场景和实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ReactDOM

findeDOMNode

语法：DOMElement findDOMNode(ReactComponent component)
描述：获取改组件实例相对应的DOM节点案例：
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
    componentDidMount() {
        const dom = ReactDOM.findDOMNode(this)
    }
    
    render() {}
}
render

语法：
ReactComponent render(
    ReactElement element,
    DOMElement container,
    [function callback]
)
描述：改方法吧元素挂载到container中，并且返回element的实例（即refs的引用）。当组件装载完毕时，callback就会被调用。
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
    componentDidMount() {
        const dom = ReactDOM.findDOMNode(this)
    }
    
    render() {}
}
unstable_renderSubtreeIntoContainer

语法：
ReactComponent unstable_renderSubtreeIntoContainer(
      parentComponent component,
    ReactElement element,
    DOMElement container,
    [function callback]
)
描述：更新组件到传入的DOM节点上，可以使用它完成在组件内部实现跨组件的DOM操作
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
    componentDidMount() {
        const dom = ReactDOM.findDOMNode(this)
    }
    
    render() {}
}

refs

它是react组件中非常特殊的prop，可以附加到任何一个组件上，组件调用是会新建一个该组件的实例，而refs就会指向这个实例。
它可以是一个回调函数，这个回调函数会在组件被挂载后立即执行。

<input type="text" ref={(ref)=>this.textInput = ref} />

也可以是一个字符串

<Comp ref="myComp"/>

吧refs放到原生的DOM组件中，我们可以通过refs获取到DOM节点；而如果吧refs放到React组件上获取到的就是组件的实例

上一篇：react开发教程（五）生命周期

下一篇：react开发教程（七）React事件系统