react-dom的五個接口是什么

這篇文章主要介紹了react-dom的五個接口是什么，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

react-dom是react開發項目時需要使用的工具包，是一種針對dom的平臺實現，主要用于在web端進行渲染。react-dom包提供了DOM特定的方法，可以在應用程序的頂層使用，也可以作為React模型之外的特殊操作DOM的接口。

使用react開發網頁的話，我們難免會下載兩個包，一個是react，一個是react-dom，其中react是react的核心代碼。

react-dom 的 package 提供了可在應用頂層使用的 DOM（DOM-specific）方法，react-dom 包提供了 DOM 特定的方法，可以在你的應用程序的頂層使用，如果有需要，你可以把這些方法用于 React 模型以外的地方，作為 React模型 之外的特殊操作DOM的接口。不過一般情況下，大部分組件都不需要使用這個模塊。

如果你使用 npm 和 ES6，你可以用 import ReactDOM from 'react-dom'進行引入。如果你使用 npm 和 ES5，你可以用 var ReactDOM = require('react-dom')進行引入。

react-dom的五個接口

1、render()

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

在提供的 container 里渲染一個 React 元素，并返回對該組件的引用（或者針對無狀態組件返回 null）。

如果 React 元素之前已經在 container 里渲染過，這將會對其執行更新操作，并僅會在必要時改變 DOM 以映射最新的 React 元素。

如果提供了可選的回調函數，該回調將在組件被渲染或更新之后被執行。

2、hydrate()

ReactDOM.render(element, container[, callback])
// 渲染一個 React 元素到由 container 提供的 DOM 中，并且返回組件的一個 引用(reference) （或者對于 無狀態組件 返回 null ）

3、unmountComponentAtNode()

ReactDOM.unmountComponentAtNode(container)
// 從 DOM 中移除已裝載的 React 組件，并清除其事件處理程序和 state 。 如果在容器中沒有掛載組件，調用此函數什么也不做。 如果組件被卸載，則返回 true ，如果沒有要卸載的組件，則返回 false

4、findDOMNode() 不建議使用

ReactDOM.findDOMNode(component)
// 如果組件已經被裝載到 DOM 中，這將返回相應的原生瀏覽器 DOM 元素。在大多數情況下，你可以綁定一個 ref 到 DOM 節點上，從而避免使用findDOMNode。

5、createPortal() 這個很有用處，啊啊啊！

ReactDOM.createPortal(child, container)
// 創建一個 插槽(portal) 。 插槽提供了一種方法，可以將子元素渲染到 DOM 組件層次結構之外的 DOM 節點中

感謝你能夠認真閱讀完這篇文章，希望小編分享react-dom的五個接口是什么內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!