摘要：并不是組件中的任何地方都能夠使用獲取結(jié)構(gòu)，只對掛載后的組件生效。組件的一個特殊屬性，接受一個回調(diào)函數(shù)作為參數(shù)。反之，則表示卸載失敗。再看一下這段代碼這個回調(diào)函數(shù)其實是沒有參數(shù)的，但是，當(dāng)方法變成異步方法之后，說不定就會向其注入一些參數(shù)了。

在react的組件的開發(fā)過程中，一般來說，我們并不會真正的去操作dom。只有在頂層組件的渲染的過程中，我們借助ReactDOM.render()方法，將我們的應(yīng)用渲染到html結(jié)構(gòu)中。然而，由于react框架自身的限制，在某些特定的情況下，我們必須要手動的操作dom。這時，我們就需要使用ReactDOM了。

先說一個小事，在react 0.14版本的時候，ReactDOM就從react的核心庫中分離出來了。所以，根據(jù)你使用的react版本的不同，我們引入ReactDOM的方式也就不一樣?？偠灾簿拖旅鎯煞N基本的方法。

以下所有的代碼，都會通過EcmaScript6進行編寫

React < 0.14之前的版本

import React, { ReactDOM } from "react"

React >= 0.14之后的版本

yarn add react-dom

import ReactDOM from "react-dom"

ReactDOM給我們提供了僅僅三個api。所以相對來說學(xué)習(xí)起來還是比較簡單的。

這三個api 如下：

ReactDOM.findDOMNode

ReactDOM.unmountComponentAtNode

ReactDOM.render

下面，我們就簡單的扯扯，這三個api我們應(yīng)該怎么使用。

在絮叨這個api之前啊，先扯兩個你應(yīng)該知道的東西。

Q：DOM被真正添加到HTML中是什么時候？

A：生命周期方法componentDidMount和componentDidUpdate

Q：還有沒有其他獲取DOM的方法

A：有，比如this.refs。

說這干啥，就是為了告訴你應(yīng)該什么時候去獲取DOM。不要以為在任何地方都能獲取，否則更多等待你的就是error * 3。

好了，下面我們就好好扯扯findDOMNode該怎么用。

先看一下接口定義：

DOMElement findDOMNode(ReactComponent)

簡單的說就是：給它一點綠蔭(ReactComponent)，還你一片森林(DOM Tree)。

比如，下面這個小demo，在組件加載完成的時候，獲取真正的dom結(jié)構(gòu)。

import React from "react";
import {findDOMNode, render} from "react-dom";

class App extends React.Component {
    constructor(props) {
        super(props)
        console.info("GET DOM IN %c constructor", "color:red")
        console.log(findDOMNode(this))
    }

    componentWillMount() {
        console.info("GET DOM IN %c componentWillMount", "color:red")
        console.log(findDOMNode(this))
    }

    componentDidMount() {
        console.info("GET DOM IN %c componentDidMount", "color:red")
        console.log(findDOMNode(this))
    }

    render() {
        return (
            

                

                    
The menu
                    
The person information
                
                

                    The content wrapper
                
                
            
        )
    }
}

render(, document.getElementById("root"));

哎呀，慘不忍睹。

所以，把constructor的findDOMNode操作去掉，你會看到：

可以看出，在componentWillMount中findDOMNode的操作結(jié)果是null。

但是，你會不會想，不是吧，返回null不能完全說明我沒獲取到元素啊。的確，比如：

import React from "react";
import {findDOMNode, render} from "react-dom";

class App extends React.Component {
    constructor(props) {
        super(props)
        // console.info("GET DOM IN %c constructor", "color:red")
        // console.log(findDOMNode(this))
    }

    componentWillMount() {
        console.info("GET DOM IN %c componentWillMount", "color:red")
        console.log(findDOMNode(this))
    }

    componentDidMount() {
        console.info("GET DOM IN %c componentDidMount", "color:red")
        console.log(findDOMNode(this))
    }

    render() {
        return null
    }
}

render(, document.getElementById("root"));

如你所愿，findDOMNode的操作結(jié)果都是null。但是，對比之中你應(yīng)該清楚兩件事。

并不是組件中的任何地方都能夠使用findDOMNode獲取DOM結(jié)構(gòu)，findDOMNode只對掛載后的組件生效。

如果組件的render函數(shù)返回null，則在任何地方使用findDOMNode的結(jié)果都是null。

ReactDOM.findDOMNode with ref

先扯兩句ref。ref－－組件的一個特殊屬性，接受一個回調(diào)函數(shù)作為參數(shù)。兩種情況：

給原生的html結(jié)構(gòu)添加ref屬性，其參數(shù)就是其對應(yīng)的DOM元素。這時候，直接使用即可。

給class聲明的組件添加ref屬性的時候，參數(shù)則是這個已經(jīng)加載完成的react組件。這時候，就可以和findDOMNode來個親密碰撞了。

如下面的操作：

import React from "react";
import {findDOMNode, render} from "react-dom";

class FieldInput extends React.Component {
    render() {
        return 
    }
}

class App extends React.Component {
    constructor(props) {
        super(props)
    }

    componentDidMount() {
        console.info("The value of %c this.input", "color:red")
        console.log(this.input)
        console.info("The value of %c findDOMNode(this.input)", "color:red")
        console.log(findDOMNode(this.input))
    }

    render() {
        return  { this.input = input }}
        />
    }
}

render(, document.getElementById("root"));

結(jié)果，就是你想的那樣美好。

最后呢，記住一句話，findDOMNode不能用在函數(shù)式組件中哦

來先把接口的名稱拆分一下：

unmount: 卸載

component: 組件

at: 在

node: 節(jié)點(DOM元素)

意思就是，從DOM元素中卸載已經(jīng)掛載的組件，除此呢，還會清除它的事件處理器和state。來，看下面的代碼：

import React, { Component } from "react";
import {findDOMNode, render, unmountComponentAtNode} from "react-dom";

class FieldOne extends Component {
    componentWillUnmount() {
        console.log("%c FieldOne will unmount")
    }
    render() {
        return 
The One
    }
}

class FieldTwo extends Component {
    componentWillUnmount() {
        console.log("%c FieldTwo will unmount")
    }
    render() {
        return 
The Two
    }
}


class App extends Component {
    constructor(props) {
        super(props)
    }
    componentDidMount() {
        render(, this.fieldOne)
    }
    handleClick() {
        console.log(unmountComponentAtNode(this.fieldOne))
        console.log(unmountComponentAtNode(this.fieldTwo))
    }
    render() {
        return (
            

                

                    REMOVE COMPONENT
                
               
 this.fieldOne = fieldOne}>
               
 this.fieldTwo = fieldTwo}>
                    
               
            
        )
    }
}

render(, document.getElementById("root"))

簡單的分析這段代碼之前，先扯一個小的問題。react中的組件渲染有幾種方式？一般來說，兩種：

通過下面render函數(shù)，將組件渲染到DOM結(jié)構(gòu)中。

由React自身渲染

這兩種渲染方式，分別對應(yīng)于上述代碼中的FieldOne和FieldTwo組件的渲染方式。所以，你必須先搞明白一件事情，unmountComponentAtNode并不能卸載所有已經(jīng)掛載到DOM中的組件，它只能卸載通過render函數(shù)渲染的組件。

所以，當(dāng)我們點擊button按鈕的時候，會在控制臺中看到，下面這些東西。

其中，當(dāng)unmountComponentAtNode的返回值為true的時候，表示卸載成功。反之，則表示卸載失敗。
下面是點擊按鈕之前的DOM結(jié)構(gòu)的對比情況。
點擊前

點擊后

react最讓人爽的地方就是，接口名稱的語意化很明顯。所以，從字面意義上我們就能知道render是干啥的。干啥？用于渲染。

先簡單的了解下接口定義。

ReactDOM.render(
    ReactComponent,
      DOMElement,
      [callback]
)

一句話概括：

渲染一個ReactComponent，將其作為DOMElement的innerHTML。

記住兩件事：

這個方法只會進行一次整體更新

第一次渲染后，會將DOMElement的innerHTML用ReactComponent的實例所替換，之后的渲染，便采用高效的diff算法進行更新。

幾個問題：

這個方法是同步的還是異步的？

這個方法有沒有返回值？

callback函數(shù)，有參數(shù)嗎？

來一起扯扯：

先看這個代碼:

import React from "react";
import {findDOMNode, render} from "react-dom";

// 函數(shù)式組件一
const FieldInput = (props) => {
    return (
        

            
        
    )
}

class App extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            

                
The header
                
            
        )
    }
}

console.log("%c begin render", "color:red")

const baseComponent = render(, document.getElementById("root"))
console.log(baseComponent)

console.log("%c end render", "color:red")

結(jié)果呢，是這樣的。不錯，同步調(diào)用的。而且返回值就是我們的根組件的實例。

挺好的，可是，官方有聲明：

所以嘞，我們應(yīng)該避免使用這種方式獲取根組件實例(一般也不會采用這種方法操作根組件實例，只需要知道有這么回事就好了)。

再看一下這段代碼：

import React from "react";
import {findDOMNode, render} from "react-dom";

class App extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            

               test
            
        )
    }
}

render(, document.getElementById("root"), (...args) => {
    console.log(args)  // []
})

這個回調(diào)函數(shù)其實是沒有參數(shù)的，但是，當(dāng)render方法變成異步方法之后，說不定就會向其注入一些參數(shù)了。具體的，拭目以待。