React入門0x016: 訪問Dom

NeverSayNever 發布于2019-08-23 13:50 / 1911人閱讀

摘要：概述不到必要不要在中訪問，嘗試使用的思想去解決問題。當然，必要的時候還是可以的，比如某些依賴的組件時機在中，并不是任何時候都可以訪問的，需要講究時機。

0x000 概述

不到必要不要在React中訪問Dom，嘗試使用React的思想去解決問題。當然，必要的時候還是可以的，比如某些依賴Dom的組件

0x001 時機

在React中，并不是任何時候都可以訪問Dom的，需要講究時機。因為React中的組件存在生命周期，必須要在Dom 掛載之后的生命周期才能訪問到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 訪問方式

傳統方式
傳統方式就是上面栗子中那般，直接在componentDidMount之后使用傳統方式訪問

refs
ref有兩種方式

ref屬性綁定變量，這種方式需要先調用React.createRef創建一個ref，然后在componentDidMount之后的生命周期中使用this.myRef.current來訪問。

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

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

    render() {
        return 
            Dom
        
    }
}

效果

綁定函數，更簡約一點，可以直接使用myRef訪問

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

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

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

效果

0x003 總結

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

GPU云服務器云服務器 react dom cdn react-dom 訪問DOM 訪問控制快速入門

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99645.html

es6基礎0x016：生成器函數

摘要：概述其實前幾章我都不知道怎么寫，因為他們總是涉及到一些比較深的東西，比如可迭代對象生成器迭代器之類的東西，等寫完這個系列，再好好整理一下這些東西可能會好一點，現在整理到哪兒就寫到哪兒吧語法使用作為聲明標識符，表示這是一個生成器函數是函數名是 0x000 概述其實前幾章我都不知道怎么寫，因為他們總是涉及到一些比較深的東西，比如可迭代對象、生成器、迭代器之類的東西，等寫完這個系列，再好好...

ghnor 2019-08-23 13:11 評論0 收藏0
React要點入門學習總結

摘要：上面代碼中，通過為組件指定事件的回調函數，確保了只有等到真實發生事件之后，才會讀取屬性。七表單代碼九要點文本輸入框的值，不能用讀取，而要定義一個事件的回調函數，通過讀取用戶輸入的值。一.JSX簡介 JSX即JavaScript XML,一種在React組件內部構建標簽的類XML語法。在不使用JSX的情況下，React程序中創建DOM是這樣的： //v0.11 React.DOM.h1...

Towers 2019-08-22 12:46 評論0 收藏0
Router入門0x204: react-route簡單栗子

摘要：概述這一章仔細講一講的使用栗子簡單使用源碼簡單使用首頁文章我的首頁文章我的效果帶導航激活效果源碼帶導航效果首頁文章我的首頁文章我的效果說明增強版，如果當前路由命中，將會啟用或者。 0x000 概述這一章仔細講一講 react-route 的使用栗子 0x001 簡單使用源碼 import React from react import ReactDom from react-d...

番茄西紅柿 2019-08-23 12:16 評論0 收藏0
Router入門0x201: 從 URL 到 SPA

摘要：的全稱是統一資源定位符英文，可以這么說，是一種標準，而網址則是符合標準的一種實現而已。渲染器，將組件渲染到頁面上。 0x000 概述從這一章開始就進入路由章節了，并不直接從如何使用react-route來講，而是從路由的概念和實現來講，達到知道路由的本質，而不是只知道如何使用react-route庫的目的，畢竟react-route只是一個庫，是路由的一個實現而已，而不是路由本身。 ...

honmaple 2019-08-26 12:20 評論0 收藏0
React入門0x007: 生命周期概念

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

Blackjun 2019-08-23 11:30 評論0 收藏0