react中的refs属性的使用方法

时间: 2018-05-18阅读: 1372标签: react

react中,render执行的结果得到的并不是真正的DOM节点,结果仅仅是轻量级的JavaScript对象,我们称之为virtual DOM。

虚拟DOM是react的一大亮点,具有batching(批处理)和高效的Diff算法。这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷新”整个页面,由虚拟 DOM来确保只对界面上真正变化的部分进行实际的DOM操作。但是,有些场景需要获取某一个真实的DOM元素来交互,比如文本框的聚焦、触发强制动画等。所以怎么获取真实的dom元素呢?嗯、这就是今天的重点啦:refs

React 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何组件上。这个特殊的属性允许你引用 render() 返回的相应的支撑实例( backing instance )。这样就可以确保在任何时间总是拿到正确的实例。那,具体怎么用,且看下面


1、为DOM元素添加Ref

ref属性接收一个回调函数,这个回调函数在组件挂载或者卸载的时候被调用。当ref用于一个html元素的时候,ref指定的回调函数在调用的时候会接收一个参数,该参数就是指定的DOM元素。

class Input extends Component {  
    constructor(props){  
        super(props);  
       this.focus = this.focus.bind(this)  
    }  
    focus(){  
        this.textInput.focus();  
    }  
      
    render(){  
        return (  
            <div>  
                <input ref={(input) => { this.textInput = input }} />//input参数表示DOM本身  
                <button  onClick={this.focus}>让input获取焦点</button>  
            </div>  
        )  
    }  
}

当我们在DOM Element中使用ref时,回调函数将接收当前的DOM元素作为参数,然后存储一个指向这个DOM元素的引用。那么在示例代码中,我们已经把input元素存储在了this.textInput中,在focus函数中直接使用原生DOM API实现focus聚焦。

2.为组件Component添加Ref

当ref属性用于一个class指定的自定义组件的时候,ref回调函数会接收到一个挂载的组件实例作为参数。

下面的例子展示了当CustomTextInput被挂载后马上模拟被点击:

class AutoFocusTextInput extends Component {  
    componentDidMount(){  
        this.textInput.focus();  
    }  
      
    render(){  
        return (  
            <Input ref={(input) => { this.textInput = input }}>  
        )//ref回调函数会接收一个挂载的组件实例作为参数  
    }  
}

Input组件就是第一个实例的组件哦
当我们在<Input>中添加ref属性时,其回调函数接收已经挂载的组件实例<Input>作为参数,并通过this.textInput访问到其内部的focus方法。也就是说,上面的示例代码实现了当AutoFocusTextInput组件挂载后<Input>组件的自动聚焦。
注意:<Input>组件必须是使用class声明的组件
不能在无状态组件中使用`ref`。原因很简单,因为ref引用的是组件的实例,而无状态组件准确的说是个函数组件(Functional Component),没有实例。

3.为父组件暴露一个DOM的ref属性

这是Facebook非常不推荐的做法,因为这样会打破组件的封装性,这种方法只是某些特殊场景下的权宜之计。我们看看如何实现,上代码:

function CustomTextInput(props) {  
  return (  
    <div>  
     //子级组件接收到父级组件传递过来的inputRef函数  
     //当子级组件实例化的时候会将该input传入到该函数中,此时父级组件会  
     //接收到子级组件的DOM结构(input元素)  
      <input ref={props.inputRef} />  
    </div>  
  );  
}  
class Parent extends React.Component {  
  render() {  
    return (  
      <CustomTextInput  
      //为子级组件传入一个inputRef函数  
        inputRef={el => this.inputElement = el}  
      \/>  
    );  
  }  
}


原理就是父组件把ref的回调函数当做inputRefprops传递给子组件,然后子组件<CustomTextInput>把这个函数和当前的DOM绑定,最终的结果是父组件<Parent>的this.inputElement存储的DOM是子组件<CustomTextInput>中的input。

官方推荐Ref常用情况

第一:管理焦点,文本选择,媒体播放(媒体回放)
第二:触发动画
第三:集成第三方的DOM库


结语:

`refs`提供的是另一种与react传统响应数据流完全不同的组件间交互方式,所以官方指出不要过度使用`refs`,而且从官方对它的态度来看,未来或许有更好的API来取代它。但目前来说`refs`仍是一个不错的解决方案。

来源:https://blog.csdn.net/lhjuejiang/article/details/80341231


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/783

关闭

React 服务端渲染完美的解决方案

使用 React 构建客户端应用程序,默认情况下,可以在浏览器中输出 React 组件,进行生成 DOM 和操作 DOM。React 也可以在服务端通过 Node.js 转换成 HTML,直接在浏览器端“呈现”处理好的 HTML 字符串,这个过程可以被认为 “同构”

深入理解 React useLayoutEffect 和 useEffect 的执行时机

我们先看下 React 官方文档对这两个 hook 的介绍,建立个整体认识,该 Hook 接收一个包含命令式、且可能有副作用代码的函数。在函数组件主体内(这里指在 React 渲染阶段)改变 DOM、添加订阅、设置定时器

解决vscode 开发react 导入绝对路径 无法跳转的问题

相对路径可正常跳转,但是在webpack配置alias使用绝对路径后无法跳转.解决办法:需要添加一个jsconfig文件,如下:

为什么我会选择React+Next.js,而不是Vue或Angular?

本文的目的不是要对 React、Vue 和 Angular 三者进行比较,已经有许多人对这个话题进行了比较深入的探讨。每个人都有自己的偏好。与其他库和框架相比,我更喜欢使用 React 构建用户界面。 对我来说,这是构建用户界面唯一正确的方法,它让我爱上了 React。

react-router 路由切换动画

因为项目的需求,需要在路由切换的时候,加入一些比较 zb 的视觉效果,所以研究了一下。把这些学习的过程记录下来,以便以后回顾。同时也希望这些内容能够帮助一些跟我一样的菜鸟,让他们少走些坑。可能我对代码的表述不是很到位,希望大家不要介意。机智的你们一定可以看明白。

react中实现可拖动div

把拖动div功能用react封装成class,在页面直接引入该class即可使用。title为可拖动区域。panel为要实现拖动的容器。优化了拖动框超出页面范围的情况,也优化了拖动太快时鼠标超出可拖动区域的情况

函数式的React

React 是现在最流行的 JavaScript 库之一。使用 React 可以非常轻松地创建 Web 用户交互界面。 它的成功有很多因素,但也许其中一个因素是清晰有效的编程方法。在 React 的世界中,UI 是由一个一个组件所组成的。

在react jsx中,为什么使用箭头函数和bind容易出现问题

因为()=>this.deleteUser(user.id)每执行一次就会生成一个新的函数,当然bind也是这样干的,所以在PureComponent的shallowCompare中认为onDeleteClick的值已经被修改,所以触发了重新渲染。看吧,使用箭头函数和bind会造成性能浪费,作为一个节约的程序员应该避免如此。

使用React严格模式避免过时的代码和副作用

严格模式是用于突出显示应用程序中潜在问题的工具,它不会呈现任何可见的UI。它只用于激活对其后代的额外检查和警告。严格模式不会影响生产环境。

React事件处理函数必须使用bind(this)的原因

学习React的过程中发现调用函数的时候必须使用bind(this),之后直接在class中声明函数即可正常使用,但是为什么呢,博主进行了一番查阅,总结如下。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!