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:
- 不要滥用。在使用
refs
时,首先应该清使用它是为了让某种功能在你的APP中得到实现。你需要想清楚在哪里私有化state
。经验来看,最合适的地方是在层级的更高层。(这里有疑问,先放在这里) - 避免干扰。在使用
refs
时,应该避免使用保留字或者已经被使用的API字段;
- 不要滥用。在使用
用法(加班,未完待续。。。)
1. 为DOM元素增加 refs
2. 为组件 (Component
) 增加 refs
以下所有的内容均参考自 react_Refs and the DOM
鎏金哇开呀酷烈——神龙啊吞噬我的敌人吧
网友评论