💪 React. Class VS Function Styleコンポーネントw/ライフコード

📌 開発学習3ヶ月のto-be開発者の独学ブログ🙂ﾠOct 17 ~ 23, 2021
現在のステータス
classとfunctionを単独で勉強したので、一緒に勉強したほうが概念をよりよく身につけることができると思います.

intro

反応器は2つの方法で素子を製造する.
クラス&関数!

以前は、ステータスを関数で管理することはできませんでした.また、イベントライフサイクルAPIを使用して、構成部品の作成変更を除去することはできませんでした.
したがって、関数スタイルは、親構成部品が要求する操作のみを処理する単純な構成部品にのみ使用されます.
しかし、hooksは関数の内部でstateを処理し、ライフサイクルタスクを処理することができます.
関数とクラス
さらに強力なのは、関数の単純性を継承することです.
しかしクラスの利点もあるので、反応器はこれからもクラスをサポートすると言います.
クラスによって関数型をよりよく理解し、関数型によってクラスをよりよく理解する.
(+) npx create-react-app .
現在のディレクトリでのレスポンスアプリケーション環境の実装
関数型はreturn値を1つ作るだけで、実際の画面になります.
クラスタイプはrenderという関数を使用し、その戻り値は画面になります.
つまり、関数型は自分でレンダリングされます.

import React from 'react'
imoprt './App.css'

function App() {
    return (
        <div className="container">
            <h1>Hello, world!</h1>
            <FuncComp></FuncComp>
            <ClassComp></ClassComp>
        </div>
    );
}

// ↓ function style component

function FuncComp(){
    return (
        <div className="container">
            <h2>function style component</h2>
        </div>
    );
}

// ↓ class style component

class ClassComp extends React.Component{
    render(){
        return (
            <div className="container">
                <h2>class style component</h2>
            </div>
        )
    }
}

export default App;

じょうたいしよう

1つのコンポーネントステータスによって管理されるステータス値は、別のコンポーネントによって受信され、propsとして使用されます.
propsは2つの方法を使用していますが、stateはもともとクラスでしか使用できませんでしたが、今は変わりました.
使用方法は以下の通りです.
1)直ちにアイテム(🔴 : 上のコードに新しく追加された部分.props値を番号の横に直接印刷)
クラスはthisprops.~, 関数型作成パラメータprops~~

import React from 'react';
imoprt './App.css';

function App() {
    return (
        <div className="container">
            <h1>Hello, world!</h1>
            <FuncComp 🔴initNumber={2}></FuncComp>
            <ClassComp 🔴initNumber={2}></ClassComp>
        </div>
    );
}

// ↓ function style component

function FuncComp(🔴props){ // 매개변수명은 다른 걸로 해도 되지만 보통 props로 함
    return (
        <div className="container">
            <h2>function style component</h2>
            🔴<p>Number : {props.initNumber}</p>
        </div>
    );
}

// ↓ class style component

class ClassComp extends React.Component{
    render(){
        return (
            <div className="container">
                <h2>class style component</h2>
                🔴<p>Number : {this.props.initNumber}</p>
            </div>
        )
    }
}

export default App;

2)stateによる取得
関数型では
(🔴 : 上のコードに新しく追加された部分.props値を番号の横に直接印刷)

import React from 'react';
imoprt './App.css';

function App() {
    return (
        <div className="container">
            <h1>Hello, world!</h1>
            <FuncComp initNumber={2}></FuncComp>
            <ClassComp initNumber={2}></ClassComp>
        </div>
    );
}

// ↓ function style component

function FuncComp(props){
    return (
        <div className="container">
            <h2>function style component</h2>
            <p>Number : {props.initNumber}</p>
        </div>
    );
}

// ↓ class style component

class ClassComp extends React.Component{
  🔴state = {
    number:this.props.initNumber
    }
    render(){
        return (
            <div className="container">
                <h2>class style component</h2>
                <p>Number : {🔴this.state.number}</p>
            </div>
        )
    }
}

export default App;

hook

react 16.8から増加します.
hookを関数構成部品に使用する
react内蔵のhookを使ってもいいし、自分で作ってもいいです.
hookは「use」で始まり、フェイスブックが提供する内蔵hookです.

1) state, useState

↓ 클래스형

state = {
  number:this.props.initNumber
}

ジェネリックエレメントに対して実行される上記の操作は、関数エレメントに対して実行される操作と同じです.

import React🔴, {useState} from 'react';
imoprt './App.css';

function App() {
    return (
        <div className="container">
            <h1>Hello, world!</h1>
            <FuncComp initNumber={2}></FuncComp>
            <ClassComp initNumber={2}></ClassComp>
        </div>
    );
}

// ↓ function style component

function FuncComp(props){
    🔴let numberState = useState(props.initNumber); // useState를 호출하되 그 값을 numberState로 설정
    🔴let number = numberState[0];
    return (
        <div className="container">
            <h2>function style component</h2>
            <p>Number : {props.initNumber}</p>
        </div>
    );
}

// ↓ class style component

class ClassComp extends React.Component{
  state = {
    number:this.props.initNumber
    }
    render(){
        return (
            <div className="container">
                <h2>class style component</h2>
                <p>Number : {this.state.number}</p>
            </div>
        )
    }
}

export default App;

useStateを使用して配列を無条件に返します.配列は2つの値で構成されています.
numberState = useState(props.initNumber);返される配列の最初の位置はstateロールとしての初期値です.
整理する
関数型にstateを作成する場合は、usStateに値を渡すだけです.値は初期値です.

2) setState, useState

クラスではsetStateを使用してstateを更新しますが、関数ではusStatの2番目の値がその役割に置き換えられます.

↓ 클래스형

<input type="button" value="random" onClick={
  function(){
    this.setState({number:Math.random()})
  }.bind.(this)
}></input>

↓ 함수형

<input type="button" value="random" onClick={
  function(){
    setNumber(Math.random());
  }
}></input>

生活コード