react开发教程（六）React与DOM

call_me_R 发布于2019-08-21 11:51 / 3136人阅读

摘要：当组件装载完毕时，就会被调用。它可以是一个回调函数，这个回调函数会在组件被挂载后立即执行。也可以是一个字符串吧放到原生的组件中，我们可以通过获取到节点而如果吧放到组件上获取到的就是组件的实例上一篇开发教程五生命周期下一篇开发教程七事件系统

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就会指向这个实例。
它可以是一个回调函数，这个回调函数会在组件被挂载后立即执行。

this.textInput = ref} />

也可以是一个字符串

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

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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87183.html

react开发教程（七）React事件系统

摘要：按钮中使用原生事件中提供了很好的合成事件系统，但有时候也需要用到原生事件。而使用合成事件系统时则不需要，因为内部以及处理了。事件类型键盘事件焦点事件表单事件鼠标事件选择事件触摸事件事件动画事件图像事件媒体事件剪贴板事件上一篇开发教程六与事件系统 Virtual DOM在内存中是以对象的形式存在的，如果想要在这些对象上添加事件的话，React是基于Virtual DOM实现了一个合成事...

walterrwu 2019-08-21 11:50 评论0 收藏0
react开发教程（五）生命周期

摘要：在组件的整个生命周期中，随着该组件的或者发生改变，其表现也会有相应的变化。一个组件的生命周期分为三个部分实例化存在期和销毁时。该方法会创建一个虚拟，用来表示组件的输出。渲染组件上一篇开发教程四数据流下一篇开发教程六与在组件的整个生命周期中，随着该组件的props或者state发生改变，其DOM表现也会有相应的变化。一个组件就是一个状态机，对于特定地输入，它总返回一致的输出。一个Re...

freecode 2019-08-20 15:59 评论0 收藏0