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

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

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

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

VirtualDOMはDOMのコピー

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

エスケープ処理を解除

XSS危険。

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

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

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

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

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

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

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

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

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

MyHello.js

import React, { Component } from 'react';

export default class MyHello extends Component {
    render() {
        return <div>Hello, {this.props.name} !</div>;
    }
}

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で整形

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

JSXでの条件分岐

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

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

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

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

イベント処理

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>
        );
    }
}

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してもいい

スッキリ。

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

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

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

Stateの設定

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

基本的なフォーム

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

感想

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