反応状態コンポーネントとは何ですか?

反応状態コンポーネントには 2 つのタイプがあります: 1. ステートフル コンポーネントは状態を定義でき、データを変更する必要がある場合に使用されるコンポーネントです。2. ステートレス コンポーネントは状態を定義できず、通常はデータ自体の変更はありません。

このチュートリアルの動作環境: Windows7 システム、react17.0.1 バージョン、Dell G3 コンピューター。

React コンポーネント: ステートフル コンポーネントとステートレス コンポーネント

1. コンポーネントの状態とは

定義: 特定の瞬間におけるトランザクションの形状を記述するために使用されるデータです。通常は状態と書きます。

機能: 状態を変更でき、それに応じてビューも変更されます

機能: (1) データを保存 (2) ビューをその後更新するための基礎を築きます

たとえば、カウンターをデザインすると、1 ボタンをクリックすると、カウンターの番号が元の番号 1

2 に変わります。2 つの状態

## 2.1 ステートレス コンポーネント : 状態を定義できないコンポーネント 関数コンポーネントはステートレス コンポーネントとも呼ばれます

ステートレス コンポーネントは通常、データに変更がないアプリケーション、製品紹介テキストのレンダリングなど、リアルタイムで更新する必要がないアプリケーション、いつでも再利用できることが最大の利点です

2.2 ステートフル コンポーネント: 状態を定義できるコンポーネントクラシック コンポーネントはステートフル コンポーネントとも呼ばれます

ステートフル コンポーネントのアプリケーション シナリオはさらに広範囲です

3. クラス コンポーネントのステータス インスタンス

import React from "react";
export default class Hello extends React.Component {
  // 这里的state就是状态
  state = {
    list: [{ id: 1, name: "明天会更好" },{ id: 2, name: "难忘今宵" }],
    isLoading: true
  };
}
 
  render() {
//如果当state里的数据种类较多时可以使用解构赋值
// 例如：const { tabs, active, list, content } = this.state
    return (
      <>
        <h1>歌单-{this.state.count}</h1>
        <ul>
          {this.state.list.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
        <div>{this.state.isLoading ? "正在加载" : "加载完成"}</div>
      </>
    );
  }

[関連推奨事項:

Redis ビデオ チュートリアル ]

以上が反応状態コンポーネントとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。