Fundamental Core Concepts of React

急速に進化する 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 コード:

<MyText color="red">
  Hello, Good Morning!
</MyText>

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

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

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

4. JSX のプロパティ

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

小道具としての JavaScript 式:

<SumComponent sum={1 + 2 + 3} />

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

文字列リテラル:

<TextComponent text={‘Good Morning!’} />

<TextComponent text=”Good Morning!” />

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

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

たとえば、

<TextComponent prop/>

<TextComponent prop={true} />

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

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

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

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

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

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

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

• コンストラクター()
• レンダリング()
• componentDidMount()

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

• レンダリング()
• componentDidUpdate()

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

• componentWillUnmount()

7.クラスのプロパティ

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

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

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

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

8.プロップタイプ

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

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

This creates a production build with optimizations.

Minimize Source Code: Be cautious with changes to React's source code.

Code Splitting: Bundle JavaScript code into chunks to load as needed.

10. React Hooks

Hooks are functions that let you use state and other React features in function components. The two most popular hooks are:

useState: Adds state to function components.

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

useEffect: Manages side effects in function components.

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

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

React has continually evolved to meet the demands of modern web development, and mastering its core concepts is crucial for building efficient, scalable applications. From understanding how React differentiates itself as a library to harnessing the power of hooks for functional components, these fundamentals will set you on the path to React proficiency.

As you continue to explore and implement React in your projects, remember that staying updated with the latest practices and features will keep you ahead in the ever-changing tech landscape. If you found this article valuable, don’t forget to give it a like and share it with fellow developers eager to deepen their React knowledge!

Thank you for reading, and happy coding! ?

The above is the detailed content of Fundamental Core Concepts of React. For more information, please follow other related articles on the PHP Chinese website!