react获取并设置虚拟DOM

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，就是所谓的虚拟dom let mySpan = self.refs["spToken"], mySpanDOM = ReactDOM.findDOMNode(mySpan); mySpanDOM.innerHTML = token; }, 500); }; render() { return ( <>

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

let mySpan = self.refs["spToken"],mySpanDOM = ReactDOM.findDOMNode(mySpan); mySpanDOM.innerHTML = token;

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。