React 提供了一種操作 UI 的聲明性方式。您無需直接操作 UI 的各個部分，而是描述組件可能處于的不同狀態，并在它們之間切換以響應用戶輸入。

聲明式 UI 與命令式 UI 的比較

在設計 UI 交互時，可能會考慮 UI 如何響應用戶操作而更改。考慮一個允許用戶提交答案的表單：

• 當您在表單中鍵入內容時，“提交”按鈕將啟用。
• 當您按“提交”時，表單和按鈕都會被禁用，并出現一個微調器。
• 如果網絡請求成功，表單將被隱藏，并顯示“謝謝”消息。
• 如果網絡請求失敗，則會顯示一條錯誤消息，并且表單將再次啟用。

在命令式編程中，上述內容直接對應于如何實現交互。您必須編寫確切的指令來操作 UI，具體取決于剛剛發生的事情。這是另一種思考方式：想象一下，在一輛車里騎在某人旁邊，然后輪流告訴他們去哪里。

他們不知道你想去哪里，他們只是聽從你的命令。（如果你把方向弄錯了，你最終會來錯地方！它之所以被稱為命令式，是因為你必須“命令”每個元素，從微調器到按鈕，告訴計算機如何更新 UI。

在這個命令式 UI 編程的例子中，表單是在沒有 React 的情況下構建的。它只使用瀏覽器 DOM：

async function handleFormSubmit(e) {e.preventDefault();disable(textarea);disable(button);show(loadingMessage);hide(errorMessage);try {await submitForm(textarea.value);show(successMessage);hide(form);} catch (err) {show(errorMessage);errorMessage.textContent = err.message;} finally {hide(loadingMessage);enable(textarea);enable(button);}
}function handleTextareaChange() {if (textarea.value.length === 0) {disable(button);} else {enable(button);}
}function hide(el) {el.style.display = 'none';
}function show(el) {el.style.display = '';
}function enable(el) {el.disabled = false;
}function disable(el) {el.disabled = true;
}function submitForm(answer) {// Pretend it's hitting the network.return new Promise((resolve, reject) => {setTimeout(() => {if (answer.toLowerCase() === 'istanbul') {resolve();} else {reject(new Error('Good guess but a wrong answer. Try again!'));}}, 1500);});
}let form = document.getElementById('form');
let textarea = document.getElementById('textarea');
let button = document.getElementById('button');
let loadingMessage = document.getElementById('loading');
let errorMessage = document.getElementById('error');
let successMessage = document.getElementById('success');
form.onsubmit = handleFormSubmit;
textarea.oninput = handleTextareaChange;

<form id="form"><h2>City quiz</h2><p>What city is located on two continents?</p><textarea id="textarea"></textarea><br /><button id="button" disabled>Submit</button><p id="loading" style="display: none">Loading...</p><p id="error" style="display: none; color: red;"></p>
</form>
<h1 id="success" style="display: none">That's right!</h1><style>
* { box-sizing: border-box; }
body { font-family: sans-serif; margin: 20px; padding: 0; }
</style>

對于孤立的示例來說，操作 UI 已經足夠好了，但在更復雜的系統中，管理起來會成倍增加。想象一下，更新一個充滿不同表單的頁面，就像這個一樣。添加新的 UI 元素或新的交互需要仔細檢查所有現有代碼，以確保沒有引入 bug（例如，忘記顯示或隱藏某些內容）。

React 就是為了解決這個問題而構建的。

在 React 中，你不會直接操作 UI，這意味著你不會直接啟用、禁用、顯示或隱藏組件。取而代之的是，你聲明了你想要顯示的內容，React 會弄清楚如何更新 UI。