React と React Native のスレ

**デフォルトの名無しさん** · 2019/03/09(土) 21:29:27.97

Q. Reactってなんですか？
A. ブラウザで動くウェブアプリを作るJavaScriptフレームワークです

Q. React使えば、iOSやAndroidアプリも作れるのですか？
A. 作れません。（ブラウザでなら動きます）

Q. でも動くってきいたんだけど？
A. それはReactではなくReact Nativeです。

Q. React と React Native は同じようなものじゃないの？
A. 設計思想が同じなだけで、中身は全くの別物です。

Q. React Nativeで作ればブラウザで動くの？
A. 動きません。（動くようにするサードパーティ製のライブラリならあります）

Q. React と React Native でソースコード共通化できるの？
A. UIの部分は共通化出来ません。UI以外の部分なら頑張れば

Q. このスレはどっちの話題のスレなの？
A. 両方です。どっちの話題をしているかは文脈で判断してください

**デフォルトの名無しさん** · 2021/02/14(日) 04:47:15.25

>>70 副作用がないようにしてる設計
それがclassベースでは出来ない？？って疑問。

>>69
ならhookがclassより上という事ではなくなる。
でも公式コメントでもclassよりhookのモデルが優秀みたいな書き方。
ただclassは無くさずこのまま残しますみたいな。

なんかfunctionを無理やり生存期間拡張してるところが
感覚的に違和感モヤモヤ。

hookの機能をclassで実装するとやりづらい箇所って、
同名メソッドを複数定義できる箇所ぐらい？

**デフォルトの名無しさん** · 2021/02/14(日) 04:59:08.67

>>71
もちろんできるしそれを手動でやってきたのがクラス
でもsetState呼ばなかったり状態にオブジェクトが必須だったりで色んなミスが起きやすかった
それをフレームワーク側で全部やって
ユーザーが書きやすくするのがHooks
人間がやるよりフレームワークがやる方が信頼性が高いし賢いからそこは任せた方が良いよねってことで生まれたと勝手に思っている

**デフォルトの名無しさん** · 2021/02/14(日) 05:41:48.27

>>72
だから、それ（hook）をclassべースで提供できないの？って言ってんの。

**デフォルトの名無しさん** · 2021/02/14(日) 05:48:13.99

クラスはhookなしで同じことができるから提供する必要がない

**デフォルトの名無しさん** · 2021/02/14(日) 07:45:04.97

>>73
いやだからsetStateという汎用的な物しか提供できないっことね
stateを自分で好き勝手いじれるのに
それをライブラリが管理するって無理でしょ
hooksは内部で対応するコンポーネントとその状態を管理してるから
ライブラリとして提供できる

**デフォルトの名無しさん** · 2021/02/14(日) 13:32:40.22

>>75
分かんない人だな。
なんで今のclassベースの実装をこの話に持ち込むの。

hookの機能を”function”でなく、jsの”class”で実現できないの？っていう疑問なの。

**デフォルトの名無しさん** · 2021/02/14(日) 14:00:51.86

お前もわからずやだな
useStateだろうがuseEffectだろうがuseCallbackだろうがuseRefだろうがclassコンポーネントはhookなしで同じことが実現できてるだろ

**デフォルトの名無しさん** · 2021/02/14(日) 14:19:02.14

hookを知らないやつだったか。アホらし。

**デフォルトの名無しさん** · 2021/02/14(日) 14:34:40.65

時系列的には

クラスコンポーネント: 状態を扱える
↓
"ステートレス"関数コンポーネント: 状態を扱えない
↓
関数コンポーネント+hooks: 状態を扱える

と発展してきた
つまりhooksはクラスコンポーネントができていたことを関数コンポーネントでもできるようにするために後から追加されたもの
ただし

クラスコンポーネント: 状態をコンポーネントが管理する
関数コンポーネント+hooks: 状態をフレームワークが管理する

という違いがある
これが今後のconcurrent modeやserver componentsで大きな違いになってくる
フレームワークができることを増やすにはコンポーネント側の自由度は低い方がよくてそれがpureな関数コンポーネント

**デフォルトの名無しさん** · 2021/02/14(日) 14:46:29.94

>>79
この解説から見ると、自分の疑問は
"状態をフレームワークが管理する"
にはclass実装では不利なのか？向かないのか？
って事になる。ね。

**デフォルトの名無しさん** · 2021/02/14(日) 15:15:15.08

クラスコンポーネントのインスタンスはthis.～で自由に状態を扱えてしまうからフレームワークには都合が悪い
そこをthis禁止のように縛っていくとただの関数でいいやってなる

**デフォルトの名無しさん** · 2021/02/14(日) 16:39:29.19

useCallbackみたいな単なるラッパー関数がclassにも欲しいってこと？
なんかそう言うパッケージ見たことあるぞ

**デフォルトの名無しさん** · 2021/02/14(日) 16:59:03.97

classコンポーネントにuseCallbackはいらんやろ
前はbindしたり面倒だったけどstage3のclass fields使えばこれだけ

class Foo extends React.Component {
　handleClick = (ev) => {...}

**デフォルトの名無しさん** · 2021/02/14(日) 21:01:15.04

Ruby on Rails では、控えめなJS フレームワークのStimulu もある

規約で、HTML のdata-controller 属性で、JSファイル名・コントローラーが決まるので、
そこにイベント処理を書くだけ

DOM・コントローラーは、多対多

1つのDOMは、複数のコントローラーで処理できる。
HTML内で、同じコントローラーを複数定義できる

Stimuluは、this を使う。
同じコントローラーを複数定義したら、別のインスタンスを作る

<li data-controller="a">1</li>
<li data-controller="a">2</li>

**デフォルトの名無しさん** · 2021/02/14(日) 21:03:03.46

ス・レ・チ

**デフォルトの名無しさん** · 2021/02/15(月) 02:51:04.90

マジで障害者かな？
この板に巣食ってる人がいるのは認識してたけど

**デフォルトの名無しさん** · 2021/06/18(金) 09:52:07.92

React Hooks + Reduxの利点を述べた記事をいくつか読んだのですが、
MVCでだめな理由がよくわかりませんでした。

複数のModelがReduxのStoreに一本化される: Modelをシングルトンにして、
Storeの内部で区分するところをModelのメンバとして区分する。

ViewからはActionを発行してReducerを通さないとStoreを更新できない:
ViewはControllerに登録されたメソッドを通してしかModelを更新できない。

Storeの更新はViewに自動的に反映される。
Model(とそのメンバ、孫メンバ)がObservableであれば、Modelの更新を
自動的にViewに反映させることができる。

ではだめなんでしょうか。

**デフォルトの名無しさん** · 2021/08/10(火) 10:10:26.07

Reactで関数コンポーネントで本気実装始めたんだが、
関数コンポーネント面倒くさ過ぎじゃね？

関数コンポネント入門位の実装なら問題なかったんだが、
ちょっと込み入ったの実装しようと思ったら
クラスじゃないんで、コンポーネントの自前メソッドを（子から親、親から子）公開するのとか
そのTS型定義をどうするのとかうまく解決できんのか？これwww

**デフォルトの名無しさん** · 2021/08/10(火) 10:18:58.12

込み入った実装ってだいたい設計から間違ってるよね…

**デフォルトの名無しさん** · 2021/08/10(火) 10:22:58.46

>>89
あんたが考えてんの具体的にどのレベルだ？
こっちはネイティブアプリ同等の、ガントチャート状のスケジューラーの実装なんだが
コンポーネント間のメソッド呼び出しは結構多いぞ

**デフォルトの名無しさん** · 2021/08/10(火) 11:17:59.39

奇遇だな、Webとネイティブ両用のスケジュール管理系やってるよ
推測だけどコンポーネントとデータ構造(いわゆるモデル)が分離できてないんだろうと思うわ
同じものをネイティブでも作ることを仮定して共有できるところ(モデル)とできないところ(レンダリング)にわけて考えてみるといんじゃね

**デフォルトの名無しさん** · 2021/08/10(火) 11:27:05.53

>>91
！！
まだReact不慣れで困ってる
半年前にReact初めてそちはクラスベース（TS）だったので、
実装できない事は無かったのでこういった苦労はなかった

>>コンポーネントとデータ構造(いわゆるモデル)が分離できてないんだろうと思うわ

どうだろう？
あんまり業務的なことを書くわけにはいかんけど、
親パネル側から、配置されたコンポーネントの機能を呼び出したいんだが、
コンポーネントが今回クラスから関数に変わったんで、
コンポーネント側にコンポーネント固有の機能（クラスん時はメソッド）が実装しずらくなって困ってる

関数コンポーネントだとここにメソッドとか置かないもんなの？

**デフォルトの名無しさん** · 2021/08/10(火) 12:03:49.33

関数なんだから、オブジェクト指向的な実装はムリなんだろうな
とりあえず、

・クラス → モジュール
・プロパティ → モジュールの関数の引数
・メソッド → モジュールの関数

に置き換えて実装してみるわ

**デフォルトの名無しさん** · 2021/08/10(火) 12:28:03.76

関数であれクラスであれ(つかもっと前から)Reactのコンポーネントは渡されたデータ(Props)をただベタッとレンダリングするだけってのがコンセプト
その超基本的なところをわかってなさそう
他の言語やフレームーワークの考え方のままReact始めたのか知らんけどそれをReactに置き換えるよりReact流の考え方を身につけたほうがいいと思うわ

**デフォルトの名無しさん** · 2021/08/10(火) 12:36:48.42

いや、アトミックデザイン的に機能分割して
その単位をオブジェクト指向的にデザインしてたわー－（前回プロジェクト）

でもRender()しかやらん関数と、
その外にはみ出た処理で細切れ関数だらけになって、
コード読みにくいは、実装も美しくならんわー－ ( ﾉД`)ﾄﾞｽﾙ

**デフォルトの名無しさん** · 2021/08/10(火) 14:00:37.21

Redux素晴らしいって言ってた人たちは今息してんのかな

**デフォルトの名無しさん** · 2021/08/10(火) 14:08:07.90

>>95
この流れでアトミックデザインを出してくるのものすっごく薄っぺらい

**デフォルトの名無しさん** · 2021/08/10(火) 14:15:30.49

>>97
アトミックデザイン使わず
あなたが表現してあげたら？

**デフォルトの名無しさん** · 2021/08/10(火) 14:57:48.57

>>98
単純にいらんやろ
「コンポーネントをオブジェクト指向でデザインしてた」で十分だしそれがReactらしくないって話やん

**デフォルトの名無しさん** · 2021/08/10(火) 15:49:45.99

>>99
コンポーネントの分割単位が伝わらんよ

**デフォルトの名無しさん** · 2021/08/10(火) 16:58:18.35

>>100
この流れで分割単位の話なんかいらないじゃん
88から読み直してみ

**デフォルトの名無しさん** · 2021/08/10(火) 18:51:43.55

> コンポーネント間のメソッド呼び出し

？？？？？？？？？？

**デフォルトの名無しさん** · 2021/08/10(火) 19:15:22.44

データフェッチに swr を使う前提であれば Recoil より swr で状態管理 hooks 作る方が良いんだろうか
両方使う例があるなら見てみたい

**デフォルトの名無しさん** · 2021/08/10(火) 19:38:32.34

>>103
swrはサーバーサイドの情報を取ってきてキャッシュするものだから扱う状態はサーバーステートとでも呼ぶべきものなんだよね
だからクライアントサイド固有の状態を
swrで扱おうとは俺は思わない
apolloなんかはクライアントのステートも一緒に扱えるのを売りにしてるけど余計な手間をかけてるだけにしか見えない

コンポーネントのローカルステート→useState, useReducer
クライアントのグローバルステート→redux, recoilなど(俺は好かんがcontextもここに入る)
サーバーステート→swr, react query, apolloなど

と使い分けてる

**デフォルトの名無しさん** · 2021/08/10(火) 20:04:49.62

>>104
参考になるありがとう
依存ライブラリ増加を嫌うことへの妥協案で >>103 を考えてたけどその方が役割分担が明確だから状態と取得キャッシュが混合するより状態を把握しやすそう

**デフォルトの名無しさん** · 2021/08/11(水) 19:43:56.70

>>88
ちゃんとhooks使ってるか？

**デフォルトの名無しさん** · 2021/08/11(水) 20:53:01.89

>>106
ぶっちゃけクラスの方が書きやすく
コードも綺麗だ（実力高い人の場合）

関数コンポーネントは
実装の自由度がhocksｂﾆその拡張ぐらｂ｢しかなく
フレームワーク的なのが造りづらく感じてる

**デフォルトの名無しさん** · 2021/08/12(木) 03:09:43.60

実力が高いw
本気でそう思ってるならqiitaでもzennでもどこでもいいから記事に書いてみろよ
間違いなく日本中からボロクソに叩かれるよ

**デフォルトの名無しさん** · 2021/08/12(木) 03:23:50.10

>>108
受け答えから見て実力が低そう

**デフォルトの名無しさん** · 2021/08/12(木) 17:08:42.90

>>107
クラス記法はこういう欠点があるからなあ
ttps://speakerdeck.com/sonatard/coheision-coupling?slide=24

**デフォルトの名無しさん** · 2021/08/12(木) 17:57:27.67

大方の単細胞腦は、SQLDBとNoSQLDBの時がそうであったように
関数コンポーネントとクラスコンポーネントのどちらかに
絶対的な優劣をつけたがってんじゃね？

今回も関数コンポーネントがマッチする場合と、
そうでない場合がありそうに見える

とくに、関数コンポーネントは
コンポーネントのインスタンスが自由に扱えない（扱えなさそう）から
そういった処理の実装時に（React用で無いJSライブラリを無理やり動かしてたようなケースとか）
トラブりそうな気がする

**デフォルトの名無しさん** · 2021/08/12(木) 18:16:18.47

典型的な「分かってないことが分かってない」ヤツ

**デフォルトの名無しさん** · 2021/08/12(木) 18:29:54.23

優劣はどうでもよくてクラスコンポーネントは互換性のために残されてるだけってのがReactの立場
新しい機能の中には関数コンポーネントからしか使えないものが出てるしこれからも増える
そもそも対等な選択肢ではないから議論する価値がない
状況に合わせて適応するってのが一番大事

**デフォルトの名無しさん** · 2021/08/12(木) 18:43:59.17

>>113
>> 互換性のために残されてるだけってのがReactの立場

なんと！(; ･`д･´)

**デフォルトの名無しさん** · 2021/08/12(木) 18:53:29.47

今の公式ドキュメントやチュートリアルは古くてクラスコンポーネントが大きく扱われてるのが本当に良くない
それはReactチームも分かってるからドキュメントを全面的に書き換えてる最中
もちろん関数コンポーネントとHooksメインで

**デフォルトの名無しさん** · 2021/08/12(木) 19:01:46.19

>>115
なんと！(; ･`д･´)

**デフォルトの名無しさん** · 2021/08/26(木) 15:41:55.94

フック初心者ですが
「フックは関数のトップレベルのみで呼び出してください。」
とあります。この関数は関数コンポーネントの意味で合ってますでしょうか？

**デフォルトの名無しさん** · 2021/08/26(木) 15:51:22.45

<Button1>と<Button2>で
それぞれ内部でuseStateを使ってたら

<Button1>
<Button2/>
</Button1>

はNGになるのでしょうか？

**デフォルトの名無しさん** · 2021/08/26(木) 16:38:00.65

>>117
> この関数は関数コンポーネントの意味

違う
ifやforなどの制御構造の内側から呼び出すなということ
要するに関数コンポーネントの呼び出しごとにhookが実行されたりされなかったりしてはいけない
なので?:や&&などと組み合わせるのもダメ

**デフォルトの名無しさん** · 2021/08/26(木) 16:39:25.72

>>118
それはOK
それぞれのコンポーネントは独立してるから問題ない

**デフォルトの名無しさん** · 2021/08/26(木) 16:45:57.37

>>120
有り難い！

しかし判り辛いですね
お題目だけだと
公式に具体例を上げてくれないと
勘違いしそう...

**デフォルトの名無しさん** · 2021/08/27(金) 13:34:41.69

hookの実行順でレンダリング毎の同一性を保証してるってわかってれば当たり前のことなんだけどね

**デフォルトの名無しさん** · 2021/08/27(金) 13:54:27.15

順番で状態を管理してるって一昔前の考えだと
なんだそりゃって感じになるんだけど
そもそも自分で管理するのはクソだから
全部フレームワークに任せちゃえってなってる
React凄い

**デフォルトの名無しさん** · 2021/08/27(金) 15:19:14.34

翻訳の問題かもしれんけど
「関数のトップレベル」という表現が判りずらい
「関数内部の最初の行あたり」で良くないか？

**デフォルトの名無しさん** · 2021/08/27(金) 15:45:49.48

function Foo(props) {
　if (props.flag) useEffect(...)
　...

最初の行だけどアウト

**デフォルトの名無しさん** · 2021/08/27(金) 15:48:30.00

「同じフックが常に実行されるようにすること」
これでよくね？

**デフォルトの名無しさん** · 2021/08/27(金) 15:49:19.59

関数のトップレベルの訳としての話しだよ(´Д`)

**デフォルトの名無しさん** · 2021/08/27(金) 15:57:29.79

モジュールのトップレベルもわからない？
それじゃトップレベルawaitも分からないしJSやるの無理やろ

**デフォルトの名無しさん** · 2021/08/28(土) 04:17:28.74

useCallback これっている？
fnのMemoならMemoってキーワードも名称から抜けてるし
useMemo(() => fn, deps) と同じならなおさら...

**デフォルトの名無しさん** · 2021/08/28(土) 04:35:56.44

fnをファットアローでインラインに書いてみ

**デフォルトの名無しさん** · 2021/08/28(土) 04:42:56.91

うー－ん！初学者だからなのか意味わからんです

**デフォルトの名無しさん** · 2021/08/28(土) 04:46:30.48

useCallback(fn, deps) が useMemo(() => fn, deps) こう書けるって事なんじゃないですか？

**デフォルトの名無しさん** · 2021/08/28(土) 04:54:08.75

useCallback((event) => {...}, deps) を useMemo(() => (event) => {...}, deps) って書きたいかって話

**デフォルトの名無しさん** · 2021/08/28(土) 05:10:24.97

>>133
良い！
そっちのが良い！

fnのメモなのに、useMemoCallback()になってないので直観的に思えない
初学者だと、ぱっと見CallbackするにはuseCallback()が必須に見える
理由はMemoの文字が入ってないから

**デフォルトの名無しさん** · 2021/08/28(土) 06:24:50.37

それ言ったらuseMemoなんてuseState使えばいいし内部でstate使ってるのにuseNemoStateじゃないの直感的じゃないよね

**デフォルトの名無しさん** · 2021/08/28(土) 08:24:29.02

useCallback だと名称から、
コールバック使いますよ！の宣言に見えると言っている

実際はコールバックをメモしますよ！だから
コード読むとき直感的でないと言っている

実際、初学者で関数コンポネント内でコールバックを定義するときは
useCallback()を使わなければならないと思いこんでいる人が少なからず居ると思う

**デフォルトの名無しさん** · 2021/08/28(土) 10:18:42.44

Ionicと比べた場合のReact nativeのメリットはアプリの動作速度が速いところ？

**デフォルトの名無しさん** · 2021/08/28(土) 10:19:30.77

ageてしまって申し訳ない

**デフォルトの名無しさん** · 2021/08/28(土) 10:59:30.05

>>136
初学者は
> useCallback()を使わなければならないと思いこんでいる
で丁度いい

**デフォルトの名無しさん** · 2021/08/28(土) 11:35:50.02

>>139
その心は？

**デフォルトの名無しさん** · 2021/08/28(土) 12:30:31.08

>>140
不要なuseCallbackを書いても実害はない
超大規模ならチリツモでパフォーマンスに影響あるかもしれないが初学者には関係ない
対して必要なuseCallbackを忘れるとuseEffectやReact.memoに影響しうるが初学者には気付きにくい
最初は愚直にuseCallback書いて後から不要なケースを学べばいい

**デフォルトの名無しさん** · 2021/08/28(土) 13:47:14.15

>>141
なるほど！
その意味であえて関数名もそうしたんだろうか...

**デフォルトの名無しさん** · 2021/08/28(土) 23:14:15.55

https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889
"カスタムフックは技術的にはReact機能ではない" って

ステートレス関数に状態を保持する機能が
jsに元よりあるという事でしょうか？

**デフォルトの名無しさん** · 2021/08/28(土) 23:39:41.08

カスタムフック===ユーザー定義フック
利用者(アプリケーション)で定義するものであってReactが提供する機能ではない

**デフォルトの名無しさん** · 2021/08/29(日) 00:17:55.75

>>144
それは了解してた！（質問を間違えた！）

フックを実現する技術（ステートレス関数に状態を保持する機能）は
ＪＳに元からあるという記述が公式にあったようにおもうのだけれど、
それは何？って事が言いたかった...

**デフォルトの名無しさん** · 2021/08/29(日) 01:51:35.47

>>145
前のリンクの文意から推察するに、フックはreactの特別な機能じゃなく
JSのクロージャーと array.push と array.pop とかで実装できるって事かな？

誤りありましたらご指摘下さい

**デフォルトの名無しさん** · 2021/08/29(日) 03:34:12.05

引用しろボケカス

**デフォルトの名無しさん** · 2021/08/29(日) 12:10:00.26

>>146
前のリンクの文意というのが

> Since Hooks are regular JavaScript functions, you can combine built-in Hooks provided by React into your own “custom Hooks”.

ら辺のことなら全然違う
Reactが提供する「組み込みフック」はJSの普通の関数だからそれを組み合わせて「カスタムフック」を作れると言ってるだけ
Reactが「組み込みフック」をどう実装しているかは触れてない
公式にあったという記述がなんのことかわからないがユーザー向けのドキュメントにReactの内部実装について書いてあるとは考えにくいので何か勘違いしてるんだろう

**デフォルトの名無しさん** · 2021/08/29(日) 12:12:17.85

もっともReactの組み込みフックがJS(+Flowtype)で実装されてるのは考えるまでもなく事実
詳しく知りたければソースを読めばいい
https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberHooks.new.js

**デフォルトの名無しさん** · 2021/08/29(日) 13:18:38.44

>>148
>>145 で言ったように、それは最初から解ってる
聞きたかったのは、フック自体の実装方法だよ！

>>149
そりゃそーーだ

**デフォルトの名無しさん** · 2021/08/29(日) 13:41:49.73

>>150
お前さぁ・・・
フック自体の実装方法が知りたいならそう書けよ
無関係なリンクや公式のことを書くから「そんなことは書いてない」「お前の勘違い」「ボケカス」って話になるんだよ
つーか5ch開く前にすることあるだろ

**デフォルトの名無しさん** · 2021/08/29(日) 14:30:21.63

>>150
preactのソースを読め
わずか400行そこらでhooksを実装してる
俺がここ数年で見たコードで最も美しいコードだ
型もついてるからめちゃくちゃ読みやすい

https://github.com/preactjs/preact/blob/master/hooks

**デフォルトの名無しさん** · 2021/08/29(日) 21:46:55.62

>>152
(; ･`д･´)

**デフォルトの名無しさん** · 2021/09/18(土) 13:05:29.83

reduxでいままでやってたような処理ってhooksではuseContextとuseRuducerの組み合わせでやるってことであってます？

**デフォルトの名無しさん** · 2021/09/20(月) 00:13:37.74

最近react始めて、リスト構造を持つようなデータの画面表示は配列のmap関数使ってjsx書けってのは理解したんだが、配列の要素の持つデータを一か所でも変えると残りの要素は全く変わってないのに全てレンダリング処理し直すことになるよな？
reactが差分を見てくれるから実際のDOMに反映されることはないんだろうけど、変更された要素のコンポーネントだけにレンダリング処理させる方法ってないんか？

**デフォルトの名無しさん** · 2021/09/20(月) 00:18:04.28

>>155
keyを使え
チュートリアルにも乗ってたはず

**デフォルトの名無しさん** · 2021/09/20(月) 01:13:11.44

>>155
ならない

**デフォルトの名無しさん** · 2021/09/20(月) 02:01:14.08

>>155
要素を別コンポーネントにしてReact.memoする
その場合も156が書いてるようにkeyは必須
でも各要素のレンダリングがよほど重くない限り気にすることないと思うぞ

**デフォルトの名無しさん** · 2021/09/20(月) 08:25:15.93

>>156,157,158
㌧クス
もうちょい調べてみるわ

**デフォルトの名無しさん** · 2021/09/20(月) 12:16:07.93

>>159
リストの出力の場合
アイテム毎にkey必ず振らなければない
key無いのはバグだからね
コンソールにエラー出てるはず

**デフォルトの名無しさん** · 2021/09/20(月) 12:53:40.75

keyが必要なのは確かだがそれが影響するのはリアルDOMの更新
keyがないと

> reactが差分を見てくれるから実際のDOMに反映されることはないんだろうけど

が機能しなくなる
本来の質問であるコンポーネントのレンダリングを回避するのに必要なのはReact.memo

**デフォルトの名無しさん** · 2021/09/20(月) 18:39:05.51

ID:GKDt5rSn の的外れ感

**デフォルトの名無しさん** · 2021/09/20(月) 19:00:16.83

ストアに登録する前に1ヶ月テスト運用したいのですがそんなこと可能なんですか？
テストユーザーは50名程度の予定です

**デフォルトの名無しさん** · 2021/09/20(月) 21:16:44.39

それReact関係ないよね

**デフォルトの名無しさん** · 2021/09/22(水) 02:10:39.83

うーん、先に代弁してくれてる人もいる通り、自分が聞きたかったことを解消できるものじゃなかったな、keyを付けないかんてのは改めてよく分かったけど。memoに関しては配列でmap関数でjsx組立ててる場合に言及した解説サイトは見当たらんかったし、うまくいくかは一度書いて調べてみるかー

**デフォルトの名無しさん** · 2021/09/22(水) 15:53:36.27

>>165だけど、memo化して特定の子要素だけレンダリングが呼び出されるのを確認できたわ
ありがとう

**デフォルトの名無しさん** · 2021/09/25(土) 21:37:04.38

Vue.jsだと公式サイトからリンクにawesome-vueってのがあって
https://github.com/vuejs/awesome-vue
ここ（Components & Libraries）にVue向けのlibraryやcontrolのリストが列挙されてて大変便利なんですけど、
これのReact版とか無いですか？

**デフォルトの名無しさん** · 2021/09/25(土) 21:39:38.06

言った直後にまんまのがあった...
awesome-react
awesome-react-components

笑

**デフォルトの名無しさん** · 2021/09/25(土) 23:03:28.71

awesome-react-hooksとかawesome-reduxとか思いつくのはだいたいあるキガス

**デフォルトの名無しさん** · 2021/09/27(月) 11:55:16.25

JSだとホットリロードが機能するけどTSだと機能しないのだけど
これはTSの自動トランスパイルが機能してないってことですかね？

**デフォルトの名無しさん** · 2021/09/27(月) 11:57:06.64

>>170
？