コードキャンプ4日目

Class-Component

Architecture

Apollo-Servre/Graphql

Cloud-Storage

Debouncing/Throttling

Class-Component

class

this

component-Lifecycle

Class-Component

This

これはcalss自体を意味し、state自身を意味します.
reactは主にコンポーネント機能内で使用される.
また、これは実行されるターゲットに依存し、ダイナミックスキャンとも呼ばれる.
コンソールで作成されたthisとオブジェクトの表示

this  //기본적으로 this가 가르키는것
Window {0: global, window: Window, self: Window, document: document, name: '', location: Location, …}


const aaa ={
    age: 13,
    school: "다람쥐초등학교",
    qqq: function(){
        console.log(this)
    }
}

const bbb ={
    age: 13,
    school: "다람쥐초등학교",
    qqq: ()=>{
        console.log(this)
    }
}

bbb.qqq()
VM473:5 Window {0: global, window: Window, self: Window, document: document, name: '', location: Location, …}


aaa.qqq()
VM299:5 {age: 13, school: '다람쥐초등학교', qqq: ƒ}

関数宣言式=>を矢印関数に変更するだけで、機能しないaaathisはbbbthisで動作します.
これは、実行する要素/環境に応じて異なり、線矢印関数を使用して言語にマージされます.
あるいは、異なる実行要素/環境で実行されるthisを.bind(this)で組み合わせることで、関数宣言として使用します.

component-Lifecycle

component-lifecycleは大きく4つの段階に分かれています.
クラス構成部品で使用する場合は、landerからendまでの4つの関数タグを使用します.
1.描画
2.次にコンポーネントDidMount
3.次にコンポーネントDidUpdateを変更する
4.そして消えた時にコンポーネントWillUnmount
これらの機能をすべて統合したuseEffectを使用する関数構成部品.
クラス構成部品の例を見てみましょう
ex)

import { Component, createRef } from "react";
import Router from "next/router";

interface IState {
  ischange: boolean;
  isWarning: string;
}
export default class CounterPage extends Component {
  inputRef = createRef<HTMLInputElement>();
  state = {
    isChange: false,
    isWarning: "",
  };

  componentDidMount() {
    alert("Rendered!!!");
    this.inputRef.current?.focus();
  }

  componentDidUpdate() {
    alert("Changed!!!");
  }

  componentWillUnmount() {
    alert("Bye!!");
  }

  onClickCounter = () => {
    console.log(this.state.isChange);
    if (this.state.isChange === false) {
      this.setState((prev: IState) => ({
        isChange: true,
        isWarning: "변경되었습니다.",
      }));
    } else if (this.state.isChange === true) {
      this.setState((prev: IState) => ({
        isChange: false,
        isWarning: "변경되었습니다!!!",
      }));
    }
  };

  onClickMove() {
    Router.push("/");
  }
	console.log("Hi")
  render() {
    return (
      <div>
        <input type="text" ref={this.inputRef} />
        <button onClick={this.onClickCounter}>변경</button>
        <button onClick={this.onClickMove}>이동</button>
        <div>{this.state.isWarning}</div>
      </div>
    );
  }
}

クラス構成部品では、既存のconst/letusStateなどのよく知られている要素が大量に削除されます.

state = {
    isChange: false,
    isWarning: "",
  };

一部は私たちが知っているusStateになります.render()上のconsole.log("Hi")起動後運転
1.描画
2.次にコンポーネントDidMount
3.次にコンポーネントDidUpdateを変更する
4.そして消えた時にコンポーネントWillUnmount
順番に実行します.
JavaScriptでは、原則として上から下へ順に実行します.render()以降の関数は、実行するためにマウントされなければならないためです.
よく観察すると.
1.render()は、return(~~~)の部分を描画してレンダリングします.
2.componentDidMount()このログインが完了すると実行されます.
上記の関数では、alert("Rendered!!!");Alertが最初に表示されます. this.inputRef.current?.focus();InputRefはInputBoxに自動的にフォーカスします.
3.componentDidUpdate()で変更すると、alert("Changed!!!");alertウィンドウが表示されます.
4.最後に最後の関数componentWillUnmount()alertをalert("Bye!!");で実行します.
このサイクルをcomponent-Lifecycleと呼びます.