# React　2. Reactの基礎１（学習日：10/23,26）
## 1. JSXの導入
### JSXとReact
Reactは、**JSXというJavaScriptの機能を全て備えた拡張機能の要素の一つ**である。
構造を記述するマークアップと、表示を記述するロジックを本質的に結合し、Reactがその事実を受け止める。
**「コンポーネント」** という単位を用いて、関心を分離する。
### JSXの利用
* JSXに式を埋め込む。
* JSXを式として扱える。（代入、引数参照、コールバック、if文やforの知識等）
* JSXで属性を指定する。→文字列リテラルやJavaScript式を指定できる。
* JSXで子要素を指定できる。
### JSXはインジェクション攻撃を防ぐ
ReactDOMはレンダリング前にエスケープして文字列への変換を行い、自分のアプリケーションで明示的に書かれたもの以外は注入できないことを保証する。
すなわち、**クロスサイトスクリプティング攻撃の防止**に役立つ。
### Reactの登場
BabelはJSXを「React.createElement()」の呼び出しへとコンパイルする。**→React処理**

## 2. 要素のレンダー
### React要素
要素は画面上に表示したいものの説明書きのことである。
**プレーンなオブジェクトで安価に作成できる。**
React DOMがReact要素に応じてDOMを更新する。
### ルートDOMノード

<div id="root"></div>

以下すべてがReact DOMにより管理される。（ルートDOMノード）
### レンダリング
DOMノードへの転送をレンダリングという。
ReactDOM.render(受け渡したいもの, idのgetter)で、React要素を受け渡す

//element:受け渡したいもの　getElementById('root'):ID="root"
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

### React要素の更新
React要素は**イミュータブル**で、一度要素を作成すると、その子要素や属性の変更が不可能となる。
唯一の変更方法が新しい要素を作成して、ReactDOM.render()に渡すことである。React要素は必要な場所のみを更新するのが望ましい。

## 3. コンポーネントとprops
コンポーネントとは、propsと呼ばれる任意の入力を受け取り、画面上に表示すべきものを記述するReact要素を返すものである。
コンポーネント名は大文字から始まる必要がある。
また、全てのReactコンポーネントは、自己のpropsに対して純関数のように振る舞わねばならない。すなわち、propsは読み取り専用のため、自分自身のpropsを変更しないようにすること。
### 関数コンポーネントとクラスコンポーネント
* 関数コンポーネント　JavaScriptの関数としてのコンポーネントのこと。
* クラスコンポーネント　クラスを定義するコンポーネントのこと。
両者はReact要素としては等価である。Reactはユーザー定義のコンポーネントを見つけると、単一のオブジェクト（props）としてコンポーネントに渡す。
### コンポーネントの組み合わせ
コンポーネント内で他のコンポーネントを呼び出すこともできる。どの詳細度においてもボタンやフォームなどは共通してコンポーネントとして表現される。
### コンポーネントの抽出
コンポーネントとはより小さく抽出することが可能である。再利用できるコンポーネントをパレットとして持っておけば、アプリが大きくなった際に利益を発揮する。（例：UIの一部（Button等）や複雑なUI（App等）は、抽出の有力候補である。）

## 4.stateとライフサイクル
stateは、propsに似ているが、コンポーネントによって管理されているプライベートなものである。
### 関数コンポーネントをクラスに変換する
React.Componentを継承する同名のクラスを作成し、関数の中身を、追加したrender()メソッドに移動する。
propsをthis.propsに書き換えて、空になった関数宣言は削除する。
### クラスにローカルstateを作成する
this.props.dateをthis.state.dateに書き換え、this.stateの初期状態をコンストラクタ内に設定する。
### クラスにライフサイクルメソッドを追加する
コンポーネントが破棄された場合にリソースを開放することが重要である。タイマー設定の開始は、最初にClockがDOMとして描画されるときである。Reactでは **「マウント」** という。
タイマーのクリアはClockが生成したDOMが削除されるときである。Reactでは **「アンマウント」** という。

componentDidMount()メソッドは、出力がDOMにレンダーされた後に実行される。タイマーのマウントが始まる。
componentWillMount()メソッドは、DOMが削除されるときにタイマーをクリアするメソッドである。
この２つのメソッドを **「ライフサイクルメソッド」** という。

### stateの更新
this.setState()メソッドを使用して、ローカルのstateの更新をスケジュールできる。

### stateを正しく使用する
* stateは直接更新しない（コンストラクタを除く）更新時はsetState()を用いる。
* stateの更新は非同期に行われる可能性がある。
* stateの更新はマージされる。（setState()を呼び出すとReactは与えられたオブジェクトを現在のstateにマージする。）
* データは下方向に伝わる。stateは外部からsetStateからしかアクセスできず、ローカルのものである。
* stateは特定のコンポーネントが所有し、stateから生じるすべてのデータ（UI）はつりーでそれらの「下」にいるコンポーネントのみに影響する。

## 5. イベント処理
### JSX(React)のイベント処理の特徴
* イベントはcamelCase（複合語の先頭を小文字、語頭を大文字にする）で記述する。
* イベントを渡すときは関数で渡す。
* return falseを行ってもデフォルトの動作は抑止できない。→preventDefaultを呼び出す。
* 要素が最初にレンダーされる際にリスナーを指定する。

### thisの呼び出しとbind
クラスのメソッドはデフォルトでbind（thisをキーワードに指定された値が入る新しい関数を生成する。）されることはない。
()をつけずに何らかのメソッドを参照する際は、bindしなければならない。（bindしなければ、thisはundefinedとなる。）

class doneCheck extends React.Component{
    constructor(props){
        super(props);
        this.state = {doneCheck: false}
        //ここで右辺がthis.handleClick(this)だとundefinedが返る。bindを忘れない。
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(){
        this.setState(state => ({
            doneCheck: !state.doneCheck
        }));
    }
    render(){
        return(
        <button onClick={this.handleClick}>
            {this.state.doneCheck ? '完了':'完了済み'}
        </button>
        );
    }
    ReactDOM.render(
        <doneCheck />,
        document.getElementById('root')
    );
}

#### bind以外の解決法
* パブリッククラスフィールド構文を用いる。
* コールバック内（onClickの右辺部分）でアロー関数を用いる。→コールバック関数がレンダリングの度に生成される問題点あり。

### イベントハンドラに引数を渡す
bindを利用する場合、アロー関数を用いる場合、どちらも利用できる。

//(1) アロー関数を用いる例
<button onClick>={(e) => this.deleteRow(id, e)}>Delete Row</button>
//(2) bindを用いる例
<button onClick>={this.deleteRow.bind(this, id)}>Delete Row</button>

###### tags: `React`