React基础之Refs的理解与使用

目录

为什么会用到Refs

何时使用Refs

Refs有哪些使用方式

字符串形式的refs

回调形式的refs

createRef的使用

---

为什么会用到Refs

我们在使用React写代码的时候对Refs的使用比较少，因为我们很少直接操作底层DOM元素，而是通过在render里编写我们的页面结构，再由React来组织DOM元素的更新。

而在少数情况中，有些需求要求我们对页面的真实DOM进行直接操作，这就要求我们有直接访问真实DOM的能力，而Refs就为我们提供了这种能力。

官方文档对Refs的描述是：Refs提供了一种方式，允许我们访问DOM节点或在render方法中创建的React元素。

何时使用Refs

1、管理焦点，文本选择或媒体播放。

2、触发强制动画。

3、集成第三方DOM库。

也就是说，在React无法控制局面的时候就需要直接操作Refs了。

Refs有哪些使用方式

1、字符串形式的refs。（可能在以后的版本中弃用）

2、回调形式的refs。

3、使用React.createRef()创建，并通过ref属性附加到React元素。

字符串形式的refs

字符串形式的ref 存在效率问题，不太推荐使用，可能在未来的版本中移除。

写个简单例子，点击按钮打印input中输入的值。

class Demo extends Component{
    constructor(props){
        super(props)
    }
    showData=()=>{
       console.log(this.refs.input1)//拿到标签为input1的真实DOM
       console.log(this.refs.input1.value)
    }
    render(){
        return(
            

                 
                点我提示左侧数据
            
        )
    }
}

效果如下：

回调形式的refs

React 也支持另一种设置 refs 的方式，也就是回调形式的refs。它能使我们更加容易并且精细的控制refs的设置和解除。

在ref中，你会传递一个函数。这个函数中接受 React 组件实例或 HTML DOM 元素作为参数，以使它们能在其他地方被存储和访问。

写个简单例子，同样是点击按钮打印input中输入的值。

class Demo extends Component{
    constructor(props){
        super(props)
    }
    showData=()=>{
       console.log(this.input1)//ref中的回调函数将自身节点放在了组件节点自身上，取名为input1
       console.log(this.input1.value)
    }
    render(){
        return(
            

                {this.input1=currentNode}} type="text" placeholder='点击按钮提示数据'> 
                点我提示左侧数据
            
        )
    }
}

效果如下：

createRef的使用

createRef 是 **React v16.3 ** 新增的API，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。

Refs 是使用 React.createRef() 创建的，并通过 ref 属性附加到 React 元素。

Refs 通常在 React 组件的构造函数中定义，或者作为函数组件顶层的变量定义，然后附加到 render() 函数中的元素。

同样是点击按钮打印input中输入值的例子。

class Demo extends Component{
    constructor(props){
        super(props)
        // React.creatRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点
        this.myRef=React.createRef()
    }
    showData=()=>{
       console.log(this.myRef)//输出myRef容器
       console.log(this.myRef.current)//输出input节点
       console.log(this.myRef.current.value)//输出input中的值
    }
    render(){ 
        return(
            

                 
                点我提示左侧数据
            
        )
    }
}

效果如下：