react開發教程（六）React與DOM

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事件系統