React と React Native のスレ (481ﾚｽ)
React と React Native のスレ http://mevius.5ch.net/test/read.cgi/tech/1552134567/
上
下
前
次
1-
新
通常表示
512ﾊﾞｲﾄ分割
ﾚｽ栞
376: デフォルトの名無しさん [] 2022/09/27(火) 20:39:34.88 ID:CMfXpwKQ >>374 リモートだけどSESだから元請けに当たる人に対して ガチでWEB開発業務1ヶ月目の俺からは意見しにくいんよ、、(笑) スタイリングぐちゃぐちゃだったのはさすがに言ったけど でも言うとこは言ったがいいね。ありがとう。 >>375 アジャイルってこんなもんなんじゃないの？知らんけど(笑) でもしっかりしたreact案件でちゃんと現場のこと学びたいとは思うわ http://mevius.5ch.net/test/read.cgi/tech/1552134567/376
377: デフォルトの名無しさん [sage] 2022/09/27(火) 22:23:16.69 ID:/UUTRmF2 >>362 jsでクラス使わないことは多いが、だからといって今時 __proto__ なんて直接使わないから プロトタイプベース云々は関係ない。 http://mevius.5ch.net/test/read.cgi/tech/1552134567/377
378: 359 [sage] 2022/09/27(火) 23:17:49.69 ID:oW3s344K >>373 React実践の教科書、2021 基礎はこの本で良い。3日で読める propsのバケツリレーは、 グローバルState である、useContext を使うと書いてある これ以上に複雑なものは、Redux, Recoil, Apollo Client など useMemo など、use何々にはどういう機能があるか、すべて見た方がよい http://mevius.5ch.net/test/read.cgi/tech/1552134567/378
379: 359 [sage] 2022/09/27(火) 23:29:13.30 ID:oW3s344K Reactビギナーズガイド ――コンポーネントベースのフロントエンド開発入門 Stoyan Stefanov, 2017 この本には、createClass と書いてあるけど、 2017年6月には非推奨になっている var MyComponent = React.createClass({ render: function() { return React.DOM.span(null, "カスタムコンポーネント"); } }); http://mevius.5ch.net/test/read.cgi/tech/1552134567/379
380: デフォルトの名無しさん [sage] 2022/09/27(火) 23:53:21.49 ID:BMrl8a7V なんでそんなにクラスコンポーネントの話にこだわるの？ http://mevius.5ch.net/test/read.cgi/tech/1552134567/380
381: デフォルトの名無しさん [] 2022/09/28(水) 20:45:18.22 ID:KHG5QcXL presentationalとcontainerに分けて書くといいよ、って本かなんかで読んだことある。今のプロジェクトでも実践されてる。 で、その辺の構成の都合上、仕方なくコールバック関数使ってpropsの値を子→親に伝播させてるけど普通なの？ 一般的には状態管理ライブラリ使うべきだと思ってるけど認識違う？ http://mevius.5ch.net/test/read.cgi/tech/1552134567/381
382: デフォルトの名無しさん [sage] 2022/09/28(水) 21:57:59.16 ID:Km2fmn1T プレゼンテーショナルとコンテナに分けるのはRedux全盛時代の流行でhooks以降は廃れた それとは別に親から子にコールバック渡すのは極めて普通 useReducerなんかそういう使い方がほとんどだろ その親がほとんどルート(いわゆるAppコンポーネント)に近いくらい上位にいるならそれはグローバルステート http://mevius.5ch.net/test/read.cgi/tech/1552134567/382
383: デフォルトの名無しさん [sage] 2022/09/28(水) 22:11:03.79 ID:0Dahyjoe グローブステートにRxで変更通知でどうですか？ http://mevius.5ch.net/test/read.cgi/tech/1552134567/383
384: デフォルトの名無しさん [] 2022/09/28(水) 22:46:08.76 ID:HuYE1qae >>382 へー！なるほど！ その経緯は知らんかったわ！ありがとう propsの大原則として親→子→…… があって、それを解消するためのグローバルステートと状態管理ライブラリ、という理解なんだけど グローバルステート使わずに普通にコールバックして直接、 子→親、孫→親みたいな渡し方してるのに違和感感じてたのよ 現場では割と普通のことなのね http://mevius.5ch.net/test/read.cgi/tech/1552134567/384
385: デフォルトの名無しさん [sage] 2022/09/28(水) 23:33:30.69 ID:N1fcW8jX え、一つのコンポーネントを表示とロジックに分けるやつもう廃れたのか… 今はどういうのが流行りなの？ http://mevius.5ch.net/test/read.cgi/tech/1552134567/385
386: デフォルトの名無しさん [sage] 2022/09/28(水) 23:38:10.61 ID:QcgKtZxa ひょっとしてReact Routerって仕組み上ブラウザキャッシュ効かない？ http://mevius.5ch.net/test/read.cgi/tech/1552134567/386
387: デフォルトの名無しさん [sage] 2022/09/29(木) 01:06:57.42 ID:6obmiat7 >>385 ロジックはhooks データ取得もhooks (swrやReact Query) そのデータ取得hooksはデータを表示するコンポーネントで呼び出す これは特にGraphQLではフラグメントコロケーションと呼ばれる GraphQL以外でもRemixがコロケーションを実現してる 総じて変に分類するより凝集度を高くする方向に進化してる http://mevius.5ch.net/test/read.cgi/tech/1552134567/387
388: デフォルトの名無しさん [] 2022/09/29(木) 01:29:18.28 ID:ffAnOOZb >>387 例えば複雑な条件と処理に応じた多様なウンコの画像表示するコンポーネントShowUnkoがあったとして その条件や処理をShowUnkoの中に全部書くのが流行りなん？ presentationalとcontainerの例だと 複雑な条件と処理をcontainerに記述して 算出した結果をpresentationalに渡してウンコの画像が出るけど 今の流行りは色々なライブラリ駆使してそれらを一つに纏める、ってこと？ …まぁ少なくとも個人開発してる頃は後者のが全然やりやすかったけど http://mevius
.5ch.net/test/read.cgi/tech/1552134567/388
389: デフォルトの名無しさん [sage] 2022/09/29(木) 07:28:27.58 ID:+pwL/l2M >>386 くっそ短絡的だった。サイズがデカイjsファイルだけURL固定すりゃ良いだけだったわ…… http://mevius.5ch.net/test/read.cgi/tech/1552134567/389
390: デフォルトの名無しさん [sage] 2022/09/29(木) 07:40:58.14 ID:6obmiat7 >>388 いやいやいやロジックはhooksって書いたじゃん 複雑な条件や処理とやらはuseUnkoに書いてShowUnkoはそれを使う http://mevius.5ch.net/test/read.cgi/tech/1552134567/390
391: デフォルトの名無しさん [sage] 2022/09/29(木) 08:51:14.08 ID:DUgkcSyO Ruby on Rails では、コントローラーの肥大化を防ぐために、 Skinny Controller, Fat Model を推奨した。 その結果、モデルが肥大化した そこで今度は、モデルの処理を減らすために、 Form Object, Service Object へ処理を分けた また表示処理は、Presenter へ分けた。 それで、Form Presenter, Model Presenter が出来た http://mevius.5ch.net/test/read.cgi/tech/1552134567/391
392: デフォルトの名無しさん [] 2022/09/29(木) 08:54:50.37 ID:vsyIBCv9 >>390 コンポーネントにロジックを記載するのではなく カスタムhooksとして切り出すってこと？ 理解力乏しくてすまん http://mevius.5ch.net/test/read.cgi/tech/1552134567/392
393: デフォルトの名無しさん [sage] 2022/09/29(木) 09:34:16.50 ID:6obmiat7 >>392 そういうこと http://mevius.5ch.net/test/read.cgi/tech/1552134567/393
394: 359 [sage] 2022/09/29(木) 09:39:43.34 ID:DUgkcSyO React実践の教科書、2021 この本には、カスタムフック・自作のHooks も書いてある ロジックをコンポーネントから分離し、複数コンポーネントで再利用する。 共有ロジック http://mevius.5ch.net/test/read.cgi/tech/1552134567/394
395: デフォルトの名無しさん [sage] 2022/09/29(木) 09:52:34.39 ID:clewMKt/ >>393 hooks限定である必要はないと思うが... http://mevius.5ch.net/test/read.cgi/tech/1552134567/395
396: デフォルトの名無しさん [sage] 2022/09/29(木) 10:45:31.47 ID:6obmiat7 >>395 元々コンテナコンポーネントに書く必要がないようなロジックの話をしてるつもりはないんだよなぁ React無関係なロジックを普通の関数に切り出す話ならReactスレで話さなくていいだろ 状態やライフサイクルなどReactに依存したロジックを切り出すならuseStateやuseEffectを使う関数になりそれはカスタムhooksと呼ばれるということ http://mevius.5ch.net/test/read.cgi/tech/1552134567/396
397: デフォルトの名無しさん [sage] 2022/09/29(木) 10:54:55.41 ID:clewMKt/ ステートレスなロジックも意味なくhooksとして？実装するとでも言うのかい？ http://mevius.5ch.net/test/read.cgi/tech/1552134567/397
398: デフォルトの名無しさん [] 2022/09/29(木) 11:20:12.57 ID:vsyIBCv9 ごめん、一番聞きたかったのは コールバック等使ったpropsの逆流（リフトアップ？）のことなんだけど 例えば、ダイアログ等実装する場合recoil使ってstate管理すれば簡単に実装出来ると思うんだけど わざわざリフトアップする必要ってあるの？？ http://mevius.5ch.net/test/read.cgi/tech/1552134567/398
399: デフォルトの名無しさん [sage] 2022/09/29(木) 11:41:08.20 ID:RG+lw4Yl 俺の場合はコントロールの状態は極力propsで渡して そのコントロール起因で発生した状態の変更は そのコントロールの外部からディスパッチして またコントロールのpropsとして再投入するパターンに落ち着いた http://mevius.5ch.net/test/read.cgi/tech/1552134567/399
400: デフォルトの名無しさん [sage] 2022/09/29(木) 12:43:16.88 ID:N+5tSsEm 全部props渡しはどのコンポーネントが何のデータに依存してるか明確にわかるのが好き http://mevius.5ch.net/test/read.cgi/tech/1552134567/400
401: デフォルトの名無しさん [sage] 2022/09/29(木) 13:42:04.91 ID:RG+lw4Yl propsて受け取った状態を 内部てstateとして別管理すると嵌まるパターンが多いね http://mevius.5ch.net/test/read.cgi/tech/1552134567/401
402: デフォルトの名無しさん [sage] 2022/10/04(火) 20:36:43.24 ID:R+w5qX88 React勉強中です テーブルが例えば最大行数20行として、新しいデータを取得するたびに先頭行に追加、末尾データは削除、というのをしたいです。 以前直接DOMを操作していたときは、テーブルのElementに対し、insertRow()、deleteRow()を行っていました。 これをReactでやろうとした時、テーブルの各行のデータを配列で持っているとすると、下記のようにmapを使って各行のHTMLを生成するというやりかたがあるかと思いますが、 この場合は行の追加の度に全行が再レンダリ
ングされてしまいますよね？ const table_data = ['a', 'b', 'c', 〜] return( <tbody> { table_data.map((val) =><tr><td>{val}</td></tr>) } </tbody> ) 前述のような先頭行に追加、末尾行は削除、というのをReactでやるとすると、どいういう感じの処理になるのでしょうか？ ヒントをいただけると助かります。 まずは、1行ずつをコンポーネントにするのは必須ですかね？ http://mevius.5ch.net/test/read.cgi/tech/1552134567/402
403: デフォルトの名無しさん [sage] 2022/10/04(火) 21:43:53.97 ID:ZExEo8/e >>402 > 先頭行に追加、末尾行は削除 keyを調べれ > 1行ずつをコンポーネントにするのは必須 んなこたぁない http://mevius.5ch.net/test/read.cgi/tech/1552134567/403
404: デフォルトの名無しさん [sage] 2022/10/04(火) 22:08:33.94 ID:R+w5qX88 >>403 ありがとうございます。 なるほど、keyが同じで中身が変わらなければ再レンダリングされないのですね。 だから必ずkeyを付けるんですね。 http://mevius.5ch.net/test/read.cgi/tech/1552134567/404
405: デフォルトの名無しさん [] 2022/10/05(水) 00:29:27.00 ID:zhKCpglg keyはどのみち付けないとWarning出るね バックエンド連携とかどうするつもりなのか知らんけど 普通に先頭20件だけ表示するように指定してやって useEffectでtable_dataを監視してやればすんなり行きそうだけどなぁ http://mevius.5ch.net/test/read.cgi/tech/1552134567/405
ﾒﾓ帳
(0/65535文字)
上
下
前
次
1-
新
書
関
写
板
覧
索
設
栞
歴
あと 76 ﾚｽあります
ｽﾚ情報
赤ﾚｽ抽出
画像ﾚｽ抽出
歴の未読ｽﾚ
Google検索
Wikipedia
ぬこの手
ぬこTOP
0.008s