【React】state, props, hook

コンポーネント指向

ソフトウェア開発において部品ごとに小さく分けて開発する考え方のこと。

処理に必要な変数や値をコンポーネントに渡すだけで、そのコンポーネントの中身を見ることなく、処理を完結できる。

分割統治法：大きな問題を小さく分割して解決していく手法。

単一責任の原則：役割が単一の疎結合の状態にするという考え方。お互い影響を及ぼし合わないという考え方。
Reactでは、「ひとつのコンポーネントは理想的にはひとつのことだけをするべきだ」

StateとProps

props : 親コンポーネントから子コンポーネントへ値を渡すための仕組み

state : 各コンポーネントごとに持つ、コンポーネントの状態を管理する仕組み

Propsの使い方

1.親コンポーネント : 子に渡したい値を設定する

<LikeText likeCount={likeCount}/>

2.子コンポーネント : 親から値をもらいたいところにpropsを定義する

<p>いいね数：{props.likeCount}</p>

Hook（フック）, Stateの使い方

フック API リファレンス – React

Hook： React 16.8 で追加された新機能。state などの機能を、クラスを書かずに使えるようになる。

useState()：初回のレンダー時にstate は第 1 引数として渡された値 と等しくなります。
下記の例では、setLike(change);でstateを更新、再レンダーしている。
再レンダー時には最新版の state になります。

1.stateの初期値を設定

const [liked, setLike] = React.useState(false);

https://ja.reactjs.org/docs/hooks-reference.html

2.stateを変化させる処理を書く

直接代入できないため、引数に値を入れてstateを更新する

setLike(change);

3.stateを更新すると、必要なコンポーネントが自動で再描画される

Likeボタンを作成/コンポーネント内のstate管理。

1.ボタンを作成

2.stateを作成

3.stateの状態をボタンに反映

4.クリックイベントを作成

5.クリックイベント：stateの更新。

const { Component } = React;

// LikeButtonコンポーネント
function LikeButton(){
 // いいねのボタンの色の状態をstate管理。
   const [liked, setLike] = React.useState(false);
 
 const clicked = () =>{
   // 現在のlikedの状態と逆のboolean型をchangeに代入
     const change = !liked;
   // setLikeの更新。画面が更新される。changeを代入
     setLike(change);
 }
 
 const className = liked?'liked':'like';
 return (<button className={className} onClick={()=> clicked()} >Like</button>);
}

class App extends Component {
 render(){
   return (
     <div>
       <LikeButton/>
     </div>
   );
 }
}

ReactDOM.render(<App />, document.querySelector(".container"))

カウンターアプリの作成/コンポーネント間のstate管理

1.ボタンとカウンターテキストを作成

2.親コンポーネントにstateを作成

3.propsを使って子コンポーネントに親のstateを反映

function CountText(props: any){
	return(<p>カウント：{props.countText}</p>);
}

4.propsを使ってクリックイベントを作成

const clicked = () =>{
		props.onClick((countText: number) => countText + 1);
	}

以下、コード全文

const { Component } = React;

function CountButton(props: any){
 const clicked = () =>{
   props.onClick((countText: number) => countText + 1);
 }
 return(<button onClick={()=> clicked()}>count</button>);
}

function CountText(props: any){
 return(<p>カウント：{props.countText}</p>);
}

function App(){
 const [countText, setCount] = React.useState(100);
   return (
     <div className="parentContainer">
       <div className="childContainer">
         <CountButton onClick={setCount}/>
       </div>
       <div className="childContainer">
         <CountText countText={countText}/>
       </div>
     </div>
   );
}

ReactDOM.render(<App />, document.querySelector(".container"))​

Likeボタンカウントアプリの作成

React App

matsushimaryouya/react-like-btn-count

機能

・ライクボタンを押したときに色を変更

・ボタンを押した回数をカウント

※上記の2つのアプリを組み合わせたもの

各要素を作成

1.Likeボタン：ボタンを押すと1カウント。ボタンが押されると色が変わる

2.カウントテキスト：Likeボタンが押された時に数字が1プラスされる

3.親要素：カウントの数字の値を管理

【Likeボタンの色の変更】コンポーネント内のstate管理

1.buttonクリック時に clicked()が発火

2.likedとは逆のbool型をchangeに代入しstateにセット。

const change = !liked;
setLike(change);​

3.三項演算子。likedがtrueならclassNameに'liked'を代入。falseならlikeを代入。

 const className = liked?'liked':'like';

【いいねのカウント】別コンポーネント間のstate管理

・親要素App.jsでstate管理。
・propsでコンポーネント間のやり取りをする。

0.親要素にデフォルトの値を入れる。

const [likeCount, setCount] = React.useState(11);

1.buttonクリック時に clicked()が発火

2.propsでlikeCountに1をプラスする。

props.onClick((likeCount: number) => likeCount + 1);

3.親要素のlikeCountの値が更新される

4.再描画

5.propsから最新の値のいいね数のテキストが表示される。

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

// Likeボタンコンポーネント
function LikeButton(props: any){
 // いいねのボタンの色の状態をstate管理。setLikeが変更されると画面が更新される
 const [liked, setLike] = React.useState(false);
 // クリック時の処理。アロー関数
 const clicked = () => {
   props.onClick((likeCount: number) => likeCount + 1);
   // 現在のlikedの状態と逆のboolean型をchangeに代入
   const change = !liked;
   // setLikeの更新。画面が更新される。changeを代入
   setLike(change);
 }
 // 三項演算子
 // likedがtrueの場合はclassがlikedに
 const className = liked?'liked':'like';
 // ボタンを生成
 return <button className={className + ' likeBtn'} onClick={()=> clicked()}>Like</button>
}

// いいね数を表示
function LikeText(props: any){
 return <p>いいね数：{props.likeCount}</p>
}

// 描画----------------------------------------
function App() {
 // stateをAppで管理
 const [likeCount, setCount] = React.useState(11);

 return (
   <div className="App">
     <div className="AppBox">
       <div className="AppAbout">
           <h1 className="parentComponentTxt componentTxt">LikeText（親コンポーネント）</h1>
           <p className="componentAbout">stateはAppで管理：const [likeCount, setCount] = React.useState(11);</p>
       </div>
       <div className="AppBoxContents">
         <div className="AppContent LikeButtonBox">
           <h1 className="componentTxt">LikeButton（子コンポーネント）</h1>
           <p className="componentAbout">いいねのボタンの色の状態をstate管理。setLikeが変更されると画面が更新される。</p>
           <p className="componentAbout">const [liked, setLike] = React.useState(false);</p>
           <p className="componentAbout"> propsにCountを+1にする。</p>
           <LikeButton onClick={setCount} />
         </div>
         <div className="AppContent LikeTextBox">
           <h1 className="componentTxt">LikeText（子コンポーネント）</h1>
           <p className="componentAbout">propsからlikeCountを取得し表示。</p>
           <LikeText likeCount={likeCount}/>
         </div>
       </div>
     </div>
   </div>
 );
}

export default App;