今天我們要來介紹的是ReactDOMClient
我們在之前也介紹過什麼是ReactDOM了，client顧名思義就是客戶的意思，今天我們要介紹的就是用於在客戶端初始化應用程式的特定方法{ReactDOMClient}!，但是這項功能不常被使用出來，因為大多數的component不需要使用此模塊。

寫法如下
import * as ReactDOM from 'react-dom/client';
如果是使用ES5的話會有另外一種寫法:
var ReactDOM = require('react-dom/client');

概要
在客戶端的環境中主要有兩項功能:

1. createRoot()
2. hydrateRoot()

createRoot()
createRoot(container[, options]);
依照規律creatRoot就是創建一個 React root container，並且return。

const root = createRoot(container);
root.render(element);

當然也可以使用unmont語法來卸載你所創建的root
root.unmount();

creatRoot的特性:

• createRoot()可以在不覆蓋現有節點的情況下將component插入現有 DOM 的節點。
• createRoot()和hydrateRoot()渲染的container不相容。

hydrateRoot()
hydrateRoot(container, element[, options])

與createRoot 不同，hydrateRoot 接受原生JSX 作為第二個參數。這是因為初始客戶端渲染是特殊的，需要與服務器樹匹配。

如果想要在hydrate再次更新Root，就必須要調用root.render()，這個方法與creatRoot相同!
hydrateRoot中的onRecoverableError:可以在當出現錯誤時可自動從錯誤中調用。

結尾
ReactDOM.render是舊版本的方法，而我們現在所介紹的creatRoot是React18版本所做的更動，他們的主要功能都是在方法調用新的根 API，而React18版本中新的hydrateRoot方法則是代替了舊版本的hydrate方法。

React希望呈現出來的頁面中，客戶端與開發端是一致的，它可以修補一些不足，同時也必須將不匹配的地方進行修改，而不適繼續放著錯誤不去動手。

參考文章:
https://www.syncfusion.com/blogs/post/everything-you-should-know-about-react-18.aspx
https://reactjs.org/docs/react-dom-server.html