React propsとstateについて メモ

React公式チュートリアルをやってみて

前回も話した通りReactのチュートリアルをやってみました。
その中でも

• function component / class component
• props
• state

というのに少しなれなく自分で調べたりもしたので、
今回は「component」「props」「state」について自分なりにまとめてメモとして残したいと思います。

component

コンポーネントはHTMLタグの塊。
自分で新しくタグを作るという感覚で腑に落ちました。
例えば新しく <Welcome /> というタグ（コンポーネント）を作る場合は以下の様になります。

// React.Componentクラスを継承したクラス
// → class component
class Welcome extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>;
    }
}

ただ上記の様に render() メソッドしかないクラスの場合に限っては、
以下の様に関数として書けます。

// → function component
function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

returnで返すタグが多い場合は以下の様に書けます。

function Welcome(props) {
    return (
        <div>
            <h1>...</h1>
            <h1>...</h1>
            <h1>...</h1>
        </div>
    );
}

実際にコンポーネントを呼ぶ際は以下の様になります。

// HTMLの <div id="root"> 内に吐き出される
ReactDOM.render(
    <Welcome />,
    document.getElementById('root')
);

props

実際に呼ばれたタグに付いているプロパティ。
例えば、<Welcome name="world" /> とタグ（コンポーネント）を呼ぶと props.name と書くと "world" が取得できます。
もちろんタグにつけるプロパティも自分で設定できます。 <Welcome freedom="world" /> とプロパティを設定して書けば props.freedom で取得できます。
そう考えると上記のWelcomeクラスのpropsも理解できると思います。
この様に書くと...もう想像できますね。

function App() {
    return (
        <div>
            <Welcome name="Sara" />
            <Welcome name="Cahal" />
            <Welcome name="Edite" />
        </div>
    );
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

// 結果
Hello, Sara.
Hello, Cahal.
Hello, Edite.

の様に出力されます。
またpropsの中には Object や Data, Function が入っている場合もあります。

state

その名前のとおり「状態」を表す為のものです。
クラスのプロパティの様なイメージでしょうか。ただし、この state の値は constructor の中に書き、定数です。（変数の様に数値を書き換えることはできません。）
設定の仕方は以下の通りです。ここでは js の Date() クラスをstateに持たせています。

class Clock extends React.Component {
    constructor(props) {
        super(props);
        // ↓ ここでstateの設定をしています。
        this.state = {date: new Date()};
    }

    render() {
        return (
            <h1>
                {this.state.date.toLocaleTimeString()}
            </h1>
        );
    }
}

stateを書き換えることは setState() メソッドを呼ぶことで可能です。
setState() を呼ぶと同時に render() も再び呼ばれます。

tick() {
    this.setState({
        date: new Date()
    });
}

この性質を利用すると定期的に tick() を呼び出すと勝手に現在の時刻に更新するので、 簡単に時計が作れます。

最後に

まださわりしかやっていなく、間違っていることをいうこともあると思うので、間違っていたらご指摘ください。
React勉強続けます。