React コンポーネント (クラスベース vs 機能)

React コンポーネントは、React アプリケーションの構成要素です。これにより、UI を独立した再利用可能な部分に分割し、個別に管理およびレンダリングできるようになります。 React コンポーネントには、関数コンポーネントとクラス コンポーネントという 2 つの主なタイプがあります。

機能コンポーネント
機能コンポーネントはより単純で、JavaScript 関数として記述されます。これらは props (入力データ) を引数として受け取り、UI がどのように見えるかを記述する JSX を返します。 React 16.8 以降、関数コンポーネントは useState や useEffect などのフックを使用して状態と副作用を処理することもできます。

import React, { useState } from 'react';

const Welcome = (props) => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>You've clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
};

export default Welcome;

クラスコンポーネント
クラス コンポーネントは、React でコンポーネントを記述するための元の方法でした。これらは React.Component クラスを拡張し、JSX を返す render() メソッドを含める必要があります。クラス コンポーネントは、componentDidMount、componentDidUpdate、componentWillUnmount などの独自の状態メソッドとライフサイクル メソッドを持つことができます。

import React, { Component } from 'react';

class Welcome extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <h1>Hello, {this.props.name}!</h1>
        <p>You've clicked {this.state.count} times</p>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}

export default Welcome;

主要な概念:

• JSX: HTML に似た JavaScript の構文拡張。 React コンポーネントは UI を記述するために JSX を返します。
• プロパティ: 「プロパティ」の略称であるプロパティを使用すると、親コンポーネントから子コンポーネントにデータを渡すことができます。
• State: コンポーネントでレンダリングされる内容に影響を与える動的データを保存するための組み込みオブジェクト。状態を使用するコンポーネント (関数コンポーネントまたはクラス コンポーネント) のみが、このデータへの変更に基づいて再レンダリングできます。

フック (機能コンポーネント用):

• useState: 機能コンポーネントの状態を管理できます。
• useEffect: 機能コンポーネントで副作用を実行できるようにします (データのフェッチ、DOM の更新など)。

React は、コードベースをモジュール化して保守しやすくするために組み合わせて大規模なアプリケーションを形成できる、小さくて再利用可能なコンポーネントの作成を奨励​​します。

以上がReact コンポーネント (クラスベース vs 機能)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。