TIL 25|[react]クラスvs関数型

反応器を用いてフロント開発を行う場合,素子宣言は2つの方法で行うことができる.
過去は主にクラス素子を使用していたが、2019年v 16.8リリース後、関数型構成部品に応答フック(hook)のサポートが提供され、現在、公式ドキュメントで関数型構成部品とフックを同時に使用することを推奨しています.
ある方法を指図するよりも、両方の方法をよく知っていて、必要に応じて異なる方法を使っています.

構成部品

コンポーネントは、特定のデータに対してUIを作成する機能だけでなく、ライフサイクルAPIを使用して、コンポーネントが画面に表示、消去、および変更されたときのタスクも実行します.

クラス構成部品

import React, { Component } from 'react';

class App extends Component {
  render() {
    return <div>
      </div>;
  }
}

export default App;

関数構成部品

import React from 'react';

function App() {
  return <div>
    </div>;
}

export default App;

差異

違いは、クラス要素と関数要素の役割は同じですが、クラス要素は状態機能とライフサイクル機能を使用して、任意の方法を定義することができます.また、クラス要素はrender関数を返し、そこに表示されるJSXを返さなければなりません.
これに対して、関数構成部品の利点は、クラス構成部品よりも宣言しやすく、メモリリソースがクラス構成部品よりも消費されないことです.プロジェクトの構築と導入が完了すると、成果物のファイルサイズが小さくなり、stateとライフサイクルAPIが使用できないという主な欠点があります.しかしこの欠点は前述の反応v 16のように8回の更新後にHooks機能を導入し,解決した.

props値転送の取得

クラス#クラス#

クラス構成部品では、親構成部品定義のprops値は{this.props.props이름}で表される.

かんすうがた

関数型素子では、親素子から定義されたprops値を関数のパラメータ値(=parameter)とします.すなわち,親素子が伝達するprops値を素子のパラメータに設定し,関数内部にprops値を伝達して画面に表示させる.

ステータス値の使用

クラス#クラス#

クラス内で初期値を設定して使用します.state値を使用する場合、state値{this.state.state의 속성명}を使用できます.setStateでstateの値を変更することもできます.

import React, { Component } from 'react';

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

かんすうがた

関数型素子では、hookでステータス値を使用できます.次の関数型構成部品では、numberという名前の状態とsetNumberという名前の状態変更関数をusStateで宣言し、usStateで得られた関数(setNumber)を使用して必要な値をパラメータに渡します.これにより、ステータスの宣言と変更プロセスが大幅に簡素化されます.

const React, { useState } from 'react';

const Counter = () => {
  
  const [number, setNumber] = useState('');
  ...
}