クラスコンポーネント

クラス構成部品と関数構成部品の動作は同じです.
しかし、クラス要素の最大の違いは、関数型要素よりも多くの機能を提供することである.
クラス構成部品:stateを使用してステータスを表すか、ライフサイクルAPIのメソッドを使用して必要な順序で必要な操作を実行できます.

Class Component入門レベル

では、クラス構成部品の基本的なタイプについて説明します.

import React, { Component } from 'react';

class App extends Component {
  state : {
   	name : '클래스형'
  }
  render() {

    return <div>{this.state.name}</div>;
  }
}

export default App;

クラスコンポーネントのプロパティ

状態素子

のステータス値を定義することができ、ライフサイクルAPIを使用してレンダリング関数の戻り値に基づいてUIを表示することができる.
※render関数が必要です.

素子内で

の論理と状態

を実現する.

は比較的複雑なUIロジックを有する.

Lifecycle

クラス構成部品のライフサイクルを下図に示します.

写真の出所:lifecyclecomponentWillMount()およびcomponentDidMount()のようなライフサイクルで定義された方法を使用することができる.ただし、Reactバージョン16.8に新しく追加されたHookは、関数要素をアップグレードします.

きのうコンポーネント

関数要素はstateとlifecycleを使用していないため、Hookが現れる前に簡単な操作を実行するために関数要素が使用されます.

機能コンポーネントのエントリー・レベルの製品

機能コンポーネントの基本的なタイプは次のとおりです.

import React from 'react';

function App() {
  const name = '함수형';
  return <div>{name}</div>;
}

export default App;

機能コンポーネントの特性

無状態素子

stateではなく、簡単にpropsを受信してUIに表示するので、無状態と呼ばれます.

クラスの構成部品よりも宣言しやすく、メモリが少ない.

は過去に状態とライフサイクルAPIを使用していなかったが,Hookの導入に伴いこれらの問題が解決された.

に感銘を与える

Hookの導入に伴い使用頻度は増加しているが,古い応答コードから見るとクラス形式で使用されており,特に既存のコードを維持するためにはclassを理解する必要がある.
今の業界でもわざとclassとfunctional素子の間で交互に使われているので、どちらもはっきりしていると思います.