react 中保存的是虚拟的 dom,一切数据节点先存放在虚拟dom解构中,最后在根据虚拟 dom 展示到 document 中,以此来减少 dom 的操作,达到提升网页的性能。 有时候我们又需要真实的 dom,为此 react 也提供了对应的解决办法。

ref

要标注真实 dom 节点,需要在元素上使用属性 ref 标注,然后使用 refs 获取
import { Component } from 'react';
import { render } from 'react-dom';

// 定义组件
class Welcome extends React.Component {
	//点击事件
	clicktest(){
		console.log(this.refs.h1);
	}
	render() {
		//因为 bable 在编译 es6 语法时,会对 class 中的方法声明一个匿名函数,
		//然后 react 在调用时会产生对象的丢失,所以这里为了处理这个bug,可以使用 bind 重新修改函数的对象
		return (
			<h1 ref="h1" onClick={ this.click1.bind(this) }>
				Hello { this.props.text }
			</h1>
		);
	}
}


render(
  	<div>
  		//使用组件,定义自定义属性
  		//属性名作为 key (键值),属性值作为 value
  		<Welcome text="react.js"/>
  	</div>,
  	document.querySelector("#app")
);