react获取并设置虚拟DOM

朱雀 2022-11-11 05:22 181阅读 0赞

react，这就开始了。

react的一个特点，就是所谓虚拟dom。虚拟者，就是只存在于逻辑运算中，物理并不存在。因此，想获取或者设置dom，用以前的document.getElementById()之类的方法是不行的。应该用ref。

有代码有真相

/** * 跳到网站前端 */
     import React, {  Component } from 'react';
     import ReactDOM from 'react-dom';
     import styles from './index.less';// 自己定义的样式文件
    
     class Jump extends Component { 
    
        constructor(props) { //构造函数
            super(props)
            this.state = { }
        }
    
        componentDidMount() { //本组件加载完成
          let self = this;// 保存this指针。否则在子函数里，this指向恐怕不同。
          this.loopData(self);
        }
      
        componentWillUnmount() { //本组件卸载时
          // clearTimeout(this.timer);
        }
      
        loopData = (self) => { 
          var timer = setInterval(function () { 
            var token = localStorage.getItem('token');
            if (!token) { 
              return;
            }
            clearInterval(timer);
    
    		// 将读取到的token值展示到<span>里
    		// 这个span，就是所谓的虚拟dom
            let mySpan = self.refs["spToken"],
            mySpanDOM = ReactDOM.findDOMNode(mySpan);        
            mySpanDOM.innerHTML = token;
          }, 500);
        };
    
        render() { 
          return (
            <>
              <div>
                <span className={ styles.normal}>登录中，请稍候...</span>
              </div>
              <div>
                <span ref="spToken" className={ styles.normal}></span>
              </div>
            </>
          );
        }
      }
      
      export default Jump;

上面例子中，最后一个`<span>` 使用了ref=“spToken”，react就可以据此找到实际输出时的`<span>`。

<span ref="spToken" className={ styles.normal}></span>
    
    let mySpan = self.refs["spToken"],
    mySpanDOM = ReactDOM.findDOMNode(mySpan);        
    mySpanDOM.innerHTML = token;

我目前刚接触react。从代码看，constructor，componentDidMount，componentWillUnmount都是react组件中固有的方法。