React学习笔记六-refs

此文章是本人在学习React的时候，写下的学习笔记，在此纪录和分享。此为第六篇，主要介绍react中的refs。

目录

1.refs基本使用

1.1字符串类型ref小案例

2.回调形式的ref

2.1回调形式ref小案例

2.2回调ref中调用次数问题

3.createRef

3.1createRef的使用

 3.2createRef的“专人专用”

4.ref总结

---

1.refs基本使用

组件内的标签可以定义ref属性来标识自己。

1.1字符串类型ref小案例

首先我们写一个小案例，来了解refs。我们写一个自定义组件，写两个输入框，点击按钮提示第一个输入框的值，当第二个文本框失去焦点的时候，提示第二个文本框的值。

步骤如下：

        1.在render函数构建虚拟dom时，我们使用ref为input框添加标识，第一个input叫做input1，第二个叫input2，比如说

        <input ref='input1' type="text" placeholder="点击按钮提示数据"/>

注意，使用的是ref来添加表示，而不是refs，不要多写一个s。

        2.然后我们为相应的按钮，和第二个input框设置事件，分别是点击事件和失去焦点事件。如下：

        <button onClick={this.showData}>  <input ref='input2' onBlur={this.showData2} type="text"/>

注意在react中的事件与js中不同，比如说点击事件onclick，在react里面on后的首字母大写，与js做区分。基本上在react里面事件都是在on后首字母大写。

        3.下一步我们写事件处理函数，showData和showData2。由于我们给input框设置了ref添加标识，那么所以使用ref添加标识的信息，全部存储在本组件实例的refs属性里面，所以我们在组件内使用的时候，直接this.refs.使用ref设置的标识名即可使用，也比较推荐使用解构赋值来使用。如下，对refs属性解构赋值，拿取我们想要的input1：

        const {input1} = this.refs

       如此这个inpput1就代表了第一个输入框，我们就可以对第一个文本框的内容进行输入。

代码如下：

<script type="text/babel">
        //创建组件
        class Demo extends React.Component {
            showData = ()=>{
                const {input1} = this.refs
                alert(input1.value)
            }
            showData2 = ()=>{
                const {input2} = this.refs
                alert(input2.value)
            }
            render() {
                return (//构建虚拟dom
                    <div>
                        <input ref='input1' type="text" placeholder="点击按钮提示数据"/>&nbsp;
                        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                        <input ref='input2' onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>&nbsp;
                    </div>
                )
            }

        }

        //渲染组件到界面
        ReactDOM.render(<Demo/>, document.getElementById('test1'))
    </script>

2.回调形式的ref

2.1回调形式ref小案例

上面那个案例是字符串类型的refs，虽然非常简单，但在react官方文档内，不推荐使用这种方式，会出现一些效率上的问题，甚至以后会废弃。所以上面那个案例我们只做refs的学习的入门。

所以现在我们来学习回调形式的ref。

        1.我们尝试把 ref='input1' 改为箭头函数类型：ref={(a)=>{console.log(a)}}，此函数参数为a，