React と React Native のスレ (481ﾚｽ)
React と React Native のスレ http://mevius.5ch.net/test/read.cgi/tech/1552134567/
上
下
前
次
1-
新
通常表示
512ﾊﾞｲﾄ分割
ﾚｽ栞
149: デフォルトの名無しさん [sage] 2021/08/29(日) 12:12:17.85 ID:OiCqCGE7 もっともReactの組み込みフックがJS(+Flowtype)で実装されてるのは考えるまでもなく事実 詳しく知りたければソースを読めばいい https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberHooks.new.js http://mevius.5ch.net/test/read.cgi/tech/1552134567/149
150: デフォルトの名無しさん [] 2021/08/29(日) 13:18:38.44 ID:V85oGWwE >>148 >>145 で言ったように、それは最初から解ってる 聞きたかったのは、フック自体の実装方法だよ！ >>149 そりゃそーーだ http://mevius.5ch.net/test/read.cgi/tech/1552134567/150
151: デフォルトの名無しさん [sage] 2021/08/29(日) 13:41:49.73 ID:1XJvcbdc >>150 お前さぁ・・・ フック自体の実装方法が知りたいならそう書けよ 無関係なリンクや公式のことを書くから「そんなことは書いてない」「お前の勘違い」「ボケカス」って話になるんだよ つーか5ch開く前にすることあるだろ http://mevius.5ch.net/test/read.cgi/tech/1552134567/151
152: デフォルトの名無しさん [sage] 2021/08/29(日) 14:30:21.63 ID:LbdE2Z/6 >>150 preactのソースを読め わずか400行そこらでhooksを実装してる 俺がここ数年で見たコードで最も美しいコードだ 型もついてるからめちゃくちゃ読みやすい https://github.com/preactjs/preact/blob/master/hooks http://mevius.5ch.net/test/read.cgi/tech/1552134567/152
153: デフォルトの名無しさん [] 2021/08/29(日) 21:46:55.62 ID:V85oGWwE >>152 (; ･`д･´) http://mevius.5ch.net/test/read.cgi/tech/1552134567/153
154: デフォルトの名無しさん [sage] 2021/09/18(土) 13:05:29.83 ID:ZtgFEKoc reduxでいままでやってたような処理ってhooksではuseContextとuseRuducerの組み合わせでやるってことであってます？ http://mevius.5ch.net/test/read.cgi/tech/1552134567/154
155: デフォルトの名無しさん [sage] 2021/09/20(月) 00:13:37.74 ID:fIDZ4k/Q 最近react始めて、リスト構造を持つようなデータの画面表示は配列のmap関数使ってjsx書けってのは理解したんだが、配列の要素の持つデータを一か所でも変えると残りの要素は全く変わってないのに全てレンダリング処理し直すことになるよな？ reactが差分を見てくれるから実際のDOMに反映されることはないんだろうけど、変更された要素のコンポーネントだけにレンダリング処理させる方法ってないんか？ http://mevius.5ch.net/test/read.cgi/tech/1552134567/155
156: デフォルトの名無しさん [sage] 2021/09/20(月) 00:18:04.28 ID:pwmEuNTH >>155 keyを使え チュートリアルにも乗ってたはず http://mevius.5ch.net/test/read.cgi/tech/1552134567/156
157: デフォルトの名無しさん [sage] 2021/09/20(月) 01:13:11.44 ID:GKDt5rSn >>155 ならない http://mevius.5ch.net/test/read.cgi/tech/1552134567/157
158: デフォルトの名無しさん [sage] 2021/09/20(月) 02:01:14.08 ID:Rr9hULkc >>155 要素を別コンポーネントにしてReact.memoする その場合も156が書いてるようにkeyは必須 でも各要素のレンダリングがよほど重くない限り気にすることないと思うぞ http://mevius.5ch.net/test/read.cgi/tech/1552134567/158
159: デフォルトの名無しさん [sage] 2021/09/20(月) 08:25:15.93 ID:fIDZ4k/Q >>156,157,158 ?クス もうちょい調べてみるわ http://mevius.5ch.net/test/read.cgi/tech/1552134567/159
160: デフォルトの名無しさん [sage] 2021/09/20(月) 12:16:07.93 ID:GKDt5rSn >>159 リストの出力の場合 アイテム毎にkey必ず振らなければない key無いのはバグだからね コンソールにエラー出てるはず http://mevius.5ch.net/test/read.cgi/tech/1552134567/160
161: デフォルトの名無しさん [sage] 2021/09/20(月) 12:53:40.75 ID:2GdVuLmq keyが必要なのは確かだがそれが影響するのはリアルDOMの更新 keyがないと > reactが差分を見てくれるから実際のDOMに反映されることはないんだろうけど が機能しなくなる 本来の質問であるコンポーネントのレンダリングを回避するのに必要なのはReact.memo http://mevius.5ch.net/test/read.cgi/tech/1552134567/161
162: デフォルトの名無しさん [sage] 2021/09/20(月) 18:39:05.51 ID:0kyk7DvV ID:GKDt5rSn の的外れ感 http://mevius.5ch.net/test/read.cgi/tech/1552134567/162
163: デフォルトの名無しさん [sage] 2021/09/20(月) 19:00:16.83 ID:wV0zqhwC ストアに登録する前に1ヶ月テスト運用したいのですがそんなこと可能なんですか？ テストユーザーは50名程度の予定です http://mevius.5ch.net/test/read.cgi/tech/1552134567/163
164: デフォルトの名無しさん [sage] 2021/09/20(月) 21:16:44.39 ID:hoT+CjfW それReact関係ないよね http://mevius.5ch.net/test/read.cgi/tech/1552134567/164
165: デフォルトの名無しさん [sage] 2021/09/22(水) 02:10:39.83 ID:LiQqK68K うーん、先に代弁してくれてる人もいる通り、自分が聞きたかったことを解消できるものじゃなかったな、keyを付けないかんてのは改めてよく分かったけど。memoに関しては配列でmap関数でjsx組立ててる場合に言及した解説サイトは見当たらんかったし、うまくいくかは一度書いて調べてみるかー http://mevius.5ch.net/test/read.cgi/tech/1552134567/165
166: デフォルトの名無しさん [sage] 2021/09/22(水) 15:53:36.27 ID:LiQqK68K >>165だけど、memo化して特定の子要素だけレンダリングが呼び出されるのを確認できたわ ありがとう http://mevius.5ch.net/test/read.cgi/tech/1552134567/166
167: デフォルトの名無しさん [] 2021/09/25(土) 21:37:04.38 ID:h7oOvGYh Vue.jsだと公式サイトからリンクにawesome-vueってのがあって https://github.com/vuejs/awesome-vue ここ（Components & Libraries）にVue向けのlibraryやcontrolのリストが列挙されてて大変便利なんですけど、 これのReact版とか無いですか？ http://mevius.5ch.net/test/read.cgi/tech/1552134567/167
168: デフォルトの名無しさん [] 2021/09/25(土) 21:39:38.06 ID:h7oOvGYh 言った直後にまんまのがあった... awesome-react awesome-react-components 笑 http://mevius.5ch.net/test/read.cgi/tech/1552134567/168
169: デフォルトの名無しさん [sage] 2021/09/25(土) 23:03:28.71 ID:PknKU9DC awesome-react-hooksとかawesome-reduxとか思いつくのはだいたいあるキガス http://mevius.5ch.net/test/read.cgi/tech/1552134567/169
170: デフォルトの名無しさん [sage] 2021/09/27(月) 11:55:16.25 ID:DYuWVLW4 JSだとホットリロードが機能するけどTSだと機能しないのだけど これはTSの自動トランスパイルが機能してないってことですかね？ http://mevius.5ch.net/test/read.cgi/tech/1552134567/170
171: デフォルトの名無しさん [sage] 2021/09/27(月) 11:57:06.64 ID:ZRFQgXut >>170 ？ http://mevius.5ch.net/test/read.cgi/tech/1552134567/171
172: デフォルトの名無しさん [sage] 2021/09/27(月) 12:09:11.49 ID:DYuWVLW4 再起動したら直ったわ http://mevius.5ch.net/test/read.cgi/tech/1552134567/172
173: デフォルトの名無しさん [sage] 2021/09/28(火) 17:29:52.40 ID:s3NqJ5bC reactのコンポーネントにクリックとかのイベント処理を付ける時って、onClick＝｛clickHandler｝みたいに書くじゃない このclickHandlerの処理の中でコンポーネントに渡してある属性を参照したいときってどう書くんだ？ clickHandlerを関数を返す関数にして、 clickHandler ＝（props）＝＞ () ＝＞｛‥｝ コンポーネントにはonClick＝｛clickHandler(props)｝ってやればできるんだけど、これだとuseCallbackが使えなくて毎回レンダリングし直されちゃうんだよな event.targetはネイティブのDOMの情報しか載ってこないし、誰か教えてえろいひと http://mevius.5ch.net/test/read.cgi/tech/1552134567/173
174: デフォルトの名無しさん [sage] 2021/09/28(火) 18:22:37.60 ID:Tl6wB3bi >>173 JSの基本機能にクロージャーというのがあってだな なんと！clickHandlerの中から外(つまりコンポーネント)の変数を参照できるんだよ！ const clickHandler = () => { console.log(props.xxx) } useCallback使ってるならdepsに並べる const clickHandler = useCallback(() => { console.log(props.xxx) }, [props.xxx]) http://mevius.5ch.net/test/read.cgi/tech/1552134567/174
175: デフォルトの名無しさん [sage] 2021/09/28(火) 21:49:04.22 ID:s3NqJ5bC >>174 変数名をpropsにしたのが紛らわしかったかもしれんが ｛arr.map((v)＝＞｛ ＜ComponentA key＝v.Id onClick＝｛clickHandler｝ /＞ ｝)｝ みたいなことをやってるときにclickHandlerの処理の中でvを参照するにはどうしたらいいのかな？っていうのが聞きたいことなんだが、クロージャ？にあたるのか？ 分かりにくくてスマン http://mevius.5ch.net/test/read.cgi/tech/1552134567/175
176: デフォルトの名無しさん [sage] 2021/09/28(火) 22:23:47.81 ID:yTRBGUiM memo 化したコンポーネントで ComponentA をラップし props と clickHandler を受け取って onClick=｛() => clickHandler(props)} とする http://mevius.5ch.net/test/read.cgi/tech/1552134567/176
177: デフォルトの名無しさん [sage] 2021/09/28(火) 22:25:37.88 ID:84Zwu3SC >>175 それならComponentAにvを渡してその中で onXxx={(ev) => clickHandler(ev, v)} http://mevius.5ch.net/test/read.cgi/tech/1552134567/177
178: デフォルトの名無しさん [sage] 2021/09/28(火) 23:04:47.64 ID:s3NqJ5bC >>176 なーるほどなぁ、面倒だけど確かにそれならできそう >>177 おー？これはuseCallbackで包めるんか？ちょっと明日試してみるわ おまえらthx http://mevius.5ch.net/test/read.cgi/tech/1552134567/178
ﾒﾓ帳
(0/65535文字)
上
下
前
次
1-
新
書
関
写
板
覧
索
設
栞
歴
あと 303 ﾚｽあります
ｽﾚ情報
赤ﾚｽ抽出
画像ﾚｽ抽出
歴の未読ｽﾚ
Google検索
Wikipedia
ぬこの手
ぬこTOP
0.017s