（五）React的三大特性 refs

（五）React的三大特性 refs

简介：

使用refs 组件内的标签可以定义ref属性来标识自己
such as： 注意在使用的是 this.refs refs

1.字符串形式的refs使用

（不推荐使用 原因就是存在一些效率的问题 我觉得就是收集获取的时候存在问题吧）

案例的作用 点击按钮获取相关节点的数据 另一个是失去焦点的时候获取节点的数据

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

2.回调形式的refs使用

    把ref当前所处的节点挂在了实例自身上并且取了个名字叫input1
    这个ref就是获取当前的这个节点

//创建组件
        class Demo extends React.Component{
            //展示左侧输入框的数据
            showData = ()=>{
                const {input1} = this
                alert(input1.value)
            }
            //展示右侧输入框的数据
            showData2 = ()=>{
                const {input2} = this
                alert(input2.value)
            }
            render(){
                return(
                    <div>
                     	//把ref当前所处的节点挂在了实例自身上并且取了个名字叫input1
                        <input ref={c => this.input1 = c } type="text" placeholder="点击按钮提示数据"/>&nbsp;
                        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                        <input onBlur={this.showData2} ref={c => this.input2 = c } type="text" placeholder="失去焦点提示数据"/>&nbsp;
                    </div>
                )
            }
        }
        //渲染组件到页面
        ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))

使用内联函数的方式 ，更新的时候会出发两次 ，原因是因为之前的内联函数清空了 要重新加载
解决方法就是，不使用内联函数的方式 ，要使用class连接回调的形式
举例子：

//创建组件
		class Demo extends React.Component{

			state = {isHot:false}

			showInfo = ()=>{
				const {input1} = this
				alert(input1.value)
			}

			changeWeather = ()=>{
				//获取原来的状态
				const {isHot} = this.state
				//更新状态
				this.setState({isHot:!isHot})
			}

			saveInput = (c)=>{
				this.input1 = c;
				console.log('@',c);
			}

			render(){
				const {isHot} = this.state
				return(
					<div>
						<h2>今天天气很{isHot ? '炎热':'凉爽'}</h2>
						{/*<input ref={(c)=>{this.input1 = c;console.log('@',c);}} type="text"/><br/><br/>*/}
						<input ref={this.saveInput} type="text"/><br/><br/>
						<button onClick={this.showInfo}>点我提示输入的数据</button>
						<button onClick={this.changeWeather}>点我切换天气</button>
					</div>
				)
			}
		}
		//渲染组件到页面
		ReactDOM.render(<Demo/>,document.getElementById('test'))

3.createRef的方式：应该就是创建一个节点进行绑定：

简介： 调用后可以返回一个容器 该容器可以存储被ref所标识的节点
这个是专人专用的 要是你每次都添加索引在每个元素上 然后使用的时候要每次都创建 createRef()

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

总结： 字符串是最简单的 ， 然后就是回调函数的这种形式的， 又是内联函数的形式， 通过参数取值进行相应的绑定，但是有个问题就是内联形式的方式有问题会触发两次，解决方案就是要改成class的绑定形式，也就是类绑定的形式进行解决，但是调用两次无关紧要大多数情况下是没有什么事情的 。最后就是进行createRef的形式 是一个新的API的形式。需要进行每个的新建饭后进行索引 而且是专一使用的。