React学習｜StateとProps｜React

  • 投稿日
  • 著者 kngsmym
  • カテゴリー react

State

React.Componentで状態データを保持する変数。オブジェクトとして様々な値を持たせることができる。

setState()というメソッドを用いてプロパティを変更すると、その変更を検知して再レンダリングさせるなどの使い方をする。

現時点でつかいどころが正直よくわからない。Vueでwatchに変数をセットするなどと同じ感じ？最初からwatchされてる変数ってこと？

Reactでは変数の値が変わっただけでは再レンダリングはかからない仕様？でもそれだとリアクティブではないような…。理解不足。

ライフサイクルを動かすトリガーとしてなんかうまいこと使う必要があるのだろうと思う。

Props

コンポーネントに引数を渡せる。概念的にはVueと同じ。

親コンポーネントからJSXのアトリビュートとして引数を渡す

import React from "react";
import Header from "./Header";
import Body from "./Body";
import Footer from "./Footer";

export default class Layout extends React.Component {
  render() {
    const title = "Welcome Hateruma-island"
    return (
      <article>
          <Header title={title}/>
          <Body bodytext={"波照間島へようこそ"}/>
          <Footer />
      </article>
    );
  }
}

子コンポーネント側で受け取って表示。

渡した引数はpropsというオブジェクトに格納されるので、渡した変数名でアクセス。

import React from "react";

export default class Layout extends React.Component {
  render() {
    return (
      <header>
          <h1>{this.props.title}</h1>
      </header>
    );
  }
}
import React from "react";

export default class Layout extends React.Component {
  render() {
    return (
      <article>
          <h2>{this.props.bodytext}</h2>
      </article>
    );
  }
}

そうすると以下のようにレンダリングされる。

<div id="app">
    <article>
        <header><h1>Welcome Hateruma-island</h1></header>
        <article><h2>波照間島へようこそ</h2></article>
        <footer><p>フッター</p></footer>
    </article>
</div>