【備忘録】『速習REACT』の参考になった部分まとめ

<a href="https://www.amazon.co.jp/%E9%80%9F%E7%BF%92-React-%E9%80%9F%E7%BF%92%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E5%B1%B1%E7%94%B0%E7%A5%A5%E5%AF%9B-ebook/dp/B07GWFRCR1/ref=as_li_ss_il?ie=UTF8&linkCode=li3&tag=protein078-22&linkId=2ddcd0879e28c4782e80bcf72f08cf82&language=ja_JP" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B07GWFRCR1&Format=_SL250_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=protein078-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=protein078-22&language=ja_JP&l=li3&o=9&a=B07GWFRCR1" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />

## renderメソッドの更新は変更箇所のみ

```react
setInterval(() => {
    ReactDOM.render(
        <div>now {(new Date()).toLocaleString()} .</div>,
        document.getElementById('root')
    );
}, 1000);
```

オーバーヘッドを最小化している。

## VirtualDOMはDOMのコピー

いうなれぱ、メモリ上に置かれたDOMのコピー。

## エスケープ処理を解除

XSS危険。

```react
const str = 'Tanaka <br /> Yamada';

ReactDOM.render(
    <p dangerouslySetInnerHTML={{__html: str}}></p>,
    document.getElementById('root')
);
```

## JSXはJavaScriptにトランスコンパイルされる

React.createElementメソッドに変換される。

## コンポーネントは関数とクラスに分かれる

 - 関数コンポーネント
  - 引数propsを受け取る
  - 戻り値としてReact要素を返す

著者はクラスで統一をおすすめ。

## コンポーネントへのパラメーターの引き渡し

「this.props.名前」でアクセスできる。

```react:MyHello.js
import React, { Component } from 'react';

export default class MyHello extends Component {
    render() {
        return <div>Hello, {this.props.name} !</div>;
    }
}
```
```react:index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import MyHello from './MyHello'

const str = 'Tanaka <br /> Yamada';

ReactDOM.render(
    <MyHello name="Yamada" />,
    document.getElementById('root')
);

serviceWorker.unregister();
```

## mapで整形

```react
ReactDOM.render(
    <dl>{articles.map((article) =>
        <MyArticle {...article} key={article.url} />
    )}</dl>,
    document.getElementById('root')
);
```

## JSXでの条件分岐

```react
{ this.props.isNew ? <MyNew /> : null }
```

```react
{(() => {
    if (this.props.isNew) {
        return <MyNew />
    }
})()}
```

メソッドとして切り出す。

```react
renderIfNew(isNew) {
        if (isNew) {
            return <MyNew />
        }
    }
```

## イベント処理

```react:MyEvent.js
import React, { Component } from 'react';

export default class MyEvent extends Component {
    show(e) {
        console.log(`${this.props.greet}, ${e.target.value}!!`);
    }

    render() {
        return (
            <form>
                <label htmlFor="txtName">name: </label>
                <input id="txtName" type="text" onChange={this.show.bind(this)} />
            </form>
        );
    }
}
```

```react:index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import MyEvent from './MyEvent'

ReactDOM.render(
    <MyEvent greet="Hello" />,
    document.getElementById('root')
);

serviceWorker.unregister();
```

* bindは「showメソッド配下のthisを現在のthisで固定しなさい」という意味。
* イベントハンドラーにはbindする。

### コンストラクターでbindしてもいい

スッキリ。

```react
constructor(props) {
    super(props)
    this.show = this.show.bind(this);
}
```

## SyntheticEventは処理後リセットされる

* 値を退避させておく
```
const = e.type;
```
* persist( )する
```
e.persist();
```

## Stateの設定

* 初期化のみstateプロパティで、更新はsetStateで

## 基本的なフォーム

```react:MyForm.js
import React, { Component } from 'react';

export default class MyForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'Yamada Taro',
            email: 'tyamada@example.com'
        };

        this.handleChange = this.handleChange.bind(this);
        this.show = this.show.bind(this);
    }

    handleChange(e) {
        this.setState({
            [e.target.name]: e.target.value
        });
    }

    show() {
        console.log(`name: ${this.state.name}`);
        console.log(`email: ${this.state.email}`);
    }

    render() {
        return (
            <form>
                <div>
                    <label htmlFor="name">name: </label>
                    <input id="name" name="name" type="text" 
                    onChange={this.handleChange}
                    value={this.state.name} />
                </div>
                <div>
                    <label htmlFor="email">email: </label>
                    <input id="email" name="email" type="mail"
                    onChange={this.handleChange}
                    value={this.state.email} />
                </div>
                <div>
                    <button type="button" onClick={this.show}>submit</button>
                </div>
            </form>
        );
    }
}
```

``` [e.target.name]: e.target.value ```

ES2015のComputed property names
「要素名をそのままプロパティ名として、要素値に格納しなさい」という意味。

### Reactでフォームを扱う流れ

* Stateで初期値を定義する
* フォームに紐付ける
* フォーム要素の変更をStateに反映
* 値が必要になればState値を参照

## ライフサイクルとは

* コンポーネントは最初に生成された後Props/Stateの変化を受けて表示を変化させていき、最終的に文書ツリーから除去される際に破棄される。

* ライフサイクル
 * Mounting
 * Updating
 * Unmounting
 * Error Handling

## 感想

コンパクトにまとまっていてわかりやすかった。