2.2 ReactDOM

從這一小節開始，正式進入React的學習。如何使用React？虛擬DOM又該如何放入到真實的DOM當中？

2.2.1 React引入方式

在項目中引入React有兩種方式，一種是通過模塊化的方式進行引入，但這種方式，需要配置一些開發環境，稍后再進行介紹。另外一種引入方式是直接在頁面上通過script引入，具體示例如下：

在這里引入兩個JS文件，react.js是React的核心文件，如組件、Hooks、虛擬DOM等，都在這個文件中。react-dom.js則是對真實DOM的相關操作，如將虛擬DOM渲染到真實DOM里，或者從真實DOM中獲取節點。

2.2.2 ReactDOM

ReactDOM對象是react-dom.js提供的一個用于進行DOM操作的對象，在該對象下有一系列API用于操作DOM。在React中需要和真實的DOM打交道時都需要通過ReactDOM的API進行。當然也可以使用一些原生DOM的API，但并不推薦這么做。

使用ReactDOM要注意react-dom.js依賴于react.js，在引用的時候一定先引入react.js。接下來具體看一下ReactDOM提供的API，如果讀者是剛剛開始學習React，只需要學習render方法就夠了，其他方法可以在后期學習中補充了解。

1．render

render方法是ReactDOM在開發時唯一常用的API。render方法用于將React生成的虛擬DOM生成到真實的DOM中去。

element是React生成的虛擬DOM，也叫作ReactElement或ReactNode。除此之外也可以使用字符串去實現。

container要放置在element的容器中，它必須是一個已經存在的真實DOM節點。

callback是將ReactNode渲染到container之后的回調函數。

完整的render方法使用，可參考下列代碼：

這里將“Hello React”這段字符串渲染到了#root這個div中，當然也可以利用React-Node做更復雜的結構渲染，后文中會詳細介紹。

render方法通常用來渲染整個項目的根組件，其他組件都在根組件中一層層調用。在使用render方法時要注意container中如果有其他子內容都會被替換掉。另外render方法并不會修改container的其他特性，只是修改container的內容。

2．hydrate

上述代碼展示了hydrate的參數，它一般配合React SSR（服務端渲染）時使用。hydrate作用于ReactDOM復用ReactDOMServer服務端渲染的內容時，能夠盡可能保留其結構，并補充事件綁定等特性，它在單純的Web端并不常用，就不過多介紹了。

3．findDOMNode

Component指的是React組件，如果該組件已經渲染到DOM中，可以通過findDOMNode獲取真實的DOM。這里要注意實際開發時并不鼓勵開發者直接用findDOMNode方法來獲取DOM。后文中會講解到React的ref屬性，如果需要獲取真實DOM節點，請使用ref。

4．unmountComponentAtNode

container類似于render方法中的container，一個真實的DOM節點。unmountComponent-AtNode方法用于container中刪除已安裝的React組件并清理其事件處理程序和狀態。如果在容器中沒有安裝組件，調用這個函數則無任何反應。如果組件已經卸載，則返回true；如果組件未卸載，則返回false。具體代碼如下：

5．createPortal

createPortal方法用于將節點添加到一個新的容器中，而非父組件歸屬的容器newContainer，和container一樣，容器也必須是一個真實的DOM節點。具體代碼如下：

在該案例中，App組件中的內容是在#root元素中渲染的，但是App的子組件Child希望在#box中渲染內容，這時就需要使用createPortal方法來設置讓Child中的內容渲染到#box中。

注意：

除了render方法之外，不建議讀者直接在項目中使用這些API，并且在實際項目中一般也沒有使用render以外的API的需求。