バックエンドエンジニアのための「React の仕組み」の理解方法 - めもめも

何の話かと言うと 普段、UI に関わらないバックエンドのコンポーネントを作っているエンジニアがフロントエンドのコーディングを理解しようとすると、色々と異次元な世界で混乱する（というか何をやっているのかをすぐに忘れる）ので、バックエンドエンジニアにわかりやすい形で React の仕組み（メンタルモデル）をまとめてみました*1。 ブラウザの画面に描画される個々の要素を「コンポーネント」と呼ぶ。 自分で定義したコンポーネントを HTML タグを使って表示することができる。 コンポーネントは関数として定義する。この関数は、HTML タグで指定された時の属性値を受け取って、コンポーネントを実際に描画する HTML の塊（React 要素）を返す。（つまり、コンポーネントを指定した HTML タグが、コンポーネントからの返り値の React 要素で置換される。） Javascript の関数はクロージ

[umai_bow]

"Javascript の関数はクロージャーなので、内部状態を持つことができる。つまり、個々のコンポーネントは内部状態を持つことができる。" しれっと言っているが Hooks の状態はクロージャーに保持されるわけではない

[hdampty7]

IDEのサポートがない、劣化版.NETフレームワークのような感じ(コンポーネントをツリーで管理するところは)。料理されていない生焼け感ハンパないがフロントエンジニアはなぜか崇拝してるので突っ込むと火傷する。

[fukken]

「データがこうだったら、描画結果（HTML）はこうなる」だけを記述する、がReactの本質。現在のDOMの状態から、望む最終結果に至るまでの「過程・手順」を全部隠蔽する。言ってしまえばExcelに近い。

[tekmak]

バックエンドと同じイメージでフロント作ってたらデータの持ち方が全然違うのでパラメータの持ち回りがしんどくなってくると思う。そこにはFlexとかuseContextとか用意してあったりするので苦労しないでほしい

[shingo-sasaki-0529]

こう見ると React は人類には早すぎるな。

[hate_nao]

Reactは簡単なページ作るには凄い便利なんだけどサーバーと通信してユーザーの状態持ってみたいな感じになると途端に難易度上がるイメージ。

[onesplat]

いや親子間のデータ明け渡しはもっと色々あるだろ言うべきことが

[typographicalerror]

React、割と嫌われてる印象あるんだけど、嫌ってる人の属性は気になってる。フルスタックエンジニア（という名のバックエンドエンジニアなのにフロントやらされる）が多い気がするけど突っ込むと火傷しそう

[yamadar]

未だにちゃんと身に付いてない