React ref属性

简单来说，ref就是用来获取真实dom元素或者是组件实例的属性。

1. 创建和访问

ref 的值根据节点的类型而有所不同：

• 当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性。
• 当 ref 属性用于自定义 class 组件时，ref 对象接收组件的挂载实例作为其 current 属性。
• 不能在函数组件上使用 ref 属性，因为他们没有实例。若是想用需要经过特殊处理

1.1 ref=字符串 (已经废弃)

class Cualculator extends React.Component { add =() => { let num1 = parseInt(this.refs.num1.value) let num2 = parseInt(this.refs.num2.value) let result = num1 +num2 this.refs.result.value = result } render() { return ( <div>
        <input ref="num1" />+<input ref="num2"/><button onClick={this.add}>=</button><input ref="result"/>
      </div>
 ) } }

 * num1:对应真实dom num1

 * num2:对应真实dom num2

1.2 ref=函数 （不推荐）

class Cualculator extends React.Component { add =() => { let num1 = parseInt(this.num1.value) let num2 = parseInt(this.num2.value) let result = num1 +num2 this.result.value = result } //ref值是一个函数的时候，此函数会在虚拟dom转为真实dom插入也买你之后执行，参数就是真实dom
 render() { return ( <div>
        <input ref={instance => this.num1 = instance} />+<input ref={instance => this.num2 = instance}/><button onClick={this.add}>=</button><input ref={instance => this.result = instance}/>
      </div>
 ) } }

1.3 ref = React.createRef() （推荐使用）

通过React.createRef() 创建的ref属性有以下几个特点：

当 ref 被传递给 render 中的元素时，对该节点的引用可以在 ref 的 current 属性中被访问。

• 当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性。
• 当 ref 属性用于自定义 class 组件时，ref 对象接收组件的挂载实例作为其 current 属性。
• 不能在函数组件上使用 ref 属性，因为他们没有实例。若是想用需要经过特殊处理

1.3.1 Html元素

class Cualculator extends React.Component { constructor(){ super() this.num1 = React.createRef() //{current:null} current在虚拟dom转为真实dom插入页面之后变成真实dom
    this.num2 = React.createRef() //{current:null} current在虚拟dom转为真实dom插入页面之后变成真实dom
    this.result = React.createRef() //{current:null} current在虚拟dom转为真实dom插入页面之后变成真实dom
 } add =() => { let num1 = parseInt(this.num1.current.value) let num2 = parseInt(this.num2.current.value) let result = num1 +num2 this.result.current.value = result } //ref值是一个函数的时候，此函数会在虚拟dom转为真实dom插入页面之后执行，参数就是真实dom
 render() { return ( <div>
        <input ref={this.num1} />+<input ref={this.num2}/>
        <button onClick={this.add}>=</button>
        <input ref={this.result}/>
      </div>
 ) } } ReactDOM.render(<Cualculator></Cualculator>,document.getElementById('root'))

dom元素作为current属性的值

1.3.2 class组件

class UserName extends React.Component{ constructor(){ super() this.inputRef = React.createRef() } render(){ return ( <input ref={this.inputRef}></input>
 ) } } class Form extends React.Component{ constructor(){ super() this.username = React.createRef() //this.username 就是UserName组件的实例 this.username.current = new UserName()
 } getFocus = () => { this.username.current.inputRef.current.focus() //this.username.current.inputRef.current 获取到组件对应的真实dom节点 就是 input框
 } render(){ return ( <form>
        <UserName ref={this.username}/>
        <button type="button" onClick={this.getFocus}>让用户名获得焦点</button>
      </form>
 ) } }

组件的实例等于current属性的值

1.3.3 函数组件

ref React.createRef()会获取到一个真实dom或者是一个组件实例对象 但是函数组件没有实例，那怎么获取函数组件的ref属性，这个时候就需要特殊处理

function UserName(props,ref) { return <input ref={ref}></input>
} const ForwordUsername = React.forwardRef(UserName) 
 class Form extends React.Component{ constructor(){ super() this.username = React.createRef() //this.username 就是ForwordUsername组件的实例 this.username.current = new ForwordUsername()
 } getFocus = () => { this.username.current.focus() //this.username.current.inputRef.current 获取到组件对应的真实dom节点 就是 input框
 } render(){ return ( <form>
        <ForwordUsername ref={this.username}/>
        <button type="button" onClick={this.getFocus}>让用户名获得焦点</button>
      </form>
 ) } }

React.forwardRef会穿透UserName组件，获取到input的真实dom元素。

1.4 React.forwardRef()的底层实现

function UserName(props,ref) { return <input ref={ref}></input>
} 
function forwardRef (functionComponent) { return class extends React.Component { render() { return functionComponent(this.props,this.props.ref2) } } } const ForwordUsername = forwardRef(UserName) //React.forwardRef返回一个类组件，将这个类组件传给
 class Form extends React.Component{ constructor(){ super() this.username = React.createRef() //this.username 就是UserName组件的实例 this.username.current = new UserName()
 } getFocus = () => { this.username.current.focus() //this.username.current.inputRef.current 获取到组件对应的真实dom节点 就是 input框
 } render(){ return ( <form>
        <ForwordUsername ref2={this.username}/>
        <button type="button" onClick={this.getFocus}>让用户名获得焦点</button>
      </form>
 ) } }

它是将函数组件转换成了类组件，当然也可以直接返回一个转化之后的函数组件

function UserName(props) { return <input ref={props.ref2}></input>
} //函数组件没有this，可以通过
function forwardRef (functionComponent) { return props => functionComponent(props,props.ref2) } const ForwordUsername = forwardRef(UserName) //React.forwardRef返回一个类组件，将这个类组件传给
 class Form extends React.Component{ constructor(){ super() this.username = React.createRef() //this.username 就是UserName组件的实例 this.username.current = new UserName()
 } getFocus = () => { this.username.current.focus() //this.username.current.inputRef.current 获取到组件对应的真实dom节点 就是 input框
 } render(){ return ( <form>
        <ForwordUsername ref2={this.username}/>
        <button type="button" onClick={this.getFocus}>让用户名获得焦点</button>
      </form>
 ) } } ReactDOM.render(<Form></Form>,document.getElementById('root'))

1.5 Refs 使用场景

• 处理焦点、文本选择或者媒体的控制
• 触发必要的动画
• 集成第三方 DOM 库

补充：

函数组件执行完毕之后就被释放了，但是会返回一个react元素，这个元素会一直存在，最后会被渲染成真实dom