React入門0x016: 訪問Dom

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 <div id='cool'>
              Dom
          </div>
      }
  }

• 輸出：

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 <div ref= {this.myRef}>
                Dom
            </div>
        }
    }

    效果

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

    class App extends React.Component {
        constructor() {
            super()
        }
    
        componentDidMount() {
            console.log('componentDidMount',this.myRef)
        }
    
        render() {
            return <div ref= {(e)=>this.myRef=e}>
                Dom
            </div>
        }
    }

    效果

0x003 總結

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