鎏金哇開呀酷烈——神龍啊吞噬我的敵人吧

refs這部分是在做公司一個小組件（視頻彈框蒙層）時候遇到的，是react進階部分內(nèi)容，學(xué)習(xí)內(nèi)容與心得整理如下，歡迎指正！

為什么要使用refs

在正常的 react 數(shù)據(jù)流中，props 是父組件與子元素交互的唯一渠道。如果想要修改子元素，你需要通過一個新的 props 進行重新渲染。但是，在一些情境下，你需要在正常數(shù)據(jù)流外強行修改子元素，這時，你就需要用到 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 屬性來進行。然而，此時需求是當(dāng)我點擊按鈕的時候，需要對視頻進行暫停。這個暫停的動作不可能通過更改 props 然后重新渲染頁面來實現(xiàn)。這時我就需要在子元素 video 中加入一個屬性 ref 來進行強制修改。react將這個 refs 叫做 緊急艙口 。

什么時候使用refs

• 管理焦點、文本選擇或媒體回放。

• 觸發(fā)命令動畫。

• 與第三方DOM庫集成。

• tip：

  1. 不要濫用。在使用 refs 時，首先應(yīng)該清使用它是為了讓某種功能在你的APP中得到實現(xiàn)。你需要想清楚在哪里私有化 state。經(jīng)驗來看，最合適的地方是在層級的更高層。（這里有疑問，先放在這里）
  2. 避免干擾。在使用 refs 時，應(yīng)該避免使用保留字或者已經(jīng)被使用的API字段；

用法（加班，未完待續(xù)。。。）

1. 為DOM元素增加 refs

2. 為組件 (Component) 增加 refs

以下所有的內(nèi)容均參考自 react_Refs and the DOM

鎏金哇開呀酷烈——神龍啊吞噬我的敵人吧