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