React | stateについて

■stateとは
■なぜstateを使うのか
■stateの取得
■参照元

■stateとは

・コンポーネント内で管理する変数
・プロップスとして子コンポーネントに渡せる
・ローカルステートと呼ばれる

★Reduxはどのコンポーネントからでも参照できるグローバルステートを持っている。

ローカルステートはその対義語的な意味合い。

■なぜstateを使うのか

・render()内では値を変更してはいけない
・setState()で変更する
・stateの変更は再レンダーのきっかけ

■stateの取得

・同コンポーネントならthis.state.keyで取得できる
・子コンポーネントで参照したい時はpropsとして渡す

class Blog extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
          isPublished: false,
      }
  }

    togglePublished = () => {
        this.setState({
            isPublished: !this.state.isPublished
        })
    };
    
  render() {
    return (
      <React.Fragment>
            <Article
                title={"reactの使い方"}
                isPublished={this.state.isPublished}
                toggle={() => this.togglePublished()}
            />
      </React.Fragment>
    );
  }
}

class Blog extends React.Component {

constructor(props) {

super(props);

this.state = {

isPublished: false,

}

togglePublished = () => {

this.setState({

isPublished: !this.state.isPublished

})

};

render() {

return (

<React.Fragment>

<Article

title={"reactの使い方"}

isPublished={this.state.isPublished}

toggle={() => this.togglePublished()}

</React.Fragment>

);

}

import React from "react";

const Article = (props) => {
  return (
    <div>
      <h2>{props.title}</h2>
      <label htmlFor="check">公開状態</label>
          <input type="checkbox" checked={props.isPublished} id="check" onClick={() => props.toggle()}/>
    </div>
  );
};

export default Article;

import React from "react";

const Article = (props) => {

return (

<div>

<h2>{props.title}</h2>

<input type="checkbox" checked={props.isPublished} id="check" onClick={() => props.toggle()}/>

</div>

);

};

export default Article;

■stateとは

■なぜstateを使うのか

■stateの取得

■参照元