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的思想去解决问题。