了解React中的refs

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

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

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