React と React Native のスレ (481ﾚｽ)
上下前次1-新
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を監視してやればすんなり行きそうだけどなぁ
406: 2022/10/05(水)10:49 ID:RsX5Dgpw(1) AAS
>>405
ありがとうございます。
useStateでテーブル用データの配列を管理し、データ取得されるたびにその配列の先頭に追加、sliceで20件だけ切り出し、という方法でやりたいことはできました。
ユニークなkeyを付けることで再レンダリング対象が更新部分だけになるのも確認できました。
データはWebSocketで受信して取得しますが、どなたかのサイトで紹介されていた、コンポーネント内のuseRefでWebSocketオブジェクトを持ち、useEffectで初回時のみに接続するという方法でとりあえあず動作しました。
407: 2022/11/05(土)23:06 ID:uWVkhL+y(1) AAS
react native詳しいニキ教えて
下部に表示されるメニューバー（以下、Menu）のコンポーネント作ってて
ページによって表示/非表示の設定をしたいんだ
各ページコンポーネントでMenuを直接呼び出すような作りにすれば確かに実装出来るけど
ページが切り替わった時点でアニメーションが途切れるし、なによりナンセンスな気がする
で、次の案。
App→Main→各ページという構成を取ってるけど
MainでMenuを呼び出すようにした。
で、これをRecoilで管理するboolean型のグローバルstateで表示/非表示にする。
あとは各ページの初回レンダリング時にstateの値を書き換えるだけで解決……と思ったけど
前のページにバックしたときに改めてstateの値が書き換わらないんだ。
これを踏まえて何かいい方法ないですか？
408: 2022/11/05(土)23:47 ID:ocl/XM+V(1) AAS
知らんけどrecoil-syncってのがあるらしいな知らんけど
409: .NET MAUI HighSchool 2022/11/11(金)12:32 ID:kw0okeTL(1/3) AAS
Metaが倒産したらReactどうなってしまうんだ？ってレス見たんだけどほんとどうなってしまうん？
誰かに買われるとか？？？
410: 2022/11/11(金)12:42 ID:BY70aiHB(1) AAS
Vercelは確実に欲しがる。Remixを買ったShopifyも欲しがるかも。Googleが掻っ攫うかもしれない
411: .NET MAUI HighSchool 2022/11/11(金)12:43 ID:kw0okeTL(2/3) AAS
やっぱり大手に買われるのか…
412(1): 2022/11/11(金)13:19 ID:P8cdLDDc(1) AAS
React NativeはMSが持っていきそう
413: .NET MAUI HighSchool 2022/11/11(金)13:20 ID:kw0okeTL(3/3) AAS
>>412
ありえそう
OfficeとかReact Nativeやしな
414(1): 2022/11/21(月)04:31 ID:9tdtmBpP(1) AAS
プログラマーならview定義もJavaScriptでする方が幸せじゃないですか？
外部ﾘﾝｸ:zenn.dev
415: 2022/11/21(月)19:55 ID:WHQv7Vmu(1/2) AAS
>>414
入ったプロジェクトがこんな状態になってたらマネージャーかリーダーの判断力があやしすぎて即転職考えるかもしれん
416: 2022/11/21(月)20:03 ID:WHQv7Vmu(2/2) AAS
(試みとしては面白いと思うけど)
417: 2022/11/21(月)20:32 ID:530w1iq8(1/2) AAS
hyperTextじゃん
418: 2022/11/21(月)20:33 ID:530w1iq8(2/2) AAS
textじゃねえやHyperScript
419: 2022/11/21(月)20:54 ID:F57+7x5h(1) AAS
ClojureScriptでReact使うのがまんまそんなだった
Lisp界隈の人はなんでもS式だからな
420: 2022/11/22(火)07:44 ID:XlS3y7OH(1) AAS
tic-tac-toe。今更変わらないのはわかってるけどpure jsで何の不便もないじゃん。
外部ﾘﾝｸ:jsfiddle.net
421: 2022/11/22(火)09:58 ID:J3G+pIhw(1) AAS
それならここに来る必要ないやろ
422(1): 2022/11/23(水)04:11 ID:TMK4+5Kw(1) AAS
reactでjsx使わない話なんだけどダメ？
タグ手打ちで補完が効かないhyperscriptとかもっとマイナーななんとかhelperとか
誰も使ってない怪しいライブラリに頼らずとも自分で200行コード書くだけで
jsx使わないで済むのは自分は衝撃だった。
見たことない構文だけどただのjsなんで補完もインデントも問題なし。閉じタグ書かなくていい。
[div, {className: 'game-info'},
[div, status,],
[ol, moves,],
],
423: 2022/11/23(水)04:25 ID:mlnYnqLg(1) AAS
jQuery絶対王者
424: 2022/11/23(水)05:07 ID:AN01Xhf0(1) AAS
>>422
チームで合意が取れてれば良いんじゃないかな
自分は好みとかあまりなくて標準だったりプロジェクトだったりに適応するのが好きだから
プロジェクトでそうなってたら合わせるかな
もちろん自分が一からやるなら現時点で大勢が使ってる標準的なjsxを使うし
425: 2022/11/23(水)08:06 ID:Wy3yaUuF(1) AAS
html in jsはカッコ地獄で使い続けられないと思った
mapや三項演算が組み合わさると、あっという間にreadabilityも破綻
jsxは < > 構文なのでカッコに関してはマシ
426: 2022/11/23(水)09:09 ID:6E3xEeS7(1) AAS
HTMLをHTMLとして認識しにくいのはイヤ
427: 2022/11/23(水)13:34 ID:Y3sgMMcN(1) AAS
jsx ももはやただのjsなんで補完もインデントも問題ないんだよなあ
閉じタグはあった方が見やすいしこれも補完聞くから書くのも手間じゃないし
428: 2022/11/23(水)14:08 ID:kuPI2CLi(1) AAS
JSXの構文はもっと省略できるよね
429(1): 2022/11/23(水)14:20 ID:pkO67U6a(1) AAS
ReactがFB内で生まれたのがES5より前だからかJSXでclassやforを属性名として使えないのはそろそろ修正してもいいと思うわ
上下前次1-新書関写板覧索設栞歴
あと 52 ﾚｽあります
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ
ぬこの手 ぬこTOP 0.013s