ReactDOM You Should

mo0n1andin 發(fā)布于2019-08-20 19:07 / 750人閱讀

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

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

先說(shuō)一個(gè)小事，在react 0.14版本的時(shí)候，ReactDOM就從react的核心庫(kù)中分離出來(lái)了。所以，根據(jù)你使用的react版本的不同，我們引入ReactDOM的方式也就不一樣。總而言之，也就下面兩種基本的方法。

以下所有的代碼，都會(huì)通過(guò)EcmaScript6進(jìn)行編寫(xiě)

React < 0.14之前的版本

import React, { ReactDOM } from "react"

React >= 0.14之后的版本

yarn add react-dom

import ReactDOM from "react-dom"

ReactDOM的API

ReactDOM給我們提供了僅僅三個(gè)api。所以相對(duì)來(lái)說(shuō)學(xué)習(xí)起來(lái)還是比較簡(jiǎn)單的。

這三個(gè)api 如下：

ReactDOM.findDOMNode

ReactDOM.unmountComponentAtNode

ReactDOM.render

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

ReactDOM.findDOMNode

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

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

A：生命周期方法componentDidMount和componentDidUpdate

Q：還有沒(méi)有其他獲取DOM的方法

A：有，比如this.refs。

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

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

先看一下接口定義：

DOMElement findDOMNode(ReactComponent)

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

比如，下面這個(gè)小demo，在組件加載完成的時(shí)候，獲取真正的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
                
                
                    The footer
                
            
        )
    }
}

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

哎呀，慘不忍睹。

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

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

但是，你會(huì)不會(huì)想，不是吧，返回null不能完全說(shuō)明我沒(méi)獲取到元素啊。的確，比如：

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。但是，對(duì)比之中你應(yīng)該清楚兩件事。

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

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

ReactDOM.findDOMNode with ref

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

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

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

如下面的操作：

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ù)式組件中哦

ReactDOM.unmountComponentAtNode

來(lái)先把接口的名稱拆分一下：

unmount: 卸載

component: 組件

at: 在

node: 節(jié)點(diǎn)(DOM元素)

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

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 (
            
                
                    
                
                this.fieldOne = fieldOne}>
                this.fieldTwo = fieldTwo}>
                    
               
            
        )
    }
}

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

簡(jiǎn)單的分析這段代碼之前，先扯一個(gè)小的問(wèn)題。react中的組件渲染有幾種方式？一般來(lái)說(shuō)，兩種：

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

由React自身渲染

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

所以，當(dāng)我們點(diǎn)擊button按鈕的時(shí)候，會(huì)在控制臺(tái)中看到，下面這些東西。

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

點(diǎn)擊后

ReactDOM.render

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

先簡(jiǎn)單的了解下接口定義。

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

一句話概括：

渲染一個(gè)ReactComponent，將其作為DOMElement的innerHTML。

記住兩件事：

這個(gè)方法只會(huì)進(jìn)行一次整體更新

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

幾個(gè)問(wèn)題：

這個(gè)方法是同步的還是異步的？

這個(gè)方法有沒(méi)有返回值？

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

來(lái)一起扯扯：

先看這個(gè)代碼:

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é)果呢，是這樣的。不錯(cuò)，同步調(diào)用的。而且返回值就是我們的根組件的實(shí)例。

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

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

再看一下這段代碼：

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)  // []
})

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