React 初歩

React には色々と感心・得心させられ、実に面白い。日本のReactを取り扱ったサイト群では、哲学という単語を使っているところもあるが、むしろ、道（どう）、というのが相応しいかと思う。武士道とか柔道の道（どう）。私がまず最初に感心したのは、Document道である。実にプレインな英語だけで、どうやってこれほど技術屋の心を擽ることができるものか。

https://reactjs.org/docs/hello-world.html

この分かりやすさが、英語ネイティブではない各国のプログラマたちをも惹きつけている要因の一つではないかと思う。それが理由なのか、驚くことに日本語の翻訳サイトが存在しないのですな。


さて、以下は無論翻訳を狙ったものでは無く、上 Hellow World サイトにて、私なりに感じた重要点やReact道の備忘録。


[Component and Props]

呼ぶ側のコンポーネントから流れてくる props は、リード・オンリー。編集してはいけない。propsは、親コンポーネントから子、孫、ひ孫・・・へ、変数や関数を上から下にむかって一方向で流し込む。“top-down” または “unidirectional” data flow と呼ばれる React道のひとつ。

[State and Lifecycle]

state は特殊なローカル変数であり、他のコンポーネント視点では、本コンポーネントが stateful なのか stateless なのかは全く興味の外、これもReact道のひとつ。

this.state={abc: "def"} のように直接セットできるのは constructor 内のみで許され、それ以外はダメ。必ず this.setState({comment: 'Hello'});

this.state は非同期処理されるので setState()しても即座には変化しない。変化した後に処理が必要な場合は、callback を指定できる。

// ダメな例
this.setState({
  counter: this.state.counter + this.props.increment,
});

// 正しい例
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

render() 内で使用している props, state 値に変化があり再描画の必要があると、Reactが render() を自動的に呼びに来る。


componentDidMount() は、コンポーネントがレンダーされた直後に呼ばれる。c# Winform で言うと（言うな） Form_Shown()。

componentWillUnmount() は、コンポーネントがDOMから削除された直後に呼ばれる。c#でいうと Dispose() 。


[Handling Events]

引数を渡したい場合は、賛否両論あるが、一例：

constructor(props: Props) {

super(props);

this.handleClick = this.handleClick.bind(this);

}

protected handleClick(e: any) {

e.preventDefault();

const {id} = e.currentTarget;

this.props.history.push("/doc/" + id.toString());

}

JSX側:

<div key={p.Id.toString()} id={p.Id} onClick={this.handleClick}>

render() 側の <div onClick=" で () => を使ってもよいが、render() が呼ばれるたびに、callback関数が生成されるコストがあるので、私見では上のパターンがベスト。なお、TypeScript で書いている場合、許されないタグは叱られるので、引数が複数ある場合は data-abc={1+1} などと data- をプリフィックスすればOK。


[Conditional Rendering]

おまじないのような*ngIf 的表記ではなく、React では普通のJSコードで書いていく。render() 内で return の前に様々な処理が可能であるし、return 後でも a && b、または  a ? b : c 形式で条件による render が可能。

[Lists and Keys]

<li> 等ループして render する際には、key をセットせよ、という簡単なルール。描画の高速化に役立つのだと予想する。

[Forms]

React道の面白いところのひとつ。DOM  <input>の、jQueryでいうところの val() 値は基本的に無視というか参照しない(Controlled element)。全て<input> 等 state を持つ DOM の値は、React の state が保持するよう event handler を書く。FormAPI へPOSTする際には、React の state の値を送信する。ここら、React道が jQuery パターンと逆立ちした感じで大変面白い。

利便として以下、 input elementが複数ある際、それらに個別の name を付与しておくと、event handlerが一個で済む。

handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

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