react获取并设置虚拟DOM- 前端开发

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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

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

<span ref="spToken" className={styles.normal}></span>

let mySpan = self.refs["spToken"],
mySpanDOM = ReactDOM.findDOMNode(mySpan);        
mySpanDOM.innerHTML = token;
1
2
3
4
5