React Hooksのメモ

・hooksは関数コンポーネント内でstateに値の追加や更新が行えるようにするもの？
・this.setState()のような処理を行う関数を自動で作成してくれる?

index.js

import React, {useState} from "react";
import ReactDOM from "react-dom";

//function App()でも可
var App = function() {　

    //現在の値と値を更新する関数を取得
    //useState(n)のnがcntの初期値になる
    var [cnt, setCount] = useState(0);

    var addCount = function() {
        setCount(cnt + 1);
    }

    var minusCount = function() {
        setCount(cnt - 1);
    }

    return (
        <>
          <div>
              <p>Hello React!!</p>
              <input type="button" value="+1" onClick={() => addCount()} />
              <input type="button" value="-1" onClick={() => minusCount()} />
              <p>{cnt}</p>
          </div>
        </>
    )

}


/* 同じものをクラスコンポーネントで書く */
/*
class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {"cnt": 0};
        this.addCount = this.addCount.bind(this);
        this.minusCount = this.minusCount.bind(this);
    }

    addCount() {
        var cnt = this.state.cnt + 1;
        this.setState({"cnt": cnt});
    }

    minusCount() {
        var cnt = this.state.cnt - 1;
        this.setState({"cnt": cnt});
    }

    render() {
        return(
            <div>
                <p>Hello React!!</p>
                <input type="button" value="+1" onClick={this.addCount} />
                <input type="button" value="-1" onClick={this.minusCount} />
                <p>{this.state.cnt}</p>
            </div>
        );
    }

}
*/

/* クラスコンポーネントと関数コンポーネントで共通 */
ReactDOM.render(<App />, document.getElementById("app"));

hooksは複数の状態(this.state)を管理できる。
ここでは{gender: "", place: ""}の状態を管理している。

index.js

import React, {useState} from "react";
import ReactDOM from "react-dom";

var App = function() {

    //genderの値を書き換えるsetGender()関数が自動で作成される?
    var [gender, setGender] = useState("男性"); 
    var [place, setPlace] = useState("東京都");

    //genderの値を更新する
    var onClick = function() {
        if (gender === "男性") {
            setGender("女性");
        } else {
            setGender("男性");
        }
    }

    //処理が１行だけなのでonChange={() => setPlace(document.getElementById("place").value()}でも良い
    var onChange = function() {
        setPlace(document.getElementById("place").value);
    }

    return (
        <>
          <p>性別 : {gender}</p>
          <p><input type="button" value="性別変更" onClick={() => onClick()} /></p>
          <p>居住地 : {place}</p>
          <select id="place" onChange={() => onChange()}>
              <option value="東京都">東京都</option>
              <option value="神奈川県">神奈川県</option>
              <option value="埼玉県">埼玉県</option>
          </select>
        </>
    )

}


/* クラスコンポーネントと関数コンポーネントで共通 */
ReactDOM.render(<App />, document.getElementById("app"));

コンポーネントの命名について(2020/07/31追記)

コンポーネントの名前は必ず大文字で始めなければならない。
小文字だとReactDOM.render()の第一引数とコンポーネント名が一致していてもエラーが発生する。

index.js

//良い例
class App extends React.Component { (中略) }
//ダメな例
class app extends React.Component { (中略) }

//良い例
var App = function() { (中略) }
//ダメな例
var app = function() { (中略) }