React 中的refs

一、

    refs是React中非常特殊的prop，可以附加到任何一个组件上（仅有状态组件），当组件被调用时会创建一个改组件的实例，而refs就会指向这个实例。

   它可以是一个回调函数。

   例:通过ref获取input的实例，调用focus()方法。

import React, { Component } from 'react';

class Demo extends Component {
	handleClick = () => {
		if (this.inputText != null) {
			this.inputText.focus();
		}
	};

	render() {
		return (
			<div>
				<input
					type="text"
					ref={(input) => {
						this.inputText = input;
					}}
				/>
				<input type="button" onClick={this.handleClick} value="聚焦输入框" />
			</div>
		);
	}
}

export default Demo;

    ref 也可以是一个字符串。

import React, { Component } from 'react';

class Demo extends Component {
	handleClick = () => {
		if (this.refs.inputText != null) {
			this.refs.inputText.focus();
		}
	};

	render() {
		return (
			<div>
				<input
					type="text"
					ref='inputText'
				/>
				<input type="button" onClick={this.handleClick} value="聚焦输入框" />
			</div>
		);
	}
}

export default Demo;

二、

要获取一个React组建的引用，既可以使用this来获取当前React组件，也可以使用refs来获取你的子组件的引用。

为了防止内存泄漏，当一个组件卸载时，组件里所有的refs都会变为null。

三、

 refs会指向React的一个实例，所以可以调用该类定义的任何方法，但不推荐这么做，因为这么做会打破组件的封装性。