React浅析(七):ref使用

在React等框架出现之前,web页面的交互是依靠操作DOM实现的,到了出现vdom概念出来,React和Vue等框架利用组件的状态管理,通过操作dom的js对象,来实现页面的变化渲染。在React的数据流中,是自上向下的props传递数据,我们可以通过props来让子组件重新渲染,然而实际场景中,我们还是需要按照我们的方式来操作元素的行为,这个时候就需要用到ref来获取某元素dom节点

比如:需要focus一个input输入框,让媒体播放

使用ref的方式:
1、通过字符串定义获取
2、通过回调函数的方式去使用
3、使用React.createRef()

1、通过字符串定义

 
//访问时
console.log(this.refs.inputRef)

这种方式已经不被react官方推荐了,会在将来的某个版本移除掉,推荐开发者使用回调的方式。


官网截图.png

2、通过回调函数的方式去使用

class Home  extends Component{
    constructor(){
        super()
    }
   render(){
      return(
        
{ this.inputRef = c;}} />
) } }

上面栗子中,当我们使用ref时,回调函数会接收当前dom元素作为参数,当我们使用this.refs.inputRef时候,可以获取到该节点元素,调用原生DOM API实现input的聚焦等多种方法。
该回调函数会等组件挂载完毕之后,或者是ref属性发生变化的时候,回调函数就会被调用。

以上两种方法,可以思考下,为什么要废除掉字符串的引用,改为回调函数的方式的好处是什么?

实际场景中,当我们使用this.refs.inputRef是一个独立的dom元素,如果是属于字符串引用,那么是无法知道inputRef什么时候卸载,也无法合理的销毁,如果使用回调函数,即当发生父组件触发卸载,子组件触发回调函数,可以在此时将inputRef销毁掉。

3、使用React.createRef()

用React.createRef()创建refs,通过ref属性

class Home  extends Component{
    constructor(){
        super()
        this.inputRef = React.createRef()
    }
   render(){
      return(
        
) } } //使用 //this.inputRef.current.focus()

使用createRef方法,生成ref对象
render的时候,接收子组件或者dom元素的ref属性
用this.inputRef.current来获取这个节点元素

注意:不能在无状态组件中使用ref

因为ref引用的是组件的实例,无状态组件中是没有实例的。

function MyComponent() {
    return ;
}

class Home extends React.Component {
    render() {
        return (
             { this.textInput = input; }} />
        );
    }
}
//以上代码是无效的

但是function申明的组件内部还是可以使用ref的,只要这个ref不是用来访问function组件

function MyComponent (){
  let inputRef = React.createRef()
  return (
    
) } //如何使用 //inputRef.current.focus()

你可能感兴趣的:(React浅析(七):ref使用)