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
感想
コンパクトにまとまっていてわかりやすかった。