TIL 2[11/29]-応答素子

コンポーネントコンセプト

コンポーネントとは

リサイクル可能なUI構成ユニット.componentを用いてモジュール化することで,コードを明確に整理し,可読性を向上させ,メンテナンスを容易にすることができる.componenttypeには2つのクラスとFunctionがあります

class type

classキーとして定義し、render()関数でJSX要素を返します.

class nameDiv extends Component {
  render() {
    const name = 'my name';
    return <div className="myName">{name}</div>
  }
}

function type
functionまたはarrowとして定義され、render()を必要とせずにJSX要素を返します.

const MyComponent = () => { 
    const name = 'my name';
    return <div className="myName">{name}</div>;
};

コンポーネントの比較

比較

class type

• state, lifeCycle 관련 기능 사용 가능
• function 컴포넌트보다 메모리 자원을 더 사용
• 임의 메서드를 정의할 수 있다

function type

• state, lifeCycle 대신에 Hook을 사용
• class형 컴포넌트보다 메모리 자원을 덜 사용
• 컴포넌트 선언이 편하다

n/a.結論

functiontypeはclass typeの後に現れ、より便利であることは事実である.しかし、過去のクラス構成部品を使用するプロジェクトが多く存在し、メンテナンスのために理解する必要があります.

Hook

Hookは、関数タイプのコンポーネントが持つ強力な機能で、HookにはusState()、usEffect()などがあります.

usState():画面に表示する構成部品のステータス値と、その値を更新可能な一対の関数を返し、構成部品の内部の最上位レベルで定義され、変更を続行可能な要素

userEffect():レンダリング時または変数の値またはオブジェクトが変化したときに、その関数

を識別して更新する