React と React Native のスレ (481ﾚｽ)
上下前次1-新
146(1): 2021/08/29(日)01:51 ID:V85oGWwE(2/4) AAS
>>145
前のリンクの文意から推察するに、フックはreactの特別な機能じゃなく
JSのクロージャーと array.push と array.pop とかで実装できるって事かな？
誤りありましたらご指摘下さい
147: 2021/08/29(日)03:34 ID:pzZWZODD(1) AAS
引用しろボケカス
148(1): 2021/08/29(日)12:10 ID:OiCqCGE7(1/2) AAS
>>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の内部実装について書いてあるとは考えにくいので何か勘違いしてるんだろう
149(1): 2021/08/29(日)12:12 ID:OiCqCGE7(2/2) AAS
もっともReactの組み込みフックがJS(+Flowtype)で実装されてるのは考えるまでもなく事実
詳しく知りたければソースを読めばいい
外部ﾘﾝｸ[js]:github.com
150(2): 2021/08/29(日)13:18 ID:V85oGWwE(3/4) AAS
>>148
>>145 で言ったように、それは最初から解ってる
聞きたかったのは、フック自体の実装方法だよ！
>>149
そりゃそーーだ
151: 2021/08/29(日)13:41 ID:1XJvcbdc(1) AAS
>>150
お前さぁ・・・
フック自体の実装方法が知りたいならそう書けよ
無関係なリンクや公式のことを書くから「そんなことは書いてない」「お前の勘違い」「ボケカス」って話になるんだよ
つーか5ch開く前にすることあるだろ
152(1): 2021/08/29(日)14:30 ID:LbdE2Z/6(1) AAS
>>150
preactのソースを読め
わずか400行そこらでhooksを実装してる
俺がここ数年で見たコードで最も美しいコードだ
型もついてるからめちゃくちゃ読みやすい
外部ﾘﾝｸ:github.com
153: 2021/08/29(日)21:46 ID:V85oGWwE(4/4) AAS
>>152
(; ･`д･´)
154: 2021/09/18(土)13:05 ID:ZtgFEKoc(1) AAS
reduxでいままでやってたような処理ってhooksではuseContextとuseRuducerの組み合わせでやるってことであってます？
155(4): 2021/09/20(月)00:13 ID:fIDZ4k/Q(1/2) AAS
最近react始めて、リスト構造を持つようなデータの画面表示は配列のmap関数使ってjsx書けってのは理解したんだが、配列の要素の持つデータを一か所でも変えると残りの要素は全く変わってないのに全てレンダリング処理し直すことになるよな？
reactが差分を見てくれるから実際のDOMに反映されることはないんだろうけど、変更された要素のコンポーネントだけにレンダリング処理させる方法ってないんか？
156(1): 2021/09/20(月)00:18 ID:pwmEuNTH(1) AAS
>>155
keyを使え
チュートリアルにも乗ってたはず
157(1): 2021/09/20(月)01:13 ID:GKDt5rSn(1/2) AAS
>>155
ならない
158(1): 2021/09/20(月)02:01 ID:Rr9hULkc(1) AAS
>>155
要素を別コンポーネントにしてReact.memoする
その場合も156が書いてるようにkeyは必須
でも各要素のレンダリングがよほど重くない限り気にすることないと思うぞ
159(1): 2021/09/20(月)08:25 ID:fIDZ4k/Q(2/2) AAS
>>156,157,158
?クス
もうちょい調べてみるわ
160: 2021/09/20(月)12:16 ID:GKDt5rSn(2/2) AAS
>>159
リストの出力の場合
アイテム毎にkey必ず振らなければない
key無いのはバグだからね
コンソールにエラー出てるはず
161: 2021/09/20(月)12:53 ID:2GdVuLmq(1) AAS
keyが必要なのは確かだがそれが影響するのはリアルDOMの更新
keyがないと
> reactが差分を見てくれるから実際のDOMに反映されることはないんだろうけど
が機能しなくなる
本来の質問であるコンポーネントのレンダリングを回避するのに必要なのはReact.memo
162: 2021/09/20(月)18:39 ID:0kyk7DvV(1) AAS
ID:GKDt5rSn の的外れ感
163: 2021/09/20(月)19:00 ID:wV0zqhwC(1) AAS
ストアに登録する前に1ヶ月テスト運用したいのですがそんなこと可能なんですか？
テストユーザーは50名程度の予定です
164: 2021/09/20(月)21:16 ID:hoT+CjfW(1) AAS
それReact関係ないよね
165(1): 2021/09/22(水)02:10 ID:LiQqK68K(1/2) AAS
うーん、先に代弁してくれてる人もいる通り、自分が聞きたかったことを解消できるものじゃなかったな、keyを付けないかんてのは改めてよく分かったけど。memoに関しては配列でmap関数でjsx組立ててる場合に言及した解説サイトは見当たらんかったし、うまくいくかは一度書いて調べてみるかー
166: 2021/09/22(水)15:53 ID:LiQqK68K(2/2) AAS
>>165だけど、memo化して特定の子要素だけレンダリングが呼び出されるのを確認できたわ
ありがとう
167: 2021/09/25(土)21:37 ID:h7oOvGYh(1/2) AAS
Vue.jsだと公式サイトからリンクにawesome-vueってのがあって
外部ﾘﾝｸ:github.com
ここ（Components & Libraries）にVue向けのlibraryやcontrolのリストが列挙されてて大変便利なんですけど、
これのReact版とか無いですか？
168: 2021/09/25(土)21:39 ID:h7oOvGYh(2/2) AAS
言った直後にまんまのがあった...
awesome-react
awesome-react-components
笑
169: 2021/09/25(土)23:03 ID:PknKU9DC(1) AAS
awesome-react-hooksとかawesome-reduxとか思いつくのはだいたいあるキガス
170(1): 2021/09/27(月)11:55 ID:DYuWVLW4(1/2) AAS
JSだとホットリロードが機能するけどTSだと機能しないのだけど
これはTSの自動トランスパイルが機能してないってことですかね？
171: 2021/09/27(月)11:57 ID:ZRFQgXut(1) AAS
>>170
？
172: 2021/09/27(月)12:09 ID:DYuWVLW4(2/2) AAS
再起動したら直ったわ
173(1): 2021/09/28(火)17:29 ID:s3NqJ5bC(1/3) AAS
reactのコンポーネントにクリックとかのイベント処理を付ける時って、onClick＝｛clickHandler｝みたいに書くじゃない
このclickHandlerの処理の中でコンポーネントに渡してある属性を参照したいときってどう書くんだ？
clickHandlerを関数を返す関数にして、
clickHandler ＝（props）＝＞ () ＝＞｛‥｝
コンポーネントにはonClick＝｛clickHandler(props)｝ってやればできるんだけど、これだとuseCallbackが使えなくて毎回レンダリングし直されちゃうんだよな
event.targetはネイティブのDOMの情報しか載ってこないし、誰か教えてえろいひと
174(1): 2021/09/28(火)18:22 ID:Tl6wB3bi(1) AAS
>>173
JSの基本機能にクロージャーというのがあってだな
なんと！clickHandlerの中から外(つまりコンポーネント)の変数を参照できるんだよ！
const clickHandler = () => {
console.log(props.xxx)
}
useCallback使ってるならdepsに並べる
const clickHandler = useCallback(() => {
console.log(props.xxx)
}, [props.xxx])
175(1): 2021/09/28(火)21:49 ID:s3NqJ5bC(2/3) AAS
>>174
変数名をpropsにしたのが紛らわしかったかもしれんが
｛arr.map((v)＝＞｛
＜ComponentA key＝v.Id onClick＝｛clickHandler｝ /＞
｝)｝
みたいなことをやってるときにclickHandlerの処理の中でvを参照するにはどうしたらいいのかな？っていうのが聞きたいことなんだが、クロージャ？にあたるのか？
分かりにくくてスマン
上下前次1-新書関写板覧索設栞歴
あと 306 ﾚｽあります
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ
ぬこの手 ぬこTOP 0.008s