React のレベルアップ : 宣言型プログラミングと命令型プログラミング

より優れた React 開発者になるには、コードの記述方法が異なるため、これら 2 つのプログラミング パラダイムを理解することが不可欠です。

命令型プログラミング

命令型プログラミングは実行の詳細に焦点を当てます。結果を達成するために必要なアクションを段階的に説明します。それは、誰かに食事の作り方を詳しく指示するようなものです。

いくつかの具体的な例を見てみましょう。

// Example 1: Filter and transform an array
const numbers = [1, 2, 3, 4, 5, 6];
const result = [];
// We describe each step
for (let i = 0; i  numbers.length; i++) {
  if (numbers[i] % 2 === 0) {
    result.push(numbers[i] * 2);
  }
}
// result = [4, 8, 12]

// Example 2: DOM Manipulation
const list = document.createElement("ul");
const items = ["Apple", "Banana", "Orange"];

items.forEach(item => {
  const li = document.createElement("li");
  li.textContent = item;
  li.className = "fruit-item";
  list.appendChild(li);
});

document.body.appendChild(list);

宣言型プログラミング

宣言型プログラミングは、「どのように」ではなく「何を」に焦点を当てます。望ましい結果を記述し、実装の詳細はシステムに処理させます。

宣言的な同じ例:

// Example 1: Filter and transform an array
const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers.filter(num => num % 2 === 0).map(num => num * 2);
// result = [4, 8, 12]

// Example 2: JSX (React)
function FruitList() {
  const items = ["Apple", "Banana", "Orange"];

  return (
    ul>
      {items.map(item => (
        li className="fruit-item" key={item}>
          {item}
        li>
      ))}
    ul>
  );
}

React と宣言型プログラミングの詳細

ご覧のとおり、React は命令型ではなく宣言型プログラミングを使用します。

簡単な例を通して、React の宣言型プログラミングのさまざまな側面を見てみましょう。

状態管理

function Counter() {
  const [count, setCount] = useState(0);

  return button onClick={() => setCount(count + 1)}>Counter: {count}button>;
}

React では、次のように状態を宣言します。 useState そしてそれがどのように変化するべきかを説明します。以下については心配する必要はありません。

• DOM の更新
• イベント処理
• 変数のライフサイクル

条件付きレンダリング

function Message({ isLoggedIn }) {
  return (
    div>
      {isLoggedIn ? h1>Welcome to your accounth1> : h1>Please log inh1>}
    div>
  );
}

React の条件付きレンダリングは宣言型です。

• 考えられる状態を説明します
• 適切なコンテンツを表示する React ハンドル
• DOM を手動で処理する必要はありません

リスト管理

function TodoList({ items }) {
  return (
    ul>
      {items.map(item => (
        li key={item.id} className={item.completed ? "done" : ""}>
          {item.text}
        li>
      ))}
    ul>
  );
}

React のリストの場合:

• 各項目の表示方法を宣言します
• の key prop は React の効率的な更新に役立ちます
• CSS クラスは宣言的に適用されます

エフェクト管理

function ResizeMessage() {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
    };

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return p>Window width: {windowWidth}pxp>;
}

useEffect フックは、React の宣言型アプローチを完全に示しています。

• 何が起こるかを宣言します（サイズ変更を聞く）
• クリーンアップ（イベントリスナーの削除）方法を宣言します。
• React はエフェクトのライフサイクルを自動的に管理します

結論

宣言型プログラミングは、アプリケーションの作成方法を変える React の重要な概念です。このアプローチにより、最終結果に到達するための手順ではなく、最終結果に焦点を当てることができます。

例を通して、React がこのパラダイムをすべてのレベルにどのように適用するかを確認しました。

• 状態管理がシンプルなデータ宣言になる
• 条件付きレンダリングは、考えられるそれぞれのケースを説明しているだけです
• リスト処理はデータ変換とともに自然に発生します
• 副作用は予測可能かつ制御された方法で管理されます

この宣言的なアプローチにより、コードがより予測可能になり、保守とテストが容易になります。これは、コードを明確で構造化したまま、複雑なインターフェイスを構築するのに役立ちます。