學過react的人都知道react元件render渲染的並不是真實的 dom 節點，而是存在於記憶體之中的一種資料結構，叫做虛擬 dom。只有當插入到頁面後才會形成真實的dom結構。根據 react 的設計，所有的 dom 變動，都先在虛擬 dom 上發生，然後再將實際發生變動的部分，反映在真實 dom上。有時需要從react元件中獲取真實的dom進行操作，這就需要用到標籤的ref屬性。ref
是react
中的一種屬性，當render函式返回某個元件的例項時，可以給render中的某個虛擬dom節點新增乙個ref屬性，就可以通過this.ref獲取例項。如下阮老師的例項
this.refs.[refname] 獲取的是真實的節點，所以必須要在虛擬dom真實插入到文件後才能夠使用。
通過ref屬性我們就可以獲取到真實的dom節點，主要通過reactdom裡的finddomnode()方法獲取：
//html
//jsx
var myinput = reactdom.finddomnode(this.refs['myinput']);
var myinput = reactdom.finddomnode(this.refs.myinput;
獲取到真實的dom節點之後，我們就可以執行對dom的相關操作了
var trydom = react.createclass(;},componentdidmount: function(),
render: function ()
});
react中的DOM操作
某些情況下需要在典型資料流外強制修改子代。要修改的子代可以是 react 元件例項，也可以是 dom 元素。這時就要用到refs來操作dom 下面是幾個適合使用 refs 的情況 1 處理焦點 文字選擇或 控制 2 觸發強制動畫 3 整合第三方 dom 庫 如果可以通過宣告式實現，則盡量避免使用 r...
React中的Dom操作
下面是幾個適合使用 refs 的情況 1 處理焦點 文字選擇或 控制 2 觸發強制動畫 3 整合第三方 dom 庫 html元素 ref 修改dom樣式 this.domname.style.background pink 元件元素和styledcomponents樣式化的元素 styledcomp...
React中ref的使用
res引用的意思，用來獲取元素的dom，官方並不推薦 react新特性中res等於乙個函式，這個函式會自動接收乙個引數。這是代表構建了乙個ref，通過this.input來指向 input dom節點 之前使用e.target.value來獲取input值，現在通過ref引用的this.input來...