react refs

react refs

允许我们访问DOM节点或者在render方法中创建react元素；
本质为reactDOM.render()返回的组件实例，如果是渲染组件则返回的是组件实例；如果渲染dom则返回的是具体的dom节点。

使用：

创建ref的形式有三种：

• 传入字符串，使用时通过this.refs传入的字符串的格式获取对应的元素
• 传入对象，对象是通过 React.createRef()方式创建出来的，使用时获取到创建的对象中存在current属性就是对应的元素
• 传入函数，该函数会在 DOM 被挂载时进行回调，这个函数会传入一个元素对象，可以自己保存，使用时直接拿到之前保存的元素对象即可
• 传入hook，hook是通过 useRef() 方式创建，使用时通过生成hook对象的current属性就是对应的元素

传入字符串

只需要在对应元素或组件中使用 ref 属性

	class MyComponent extends React.Component {
		 constructor(props) {
			 super(props);
			 this.myRef = React.createRef();
		 }
		 render() {
		 	return <div ref="myref" />;
		 }
	}

访问当前节点：

	this.refs.myref.innerHTML = "hello";

传入对象

refs通过React.createRef()创建，将ref属性添加到react元素中：

	class MyComponent extends React.Component {
		 constructor(props) {
			 super(props);
			 this.myRef = React.createRef();
		 }
		 render() {
		 	return <div ref={this.myRef} />;
		 }
	}

当ref被传递给render中的元素是，对节点的引用可以在ref的current属性中访问:

	const node = this.myRef.current;

传入hook

通过useRef 创建一个ref，整体使用方式与React.createRef一致

	function App(props) {
		 const myref = useRef()
		 return (
			 <>
			 <div ref={myref}></div>
			 </>
		 )
	}

获取ref属性也是通过hook对象的current属性

	const node = myref.current;

上述三种情况都是ref属性用于原生HTML元素上，如果ref设置的组件为一个类组件，ref对象接收到的是组件的挂在实例

注意：不能在函数组件上使用ref属性，因为他们并没有实例

应用场景

在某些情况下，我们会通过使用refs来更新组件，但是这种方式并不推荐，更多情况是通过props与state的方式进行重新渲染子组件
过多使用refs，会使组件的实例或者DOM结构暴露，违反组件封装的原则
例如：避免在Dialog组件里暴露open() 和close()方法，最好传递isOpen属性

下面的场景使用refs非常有用：

• 对Dom元素的焦点控制，内容选择，控制
• 对Dom元素的内容设置及媒体播放
• 对Dom元素的操作和对组件实例的操作
• 集成第三方Dom库