react获取并设置虚拟DOM

307 阅读1分钟

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;