React 学习笔记（10）：ref

在业务代码中，我们有可能需要获取真实 DOM 节点或者某个组件的实例，react 中提供的 ref 可以做到这两件事。

ref 的写法有三种，分别是 字符串形式、回调函数形式 以及 createRef 形式。

1，字符串形式

写法如下所示：

<script type="text/babel">
	//创建组件
	class Demo extends React.Component{
		//展示左侧输入框的数据
		showData = ()=>{
			const {input1} = this.refs
			alert(input1.value)
		}
		render(){
			return(
				<div>
					<input ref="input1" type="text" placeholder="点击按钮提示数据"/>&nbsp;
					<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
				</div>
			)
		}
	}
	//渲染组件到页面
	ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>

小总结：

• 定义 ref 的写法是在标签中写 ref = "refName"。
• 定义好的 ref 会被保存在组件实例的 refs 属性对象中。

字符串形式存在的问题

 字符串形式 refs 存在的一些问题点击这里。

2，回调函数形式

写法如下所示：

<script type="text/babel">
	//创建组件
	class Demo extends React.Component{
		//展示左侧输入框的数据
		showData = ()=>{
			const {input1} = this
			alert(input1.value)
		}
		render(){
			return(
				<div>
					<input ref={c => this.input1 = c } type="text" placeholder="点击按钮提示数据"/>&nbsp;
					<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
				</div>
			)
		}
	}
	//渲染组件到页面
	ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>

小总结：

• react 解析 ref，发现标签绑定的 ref 是一个函数，react 会以当前标签的 DOM 节点为参数执行该函数。在上面的代码中，input DOM 节点被赋值到了实例的 input1 属性上。

回调函数形式 ref 调用次数的问题：

• 如果 ref 回调函数是以内联函数的方式定义的话，在组件过程中该内联函数会被执行两次，第一次执行时传入参数是 null，第二次执行时传入的参数才是 DOM 元素。
• 通过将 ref 的回调函数定义成 class 函数可以避免上述问题，代码如下所示。

<script type="text/babel">
	//创建组件
	class Demo extends React.Component{
		//展示左侧输入框的数据
		showData = () => {
			const {input1} = this
			alert(input1.value)
		}
        saveInput = (c) => {
			this.input1 = c;
			console.log('@',c);
		}
		render(){
			return(
				<div>
					<input ref={this.saveInput} type="text" placeholder="点击按钮提示数据"/>&nbsp;
					<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
				</div>
			)
		}
	}
	//渲染组件到页面
	ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>

3，createRef 形式

写法如下所示：

<script type="text/babel">
	//创建组件
	class Demo extends React.Component{
		/* 
			React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的
		 */
		myRef = React.createRef()
		//展示左侧输入框的数据
		showData = ()=>{
			alert(this.myRef.current.value);
		}
		render(){
			return(
				<div>
					<input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>&nbsp;
					<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
				</div>
			)
		}
	}
	//渲染组件到页面
	ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>

小总结：

• 通过 React.createRef()  创建一个 ref 容器。
• 将创建出来的 ref 容器绑定到元素上即可。