反応ベースクラス-2

ダミードーム

従来のDOMでは、多くのタスクを実行するときにエラーが発生したり、ブラウザがフリーズしたりすることが多く、不要な演算が多すぎます.
仮想ドーム(Virtual DOM)は、実際のDOMドキュメントの抽象化であり、仮想ドームとメモリを前処理および記憶するためのプログラミング概念であり、変化の大きいビューを実際のDOMに直接配置し、実際のDOMと同期するのではなく、仮想ドームとメモリを前処理および記憶するための概念である.
仮想ドームの動き:既存のDOMと新しく描画したDOMを比較し、変更部分のみ変更
新規DOMの場合

初めてページに入るときは

データ変更時は

ライフサイクル

構成部品のライフサイクル(構成部品のライフサイクル)

コンポーネントがレンダリングの準備をしていた瞬間から、ページから消えるまでのライフサイクルです.

ライフサイクル関数クラス構成部品のみ
構成部品の作成:componentDidMount()更新:componentDidUpdate()削除さくじょ:componentWillUnmount()

「構成部品」(Component)は、機能を単位でカプセル化する単位です.構成部品の特徴は、再利用可能で拡張可能であるべきである.こうして作った破片が集まってサイトを作ります.
構成部品とは、独立した再利用可能な部品の破片を指します.
反応ページは素子の組み合わせです.
反応フックとは?
hookはクラス素子の機能を関数型素子でも利用できる機能である.hookにより、関数型素子で素子の定数を管理したり、素子のライフサイクル関数を利用したりすることができます.

Component

state

stateは主に、1つの構成部品でのみ使用される情報を作成および変更するために使用されます(stateは構成部品が所有するデータです).
構成部品内でのみ作成および変更できます.

Props

<container> <!--부모 컴포넌트 -->
	<imagebanner/> <!--자식 컴포넌트-->
	<contents1/> <!--자식 컴포넌트-->
</container>

Props親コンポーネントから受信したデータ
Propsで受信したデータは変更できません.
レスポンスコード規則:
フォルダは小文字で始まるキャビネットを使用します
JSファイル、構成部品名大文字で始まるcamel case
親アプリケーション構成部品から子BucketList構成部品にステータスを移動します.

App.js親伝達値

 return (
      <div className="App">
        <h1>내 버킷리스트</h1>
        <BucketList list= ['영화관 가기', '수영 배우기']/>
      </div>
    );
  }

BucketList.jsサブアイテムから値

を取得

function Bucketlist(props){
    return (
        <div>{props.list}</div>
    );
}

Ref

useref()は反応フックです
反応器からDOM元素を導入する
まずReact.useRef()を発表します.
必要な位置にref={}の形で記入すればよい.

const nameInput = React.useRef();

return(
	<div> <input ref={nameInput} /> </div>
)
//input에 입력된 값을 가지고 오려면 <input ref={nameInput.current.value} />

ステータス管理

useState()は反応フックです.const [count, setCount] = React.useState(3);countはステータス値
setCountはcountを変更する関数です(ステータスを変更)
useState(state初期値)

const AddMinus = (props) => {
  const [count, setCount] = React.useState(3);
  console.log(count) //초기값 3이 나온다.

  const add = () => {
    setCount(count + 1); //state값 +1씩 변경
  };
  const removeNemo = () => {
    setCount(count - 1); //state값 -1씩 변경 
  }