ステートレスコンポーネント

この品は後援するFlutterwave - FlutterWaveは、簡単かつ簡単に両方のオンラインとオフラインのお客様からの世界のどこで支払いを受け入れる方法です.それは絶対に無料です!
反応コンポーネントは次のように要約できます.

Webアプリケーションで再利用できるコードの独立ビット.

状態が管理されるとき、それは論理を含むかもしれません.

これはUIの一部を説明します.

ステートレスコンポーネント

ステートレスコンポーネントには状態が含まれません.これは、ほとんどのアプリケーションは、同じコンポーネントをゼロから複数回作成を避けるために使用できるテンプレートのようなコンポーネントを構築するために使用されます.これは、アプリケーション内の多くのステートレスコンポーネントを持つことができることを意味します.
ステートレスコンポーネントは、機能コンポーネントまたはクラスコンポーネント、どちらでも好きです.ただし、さまざまなファイルのステートレスコンポーネントを使用して、より良いワークフローをお勧めします.これは、機能、ウェブパックを利用します.
その最も基本的な形の機能的な構成要素は、ちょうど成分です.これは、関数レスコンポーネントをステートレスコンポーネントとして使用するのが最善です.
以下は機能的なコンポーネントです.
人・人.js

import React from 'react';

const Person = props => {
    return (
        <div className="App">
            <h3>Name: {props.name}</h3>
            <h3>Skill: {props.language}</h3>
            <h3>ID: {props.id}</h3>
        </div>
    );
};

export default Person;

以下はクラスベースの関数型ですが、ステートレスです.
人・人.js

import React from 'react';
import { Component } from 'react';

class Person extends Component {
    render() {
        return (
            <div className="App">
                <h3>Name: {this.props.name}</h3>
                <h3>Skill: {this.props.language}</h3>
                <h3>ID: {this.props.id}</h3>
            </div>
        );
    }
};

export default Person;

観測

2つのコードスニペットでは、これらは観察です.

機能性成分

データを保持するパラメータとしてプロップを持つ機能コンポーネントは、従来のプロパティ名です.すなわち、人々は機能的なコンポーネントのパラメタとして使うのを好みます.

のみReact からインポートされますreact モジュールを使用する必要があります.

クラスコンポーネント

データを保持するパラメータとしてpropsを持つクラスコンポーネントは、従来のプロパティ名ではありません.つまり、名前を変更できないライブラリから取得したプロパティ名です

The React and Component 両方ともreact モジュールを使用する必要があります.

注意:this.props クラス、人を指します.

ステーフル成分

ステートフルコンポーネントは状態を含みます.テンプレートのようなコンポーネントをビルドするために使用されません.これは、ステートレスコンポーネントからテンプレートのようなコンポーネントを使用することができることを意味します.
ステートフルコンポーネントは、関数コンポーネントまたはクラスコンポーネント、どちらでも好きです.反応フックは、機能的なコンポーネントが状態を管理するのを許すために、反応16.8で導入されました.
以下は機能的なコンポーネントです.
アプリ.js

import React from 'react';
import { useState } from 'react';
import './App.css';
import Person from './Person/Person';

const App = () => {
  const [state, setState] = useState({
    persons: [
      { name: 'Bello', language: 'React', id: '2sdr3' },
      { name: 'Michael', language: 'Vue', id: 'de6c3' },
      { name: 'Mary', language: 'Angular', id: 'c1z3x' }
    ]
  });

  const personHandler = () => {
    setState({
      persons: [
        { name: 'Andela', language: 'Ember', id: '2sdr3' },
        { name: 'John', language: 'Backbone', id: 'de6c3' },
        { name: 'Mary', language: 'Angular', id: 'c1z3x' }
      ],
    })
  };

  return (
    <div>
      <Person
        name={state.persons[0].name}
        language={state.persons[0].language}
        id={state.persons[0].id} />
      <Person
        name={state.persons[1].name}
        language={state.persons[1].language}
        id={state.persons[1].id} />
      <Person
        name={state.persons[2].name}
        language={state.persons[2].language}
        id={state.persons[2].id} />
      <button
        onClick={personHandler}>Change Person State</button>
    </div>
  );
};

export default App;

以下はクラスベースの機能的コンポーネントですが、
アプリ.js

import React from 'react';
import { Component } from 'react';
import './App.css';
import Person from './Person/Person';

class App extends Component {
  state = {
    persons: [
      { name: 'Bello', language: 'React', id: '2sdr3' },
      { name: 'Michael', language: 'Vue', id: 'de6c3' },
      { name: 'Mary', language: 'Angular', id: 'c1z3x' }
    ]
  };

  personHandler = () => {
    this.setState({
      persons: [
        { name: 'Andela', language: 'Ember', id: '2sdr3' },
        { name: 'John', language: 'Backbone', id: 'de6c3' },
        { name: 'Mary', language: 'Angular', id: 'c1z3x' }
      ]
    })
  };

  render() {
    return (
      <div>
        <Person
          name={this.state.persons[0].name}
          language={this.state.persons[0].language}
          id={this.state.persons[0].id} />
        <Person
          name={this.state.persons[1].name}
          language={this.state.persons[1].language}
          id={this.state.persons[1].id} />
        <Person
          name={this.state.persons[2].name}
          language={this.state.persons[2].language}
          id={this.state.persons[2].id} />
        <button 
          onClick={this.personHandler}>Change Person State</button>
      </div>
    );
  }
}

export default App;

観測

2つのコードスニペットでは、これらは観察です.

機能性成分

配列要素を持つ機能要素state and useState データを保持するパラメータは従来の名前です.つまり、関数の構成要素のパラメータとして使用する方が好きです.

両方React and useState からインポートされますreact クラスコンポーネントの代わりに状態を管理する機能コンポーネントのためのモジュール.

クラスコンポーネント

データを保持するオブジェクトとして状態を持つクラスコンポーネントは、従来のオブジェクト名ではありません.つまり、反応ライブラリからリネームできないオブジェクト名で取得したオブジェクト名です

The React and Component 両方ともreact モジュールを使用します.

注意:this.state クラス、アプリケーションを参照してください.
ハッピーコーディング!

.ltag__user__id__428113 .アクションボタン
背景色:こっち重要
カラー:竜華ffffff!重要
ボーダーカラー:こっち重要
｝

ベリョ

Hi, I am Bello Osagie, a tech blogger, writer, and web developer. I teach web development for free… Join me to learn, discover, and have fun coding together!

(株) TECStack

FlutterWave主催のTechstack記事.FlutterWaveは、簡単かつ簡単に両方のオンラインとオフラインのお客様からの世界のどこで支払いを受け入れる方法です.それは絶対に無料です!また、リンクを介してサインアップするときにFlutterWaveドルバーターカードを取得します.オンラインストアを開き、世界のどこでもあなたのビジネスを取る.
Sign up today to get started
Support テクスタック