React(コンポーネントの基本) とらゼミ04 メモ

コンポーネントとは

とらゼミ01にて記述。

何故コンポーネントを使うのか。

• 再利用するため。
• 分割統治するため、コンポーネントのツリー構造的にも細かく分かれている。
• 変更に強くするため。

コンポーネントの種類

Class component

クラスによって定義されたコンポーネント。
例)

import React from 'react';

class Article extends React.Component {
    // コンストラクタ
    constructor(props) {
        super(props)
    }

    //renderメソッド
    render() {
        return(
            <div>
                <h2>{this.props.title}</h2>
            </div>
        )
    }
}

特徴

• React.Componentを継承。
• ライフサイクルやstateを持つ。(ライフサイクルはとらゼミ05を参照)
• propsにはthisが必要。
• 2020年4月現在あまり推奨されていない。

functional component

関数型で定義されたコンポーネント。
例)

import React from 'react';

const Article = (props) => {
    return (
        <div>
             <h2>{props.title}</h2>
        </div>
    )
}

特徴

• ES6のアロー関数で記述。
• stateを持たない(stateless)。
• propsを引数に受け取る。
• JSXをreturnする。

React.Fragment

コンポーネント内でコンポーネントを使う際、必ずタグで囲む必要がある。

lass Blog extends React.Component {
    //  コンストラクタ
    constructor(props){
        super(props); //スーパークラスのコンストラクタ。
    }
    // renderメソッド
    render(){
        return(
            <div>
                <Article />
            </div>
        )
    }
}

divで囲んんでもいいがweb画面でElement構造を見てみると、かなり汚くなる。

こう言う時にコンポーネントをReact.Fragmentタグで囲むと。

divタグが無くなり、かなりスッキリする。
ただしdivが要らない訳じゃ無いので、場合によって使い分ける必要がある。

propsでデータを受け渡す。(引数名はprops固定ではない)

• 子データ、 コンポーネントを使われる側、propsを介してデータを受け取る。

mport React from 'react'

const Article = (props) => {
    return (
        <div>
            <h2>{props.title}</h2>
        </div>
    )
}

export default Article;

• 親コンポーネント、コンポーネントを使う側、propsに名前と値を送る。

import React from 'react'
import Article from './Ariticle.jsx'

const Blog = () => {
    return(
        <React.Fragment>
            <Article title = {"React"}/>
        </React.Fragment>
    )
}

export default Blog;

受け渡せるデータ型

{}内に書けば文字列、数値、真偽値、配列、オブジェクトなんでも渡せる。
文字列は「{ }」 無しでも大丈夫。