react中的DOM操作

某些情況下需要在典型資料流外強制修改子代。要修改的子代可以是 react 元件例項，也可以是 dom 元素。這時就要用到refs來操作dom

下面是幾個適合使用 refs 的情況

1、處理焦點、文字選擇或**控制

2、觸發強制動畫

3、整合第三方 dom 庫

如果可以通過宣告式實現，則盡量避免使用 refs

[注意]不要在dialog元件上直接暴露open()和close()方法，最好傳遞isopen屬性

react 支援給任意元件新增特殊屬性。ref屬性接受乙個**函式，它在元件被載入或解除安裝時會立即執行

[注意]在元件mount之後再去獲取ref。componentwillmount和第一次render時都獲取不到，在componentdidmount才能獲取到

【html元素】

當給 html 元素新增ref屬性時，ref**接收了底層的 dom 元素作為引數

react 元件在載入時將 dom 元素傳入ref的**函式，在解除安裝時則會傳入null。ref**會在componentdidmount或componentdidupdate這些生命週期**之前執行。

class
customtextinput extends react.component 
focus() 
render() } />
type="
button
"value="
focus the text input
"onclick=
/>
); }
}

更簡短的寫法如下

ref=

【類元件】

當ref屬性用於使用 class 宣告的自定義元件時，ref的**接收的是已經載入的 react 例項

class
autofocustextinput extends react.component 
render() } />);
}}

[注意]這種方法僅對class宣告的customtextinput有效

【函式式元件】

不能在函式式元件上使用 ref 屬性，因為它們沒有例項

【對父元件暴露dom節點】

在子節點上暴露乙個特殊的屬性。子節點將會獲得乙個函式屬性，並將其作為ref屬性附加到 dom 節點。這允許父代通過中介軟體將ref**給子代的 dom 節點

該方法適用於類元件和函式式元件

function customtextinput(props)  />
);}class
parent extends react.component 
/>);
}}

在上面的例子中，parent將它的 ref **作為乙個特殊的inputref傳遞給customtextinput，然後customtextinput通過ref屬性將其傳遞給。最終，parent中的this.inputelement將被設定為與customtextinput中的元素相對應的 dom 節點

要編寫乙個非受控元件，而非為每個狀態更新編寫事件處理程式，可以使用 ref 從 dom 獲取表單值

[注意]可能通過e.target.value取得dom值，而不用繫結react

class
nameform extends react.component 
handlesubmit(
event
) render() 
}

由於非受控元件將真實資料儲存在 dom 中，因此在使用非受控元件時，更容易同時整合react和非react**

【預設值】

在 react 的生命週期中，表單元素上的value屬性將會覆蓋 dom 中的值。使用非受控元件時，通常希望 react 可以為其指定初始值，但不再控制後續更新。要解決這個問題，可以指定乙個defaultvalue屬性而不是value

render()

同樣，和支援defaultchecked，和支援defaultvalue

react-dom這個軟體包提供了針對dom的方法，可以在應用的頂級域中呼叫，也可以在有需要的情況下用作跳出react模型的出口。但大部分元件都不應該需要使用這個包

render()
unmountcomponentatnode()
finddomnode()

【render()】

reactdom.render(
element,
container,
[callback]
)

渲染乙個react元素，新增到位於提供的container裡的dom元素中，並返回這個元件的乙個引用 (或者對於無狀態元件返回null)

如果這個react元素之前已經被渲染到container裡去了，這段**就會進行一次更新，並且只會改變那些反映元素最新狀態所必須的dom元素

【unmountcomponentatnode()】

reactdom.unmountcomponentatnode(container)

從dom元素中移除已掛載的react元件，清除它的事件處理器和state。如果容器內沒有掛載任何元件，這個函式什麼都不會幹。有元件被解除安裝的時候返回true，沒有元件可供解除安裝時返回 false

【finddomnode()】

reactdom.finddomnode(component)

如果這個元件已經被掛載到dom中，函式會返回對應的瀏覽器中生成的dom元素。需要從dom中讀取值時，比如表單的值，或者計算dom元素的尺寸，這個函式會非常有用。大多數情況下，可以新增乙個指向dom節點的引用，從而完全避免使用finddomnode 這個函式。當 render 返回 null 或者 false 時, finddomnode 也返回 null

版本16.3 之前，react 有兩種提供 ref 的方式：字串和**，因為字串的方式有些問題，所以官方建議使用**來使用 ref。而現在引入的 createref api，據官方說是一種零缺點的使用 ref 的方式，**方式也可以讓讓路了

class
mycomponent extends react.component 
render() />;
}}

然後使用current屬性，即可獲得當前元素

this.myref.current

典型應用如下所示

constructor(props)
handleclick = () =>

[注意]使用styledcomponents樣式化的元素暴露的介面是innerref，而不是ref

this.itemref}>

react中的DOM操作

React中的Dom操作

React 中 ref 操作DOM的使用

React 中的虛擬DOM

react中的DOM操作

React中的Dom操作

React 中 ref 操作DOM的使用

React 中的虛擬DOM

相關推薦