急速に進化する Web 開発の世界において、React は動的でパフォーマンスの高いユーザー インターフェイスを構築するための基礎であり続けています。経験豊富な開発者であっても、初心者であっても、React の可能性を最大限に活用するには、React の中核となる概念を理解することが不可欠です。この記事では、ライブラリのステータスからフックの力に至るまで、React の基本原則を探求し、React スキルを向上させるための明確な基盤を提供します。飛び込んでみましょう！ ?

1. React はフレームワークですか、それともライブラリですか?

React は JavaScript ライブラリであり、フレームワークではありません。包括的なツールのセットを提供し、アプリケーションを構築する特定の方法を強制するフレームワークとは異なり、React は UI レンダリングという特定の側面に焦点を当てています。これにより、React は 1 つのことを実行し、それをうまく実行するという Unix の哲学に従っており、非常に柔軟で人気のあるものになっています。

2.仮想 DOM

DOM は、アプリケーションの UI を表す簡単な言葉で Document Object Model の略です。 UI を変更するたびに、その変更を表すために DOM が更新されます。 DOM はツリー データ構造として表されます。 UI を変更すると、DOM が再レンダリングされ、その子が更新されます。 UI の再レンダリングによりアプリケーションが遅くなります。

このソリューションでは、仮想 DOM を使用します。仮想 DOM は、DOM の仮想表現にすぎません。アプリケーションの状態が変化すると、実際の DOM ではなく仮想 DOM が更新されます。

仮想 DOM は毎回ツリーを作成し、要素はノードとして表されます。いずれかの要素が変更されると、新しい仮想 DOM ツリーが作成されます。次に、新しいツリーが前のツリーと比較または「差分」されます。

この画像では、赤い丸が変更されたノードを表します。これらのノードは、状態を変更する UI 要素を表します。次に、以前のツリーと現在変更されたツリーを比較します。更新されたツリーは実際の DOM にバッチ更新されます。これにより、React は高性能 JavaScript ライブラリとして際立っています。

要約すれば：

1. 仮想 DOM 全体が更新されます。
2. 仮想 DOM は、更新前の外観と比較されます。 React はどのオブジェクトが変更されたかを把握します。
3. 変更されたオブジェクト、および変更されたオブジェクトのみが実際の DOM で更新されます。
4. 実際の DOM を変更すると、画面が変わります。

3. JSX

JSX (JavaScript XML) を使用すると、React で HTML のようなコードを作成できます。 React.createElement(component, props, …children) 関数を使用して、HTML タグを React 要素に変換します。

例えば：
JSX コード:

  Hello, Good Morning!

この例は次のようにコンパイルされます:

React.createElement(
  MyText,
  { color: 'red' },
  'Hello, Good Morning!'
)

注: ユーザー定義コンポーネントは大文字で始める必要があります。小文字のタグは HTML 要素として扱われます。

4. JSX のプロパティ

JSX ではいくつかの方法で Props を指定できます:

小道具としての JavaScript 式:

ここで、props.sum は 6 と評価されます。

文字列リテラル:

上の両方の例は同等です。

プロパティのデフォルトは「True」
prop の値を渡さない場合、デフォルトは true になります。

例えば、

上の両方の例は同等です。

5.クラスコンポーネント

React のコンポーネントはクラスまたは関数として定義できます。クラスコンポーネントを定義する方法は次のとおりです:

class Greetings extends React.Component {
  render() {
    return 
Hello, {this.props.name}
;
  }
}

6.コンポーネントのライフサイクル

コンポーネントには、特定の段階でコードを実行するためにオーバーライドできるライフサイクル メソッドがあります:

マウント: コンポーネントが作成され、DOM に挿入されるとき。

• コンストラクタ（）
• 与える（）
• componentDidMount()

更新中: プロパティまたは状態が変更されたとき。

• 与える（）
• componentDidUpdate()

アンマウント: コンポーネントが DOM から削除されるとき。

• componentWillUnmount()

7.クラスのプロパティ

defaultProps を使用すると、小道具のデフォルト値を定義できます:

class MyText extends React.Component {
  // Component code here
}

MyText.defaultProps = {
  color: 'gray'
};

props.color が指定されていない場合は、デフォルトで「グレー」になります。

8.プロップタイプ

コンポーネントの渡されたプロパティの型を確認するために prop-type を使用できます。一致しない場合はエラーが発生します。

import PropTypes from 'prop-types';

const studentPropTypes = {
  studentName: PropTypes.string,
  id: PropTypes.number
};

const props = {
  studentName: 'Asima',
  id: 'hi' // Invalid
};

PropTypes.checkPropTypes(studentPropTypes, props, 'prop', 'MyComponent');

これにより、ID の型の不一致について警告されます。

9.パフォーマンスの最適化

React はパフォーマンスを考慮して設計されていますが、さらに最適化することができます:

本番ビルドの使用:

npm run build

これにより、最適化された本番ビルドが作成されます。

ソース コードの最小化: React のソース コードへの変更には注意してください。

コード分割: JavaScript コードをチャンクにバンドルして、必要に応じてロードします。

10.反応フック

フックは、関数コンポーネントで状態やその他の React 機能を使用できるようにする関数です。最も人気のある 2 つのフックは次のとおりです:

useState: 関数コンポーネントに状態を追加します。

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

  return (
    

      
You clicked {count} times
       setCount(count   1)}>Click me
    
  );
}

useEffect: 関数コンポーネントの副作用を管理します。

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    

      
You clicked {count} times
       setCount(count   1)}>Click me
    
  );
}

React は、現代の Web 開発の要求を満たすために継続的に進化しており、効率的でスケーラブルなアプリケーションを構築するには、その中心となる概念を習得することが重要です。 React がライブラリとしてどのように差別化されているかを理解することから、機能コンポーネントのフックの力を利用することまで、これらの基礎は React の習熟度への道を導きます。

プロジェクトで React の探索と実装を続けるときは、最新のプラクティスと機能を常に最新の状態に保つことが、変化し続けるテクノロジー環境で常に先を行くことにつながることを忘れないでください。この記事が価値があると思われた場合は、「いいね」を押して、React の知識を深めたい他の開発者と共有することを忘れないでください。

読んでいただきありがとうございます。コーディングを楽しんでください。 ?