ReactJS - DOM：初學者的指南

Hello there, future React developers! 我很高興能帶你們進入ReactJS和Document Object Model (DOM)這個迷人的世界。作為一個教了多年計算機科學的老師，我看過許多學生在最開始時為這些概念而苦惱，但請相信我，一旦你掌握了它，就像騎自行車一樣 - 你永遠不會忘記！

DOM是什麼？

在我們深入了解React與DOM的關係之前，我們先從基礎開始。將DOM想像成你網頁的家譜。你頁面上的每一個元素 - 不論是按鈕、段落還是圖像 - 都像是這棵樹中的一個家庭成員。正如你可以改變家庭成員的髮型或衣服，你也可以操縱這些DOM元素來改變你的網頁的外觀和行為。

ReactDOM：React與瀏覽器之間的橋樑

現在，讓我們來介紹我們的明星玩家：ReactDOM。將ReactDOM想像成React的超高效個人人事助理。它的主要工作是將你創建的React組件轉譯成瀏覽器能夠理解和顯示的東西。

ReactDOM的使用方法

讓我們從一個簡單的例子開始：

import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1>Hello, React World!</h1>;
ReactDOM.render(element, document.getElementById('root'));

在這段代碼中，我們告訴ReactDOM將我們的element（一個簡單的h1標題）渲染到具有ID 'root'的DOM元素內。這就像告訴你的助理：“嘿，你能將這張照片（我們的React元素）放在牆上那個相框（'root'元素）裡嗎？”

ReactDOMServer：在服務器端提供React

接下來，我們有ReactDOMServer。這就像ReactDOM的雙胞胎兄弟，在幕後工作。當ReactDOM在瀏覽器中處理事物時，ReactDOMServer幫助我們在服務器上渲染React組件。

這裡有一個簡單的例子：

import ReactDOMServer from 'react-dom/server';
import App from './App';

const html = ReactDOMServer.renderToString(<App />);

這段代碼將我們的整個App組件轉換成HTML字符串。這就像為你的React應用拍一張寶麗來照片 - 它是一個快照，可以迅速發送到瀏覽器。

ReactDOMClient：新來的孩子

隨著React 18的推出，我們認識了ReactDOMClient。這就像ReactDOM的年輕、充滿活力的弟弟，他關注性能和新的功能。

這是你可能如何使用它的方法：

import React from 'react';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

我們不是直接渲染我們的應用，而是首先創建一個'root'。這個root就像一個特殊的盆，我們可以將我們的React應用種在裡面，並觀察它帶著React 18提供的所有新功能成長。

使用ReactDOMClient

讓我們更深入地了解我們如何在真實世界中使用ReactDOMClient：

import React from 'react';
import { createRoot } from 'react-dom/client';

function Counter() {
const [count, setCount] = React.useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

const root = createRoot(document.getElementById('root'));
root.render(<Counter />);

在這個例子中，我們創建了一個簡單的計數器應用。createRoot函數設置了我們的React 18環境，讓我們可以使用所有新功能，例如自動批處理以提高性能。

比較ReactDOM方法

為了幫助你理解我們討論過的不同方法，這裡有一個方便的表格：

方法	使用於	目的
ReactDOM.render()	瀏覽器	將React元素渲染到DOM中
ReactDOMServer.renderToString()	服務器	將React組件渲染到HTML字符串
ReactDOMClient.createRoot()	瀏覽器	為React 18功能創建root
root.render()	瀏覽器	將組件渲染到創建的root中

結論

好了，各位！我們已經穿越了React DOM的風景，從經典的ReactDOM到服務器端的ReactDOMServer，最後到閃亮的新ReactDOMClient。記住，就像學習任何新語言（編程或其他）一樣，熟能生巧。不要害怕在你的项目中實驗這些概念。

正如我總是告訴我的學生，編程就像烹飪 - 你可能一開始會弄得亂七八糟，但隨著時間和練習，你會很快就能夠烹飪出美味的React應用程序！所以，去吧，讓你的雙手沾滿代碼，祝你在React的世界裡玩得開心！

Credits: Image by storyset