React（宣言型）とJQuery（命令型）を比較して、違いを示すのが最善です。
Reactでは、render()以前のUI状態から新しいUI状態に移行する方法を気にすることなく、メソッドでUIの最終状態を記述するだけで済みます。例えば、
render() {
const { price, volume } = this.state;
const totalPrice = price * volume;
return (
<div>
<Label value={price} className={price > 100 ? 'expensive' : 'cheap'} ... />
<Label value={volume} className={volume > 1000 ? 'high' : 'low'} ... />
<Label value={totalPrice} ... />
...
</div>
)
}
一方、JQueryでは、UIの状態を強制的に移行する必要があります。たとえば、ラベル要素を選択して、テキストとCSSを更新します。
updatePrice(price) {
$("#price-label").val(price);
$("#price-label").toggleClass('expansive', price > 100);
$("#price-label").toggleClass('cheap', price < 100);
updateTotalPrice();
...
}
updateVolume(volume) {
$("#volume-label").val(volume);
$("#volume-label").toggleClass('high', volume > 1000);
$("#volume-label").toggleClass('low', volume < 1000);
updateTotalPrice();
...
}
updateTotalPrice() {
const totalPrice = price * volume;
$("#total-price-label").val(totalPrice);
...
}
実際のシナリオでは、更新するUI要素に加えて、それらの属性（CSSスタイル、イベントリスナーなど）などがさらに多くなります。JQueryを使用してこれを強制的に行うと、複雑で面倒になります。UIの一部を更新するのを忘れたり、古いイベントハンドラーを削除するのを忘れたりするのは簡単です（メモリリークやハンドラーが複数回発生するため）。これはバグが発生する場所です。つまり、UIの状態とモデルの状態が不足しています。同期します。
モデルの状態を更新するだけでよく、ReactはUIとモデルの状態の同期を維持する責任があるため、状態が同期していないことはReactの宣言型アプローチでは発生しません。
- フックの下で、Reactは命令型コードを使用して変更されたすべてのDOM要素を更新します。
宣言型プログラミングと命令型プログラミングの違いは何ですか？に関する私の答えも読むことができます。。
PS：上記のjQueryの例から、すべてのDOM操作をupdateAll()メソッドに配置し、モデルの状態が変化するたびにそれを呼び出すと、UIが同期しなくなることはありません。正解です。これは事実上ReactがupdateAll()行うことです。唯一の違いは、jQueryが多くの不要なDOM操作を引き起こすことですが、Reactは仮想DOM差分アルゴリズムを使用して変更されたDOM要素のみを更新します。
Imperative programming: telling the "machine" how to do something, and as a result what you want to happen will happen. Declarative programming: telling the "machine"1 what you would like to happen, and let the computer figure out how to do it.