美文网首页
了解React中的refs

了解React中的refs

作者: 春木橙云 | 来源:发表于2017-08-31 18:07 被阅读105次
    鎏金哇开呀酷烈——神龙啊吞噬我的敌人吧

    refs这部分是在做公司一个小组件(视频弹框蒙层)时候遇到的,是react进阶部分内容,学习内容与心得整理如下,欢迎指正!

    为什么要使用refs

    在正常的 react 数据流中,props 是父组件与子元素交互的唯一渠道。如果想要修改子元素,你需要通过一个新的 props 进行重新渲染。但是,在一些情境下,你需要在正常数据流外强行修改子元素,这时,你就需要用到 refs。修改的子元素可以是react组件的实例,也可以是DOM元素

    有点生涩?那我来举例子:

    <VideoPlay url="www.hclzx.com" />
    <button>pause</button>
    
    class VideoPlay extends React.Component{
        render(){
            <video src={this.props.url}>我是视频</video>
        }
    }
    

    如上面的代码,组件 VideoPlay中是视频的URL,它与其子元素 video 之间沟通仅依靠 props ,如果我想修改子元素 video 的URL链接,只能通过修改组件 VideoPlay中的 url 属性来进行。然而,此时需求是当我点击按钮的时候,需要对视频进行暂停。这个暂停的动作不可能通过更改 props 然后重新渲染页面来实现。这时我就需要在子元素 video 中加入一个属性 ref 来进行强制修改。react将这个 refs 叫做 紧急舱口

    什么时候使用refs

    • 管理焦点、文本选择或媒体回放。

    • 触发命令动画。

    • 与第三方DOM库集成。

    • tip:

      1. 不要滥用。在使用 refs 时,首先应该清使用它是为了让某种功能在你的APP中得到实现。你需要想清楚在哪里私有化 state。经验来看,最合适的地方是在层级的更高层。(这里有疑问,先放在这里)
      2. 避免干扰。在使用 refs 时,应该避免使用保留字或者已经被使用的API字段;

    用法(加班,未完待续。。。)

    1. 为DOM元素增加 refs

    2. 为组件 (Component) 增加 refs

    以下所有的内容均参考自 react_Refs and the DOM

    鎏金哇开呀酷烈——神龙啊吞噬我的敌人吧

    相关文章

      网友评论

          本文标题:了解React中的refs

          本文链接:https://www.haomeiwen.com/subject/elfcjxtx.html