React入門(mén)0x016: 訪問(wèn)Dom

NeverSayNever 發(fā)布于2019-08-23 13:50 / 1958人閱讀

摘要：概述不到必要不要在中訪問(wèn)，嘗試使用的思想去解決問(wèn)題。當(dāng)然，必要的時(shí)候還是可以的，比如某些依賴(lài)的組件時(shí)機(jī)在中，并不是任何時(shí)候都可以訪問(wèn)的，需要講究時(shí)機(jī)。

0x000 概述

不到必要不要在React中訪問(wèn)Dom，嘗試使用React的思想去解決問(wèn)題。當(dāng)然，必要的時(shí)候還是可以的，比如某些依賴(lài)Dom的組件

0x001 時(shí)機(jī)

在React中，并不是任何時(shí)候都可以訪問(wèn)Dom的，需要講究時(shí)機(jī)。因?yàn)?b>React中的組件存在生命周期，必須要在Dom 掛載之后的生命周期才能訪問(wèn)到Dom，也就是componetnDidMount之后

栗子：

class App extends React.Component {
    constructor() {
        super()
        console.log("constructor", document.getElementById("cool"))
    }

    componentDidMount() {
        console.log("componentDidMount", document.getElementById("cool"))
    }

    render() {
        return 
            Dom
        
    }
}

輸出：

0x002 訪問(wèn)方式

傳統(tǒng)方式
傳統(tǒng)方式就是上面栗子中那般，直接在componentDidMount之后使用傳統(tǒng)方式訪問(wèn)

refs
ref有兩種方式

ref屬性綁定變量，這種方式需要先調(diào)用React.createRef創(chuàng)建一個(gè)ref，然后在componentDidMount之后的生命周期中使用this.myRef.current來(lái)訪問(wèn)。

class App extends React.Component {
    constructor() {
        super()
        this.myRef = React.createRef();
    }

    componentDidMount() {
        const node = this.myRef.current;
        console.log("componentDidMount",node)
    }

    render() {
        return 
            Dom
        
    }
}

效果

綁定函數(shù)，更簡(jiǎn)約一點(diǎn)，可以直接使用myRef訪問(wèn)

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

    componentDidMount() {
        console.log("componentDidMount",this.myRef)
    }

    render() {
        return this.myRef=e}>
            Dom
        
    }
}

效果

0x003 總結(jié)

不到必要不要在React中訪問(wèn)Dom，嘗試使用React的思想去解決問(wèn)題。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/99645.html

相關(guān)文章

es6基礎(chǔ)0x016：生成器函數(shù)

摘要：概述其實(shí)前幾章我都不知道怎么寫(xiě)，因?yàn)樗麄兛偸巧婕暗揭恍┍容^深的東西，比如可迭代對(duì)象生成器迭代器之類(lèi)的東西，等寫(xiě)完這個(gè)系列，再好好整理一下這些東西可能會(huì)好一點(diǎn)，現(xiàn)在整理到哪兒就寫(xiě)到哪兒吧語(yǔ)法使用作為聲明標(biāo)識(shí)符，表示這是一個(gè)生成器函數(shù)是函數(shù)名是 0x000 概述其實(shí)前幾章我都不知道怎么寫(xiě)，因?yàn)樗麄兛偸巧婕暗揭恍┍容^深的東西，比如可迭代對(duì)象、生成器、迭代器之類(lèi)的東西，等寫(xiě)完這個(gè)系列，再好好...

ghnor 2019-08-23 13:11 評(píng)論0 收藏0
React要點(diǎn)入門(mén)學(xué)習(xí)總結(jié)

摘要：上面代碼中，通過(guò)為組件指定事件的回調(diào)函數(shù)，確保了只有等到真實(shí)發(fā)生事件之后，才會(huì)讀取屬性。七表單代碼九要點(diǎn)文本輸入框的值，不能用讀取，而要定義一個(gè)事件的回調(diào)函數(shù)，通過(guò)讀取用戶輸入的值。一.JSX簡(jiǎn)介 JSX即JavaScript XML,一種在React組件內(nèi)部構(gòu)建標(biāo)簽的類(lèi)XML語(yǔ)法。在不使用JSX的情況下，React程序中創(chuàng)建DOM是這樣的： //v0.11 React.DOM.h1...

Towers 2019-08-22 12:46 評(píng)論0 收藏0
Router入門(mén)0x204: react-route簡(jiǎn)單栗子

摘要：概述這一章仔細(xì)講一講的使用栗子簡(jiǎn)單使用源碼簡(jiǎn)單使用首頁(yè)文章我的首頁(yè)文章我的效果帶導(dǎo)航激活效果源碼帶導(dǎo)航效果首頁(yè)文章我的首頁(yè)文章我的效果說(shuō)明增強(qiáng)版，如果當(dāng)前路由命中，將會(huì)啟用或者。 0x000 概述這一章仔細(xì)講一講 react-route 的使用栗子 0x001 簡(jiǎn)單使用源碼 import React from react import ReactDom from react-d...

番茄西紅柿 2019-08-23 12:16 評(píng)論0 收藏0
Router入門(mén)0x201: 從 URL 到 SPA

摘要：的全稱(chēng)是統(tǒng)一資源定位符英文，可以這么說(shuō)，是一種標(biāo)準(zhǔn)，而網(wǎng)址則是符合標(biāo)準(zhǔn)的一種實(shí)現(xiàn)而已。渲染器，將組件渲染到頁(yè)面上。 0x000 概述從這一章開(kāi)始就進(jìn)入路由章節(jié)了，并不直接從如何使用react-route來(lái)講，而是從路由的概念和實(shí)現(xiàn)來(lái)講，達(dá)到知道路由的本質(zhì)，而不是只知道如何使用react-route庫(kù)的目的，畢竟react-route只是一個(gè)庫(kù)，是路由的一個(gè)實(shí)現(xiàn)而已，而不是路由本身。 ...

honmaple 2019-08-26 12:20 評(píng)論0 收藏0
React入門(mén)0x007: 生命周期概念

摘要：概述上一章只是稍微了解了一下和相關(guān)的簡(jiǎn)單用法，這一章需要講一下組件的生命周期。生命周期的概念這玩意似乎很高大上，其實(shí)就是一個(gè)假概念罷了，直接來(lái)實(shí)現(xiàn)一個(gè)類(lèi)似的吧。 0x000 概述上一章只是稍微了解了一下state和setState相關(guān)的簡(jiǎn)單用法，這一章需要講一下組件的生命周期。 0x001 生命周期的概念這玩意似乎很高大上，其實(shí)就是一個(gè)假概念罷了，直接來(lái)實(shí)現(xiàn)一個(gè)類(lèi)似的吧。大凡事物從...

Blackjun 2019-08-23 11:30 評(píng)論0 收藏0