React と React Native のスレ (481レス)
React と React Native のスレ http://mevius.5ch.net/test/read.cgi/tech/1552134567/
上
下
前
次
1-
新
通常表示
512バイト分割
レス栞
203: デフォルトの名無しさん [sage] 2021/11/18(木) 08:07:20.27 ID:3dlOBCKi >>201 できる、と、簡単にできる、は全く違うからなぁ モナドもあるしとか言っても、それはオブジェクト指向の簡単さ、理解しやすさ、使いやすさには到底及ばないわけだよ http://mevius.5ch.net/test/read.cgi/tech/1552134567/203
204: デフォルトの名無しさん [sage] 2021/11/18(木) 08:56:13.25 ID:O/tzCGdy それってオブジェクト指向を学んでから進歩してませんって自己紹介にすぎなくてオブジェクト指向がしっくりこなかったstaticおじさんと同じなんだよな http://mevius.5ch.net/test/read.cgi/tech/1552134567/204
205: デフォルトの名無しさん [sage] 2021/11/18(木) 10:18:03.07 ID:5if92K6E 理解しやすさ簡単さはオブジェクト指向から学んできたおじさんと関数型から学んできた若者で違うから議論してもしゃーない それよりReact18がベータになったことだしConcurrent Renderingを知るべき そしたら行儀の悪いクラスコンポーネントがReactにとって不都合だとわかるし関数コンポーネントで行儀の悪いコードを書きにくくしてることもわかるだろう http://mevius.5ch.net/test/read.cgi/tech/1552134567/205
206: デフォルトの名無しさん [sage] 2021/11/18(木) 10:23:00.26 ID:5if92K6E Concurrent Renderingでは1回のレンダリングでrenderメソッドや関数コンポーネントが複数回呼ばれることが起こるようになる いわゆる再レンダリングで複数回じゃなくて例えばdidMountが呼ばれる前にrenderが何度も呼ばれることが起きるようになる だからrenderメソッドの中でthis.xxxを更新するなどの副作用があると破綻する それは元々やるべきことじゃなくて行儀か悪いだけなんだがクラスコンポーネントでは書こうと思えば簡単に書けてしまう そういうバグを検出するために前から用意されてたのがStrictモードだがあまり使われてるのを見たことはないな クラスコンポーネントだとthis.stateはthis.setStatateを通じてReactが管理してるがその他はクラスコンポーネント任せで野放しになってるのがReact側から見た問題 そこで導入されたのが関数コンポーネントで状態や副作用の扱いが制限されて簡単に見えないのは意図的なんだよね http://mevius.5ch.net/test/read.cgi/tech/1552134567/206
207: デフォルトの名無しさん [sage] 2021/11/18(木) 10:29:08.68 ID:5if92K6E 将来のReactではマウント・アンマウントも複数回行われるようになる これもコンポーネントのインスタンスが変わる場合の話じゃなくて一つのコンポーネントインスタンスが何度もマウント・アンマウントを繰り返すようになる クラスコンポーネントではdidMount/willUnmountか同じthisの上で何度も呼ばれることになるんだろう だから従来のライフサイクルという考え方だと破綻する useEffectは以前からライフサイクルと考えてはいけないと言われてるしそのためにuseEffectのコールバックは冪等にすべきという原則もある React18ではそれによって起きる問題を検出するためにStrict Effectモードが増える こうなるとuseEffectを従来の初期化処理・終了処理に読み替えて理解させるのは単純に間違いということになる どちらが理解しやすいかという次元の話じゃないんだよね http://mevius.5ch.net/test/read.cgi/tech/1552134567/207
208: デフォルトの名無しさん [sage] 2021/11/18(木) 13:11:55.12 ID:3dlOBCKi それはuseStateを使うかlet変数宣言を使うかってのと同じこと 行儀の悪いコードはファンクショナルでも好きなだけ書ける ようするにプログラマの腕とモラルの問題 ファンクショナルがクラスに対して優位と示す証拠ではないな Reactが将来のバージョンアップでライフタイムサイクルの仕様変更となるなら 新しいライフタイムサイクルに適応したライフタイムサイクルメソッドを設ければいいだけ そしてその方がuseEffectより遥かに直感的で理解しやすくなるだろう 実際どんな名称になるかはレアクトマニアでない俺は知らんがおそらくは initializeComponent componentDidMount componentWillUnmount disposeComponent この辺りだろう なんてわかりやすいんだ! そもそも仕様変更されるからファンクショナルのほうがいいんだーって論理破綻しとるよな 仕様変更されたらそれに合わせてクラスコンポーネントも進化するのが当たり前 進化しないならそれはベンダーの怠慢 http://mevius.5ch.net/test/read.cgi/tech/1552134567/208
209: デフォルトの名無しさん [sage] 2021/11/18(木) 14:18:18.92 ID:I+5yMFIL ライフサイクルが変わってもuseEffectは影響を受けない なぜならライフサイクルを扱う機能ではないから ライフサイクルという考え方そのものを改めたのが今の関数コンポーネントとhookなんだよ だからライフサイクルメソッドを増やせばいいなんて話ではないんだが伝わらないんだろうなw まぁ、取り残されたければそれでいいんじゃない? ここで吠えてもReactチームがクラスコンポーネントを進化させることはないよ 本気で主張したけりゃここに行きな https://github.com/reactwg/react-18/discussions http://mevius.5ch.net/test/read.cgi/tech/1552134567/209
210: デフォルトの名無しさん [sage] 2021/11/18(木) 15:19:55.65 ID:3dlOBCKi 本来ライフサイクルメソッドではないuseEffectを、ライフサイクル目的で使わざるを得ない、という状況が非常にバッドだよねぇ APIの目的外利用ってバッドノウハウとか、黒魔術って呼ばれてるものだよ 最近はそういうの随分と減ったと思ったけど、ファンクショナルコンポーネントでは現役なんだなぁ useEffectはライフサイクルじゃない!ってんなら useInitializer useFainalizer この2つのフックはオフィシャルに提供した方がいいだろね それをしないというのはベンダーの怠慢でしかないよ そうすれば、useEffectの第二引数に謎の空配列を渡すと、お掃除する時にだけ呼ばれます! なーんて回りくどい、明快さのかけらもない、暗黙の了解はもう、要らなくなるわけだ 冷静に考えてわかりにくいだろ? 空配列ってさ http://mevius.5ch.net/test/read.cgi/tech/1552134567/210
211: デフォルトの名無しさん [sage] 2021/11/18(木) 16:20:58.58 ID:yPpHDEE/ 本当に化石のような石頭だな 現場でもさぞかし迷惑な存在だろう ライフサイクルって考え方をしないんだからuseInitializerもuseFainalizerも不要なんだよ 間違った理解 コンポーネントがマウントされたら一度だけxxを実行する コンポーネントがアンマウントされたら一度だけyyを実行する (やや)正しい理解 コンポーネントがマウントされてる間はzzの状態を維持する zzの状態ってのはイベントをリッスンしてる状態とかwebsocketをサブスクイブしてる状態とか色々 useEffectのコールバックがそういう「状態を維持する」ものって考えると必然的に冪等にしなきゃいけなくなりConcurrent Renderingで繰り返し呼ばれても大丈夫になる 実際はマウントされてる間とかってのをもっと一般化して 正しい理解 依存配列が変わらない間は状態を維持する と考える 空配列は変わりようがないから結果的にマウントしてる間はずっと状態を維持するってことになる だからね、ライフサイクルって考え方がもはや不要で間違ってるんだよ いつまでも古い考えに固執しないでちゃんと勉強して? http://mevius.5ch.net/test/read.cgi/tech/1552134567/211
212: デフォルトの名無しさん [sage] 2021/11/18(木) 16:43:19.19 ID:3dlOBCKi >>211 で、それは手続きだらけの現実世界には対処不能、と ファンクショナル界隈の連中って、なんでか理想論ばっかなんだよなぁ コンポーネント初期化時に一回、何か処理をしたい、って自然な要求に直接答える術がない useEffectという本来違う目的のためにあるものを、使うしかない これがファンクショナルの限界 例えばコンポーネント初期化時にログを追記したい、とかな 「状態維持する」って考えじゃ実現できねえ処理なんざ、世の中にはいくらでもあるんだ http://mevius.5ch.net/test/read.cgi/tech/1552134567/212
213: デフォルトの名無しさん [sage] 2021/11/18(木) 17:09:36.68 ID:tb6GSOae ファンクショナルの限界じゃなくてお前の限界な http://mevius.5ch.net/test/read.cgi/tech/1552134567/213
214: デフォルトの名無しさん [sage] 2021/11/18(木) 18:20:41.19 ID:te8WLqUU うわあ・・・ ID:3dlOBCKi ttp://hissi.org/read.php/tech/20211118/M2RsT0JDS2k.html http://mevius.5ch.net/test/read.cgi/tech/1552134567/214
215: デフォルトの名無しさん [sage] 2021/11/18(木) 18:34:14.46 ID:3dlOBCKi >>213 いや、ファンクショナルの限界 ファンクショナルでは本来の目的から外れた使い方をしなければない 初回だけ処理したいだけなのに、状態を維持するファンクションを強要される http://mevius.5ch.net/test/read.cgi/tech/1552134567/215
216: デフォルトの名無しさん [sage] 2021/11/18(木) 19:03:14.82 ID:wacBz6NM 使う人が増えると残念な人も増えるいつもの光景 http://mevius.5ch.net/test/read.cgi/tech/1552134567/216
217: デフォルトの名無しさん [sage] 2021/11/18(木) 22:26:22.51 ID:fTWvydC+ こういう残念な人が出てくるのは公式サイトのドキュメンが悪いせいもある 元がクラスコンポーネント時代に作られてhooksは後付だからuseEffectがライフサイクルで説明されてしまってる 作り直してる新しいドキュメントでは最初からhooksで説明されるから勘違いおじさんが撲滅されるといいな http://mevius.5ch.net/test/read.cgi/tech/1552134567/217
218: デフォルトの名無しさん [sage] 2021/11/19(金) 09:42:11.48 ID:J0mGbVeO >>194 webpack-dev-server知らんのは流石に論外やろ http://mevius.5ch.net/test/read.cgi/tech/1552134567/218
219: デフォルトの名無しさん [sage] 2021/11/21(日) 14:16:11.00 ID:knw1x1gk 関数型のテクニックを使ってるってだけで、やってることはただのオブジェクト指向なんだよな 所詮は構文の違いでしかない 属性を使うかuseStateを使うか Reactにコールバックをどうやって教えるか それだけだ オブジェクト指向ユーザーは、素直にクラスを使ってそれを実装する 関数型ユーザーはやってること同じなんだが、イキがってフックとか使いだして、読み手を混乱させる JavaScriptの黎明期にプロトタイプベースのオブジェクト指向を使うか、クロージャベースのオブジェクト指向を使うかで揉めてたのと、同じ構図だ クロージャは関数型で発展したツールだが、実現したい事は結局、どっちもオブジェクト指向だった http://mevius.5ch.net/test/read.cgi/tech/1552134567/219
220: デフォルトの名無しさん [sage] 2021/11/21(日) 17:48:46.47 ID:UWSF5n1L お前がそう思うんならそうなんだろう お前ん中ではな http://mevius.5ch.net/test/read.cgi/tech/1552134567/220
221: デフォルトの名無しさん [sage] 2021/11/21(日) 17:55:48.39 ID:Wm1mwUDt オブジェクト指向のテクニックを使ってるだけでやってることはただの構造化なんだよな 所詮は構文の違いでしかない こうですか 最後は全部ただの機械語ですしね! http://mevius.5ch.net/test/read.cgi/tech/1552134567/221
222: デフォルトの名無しさん [sage] 2021/11/21(日) 20:40:46.53 ID:1yBKup76 例えばさ、 ちょっと複雑なコンポーネントを作ろうぜ、ってなったら、誰だってプログラムを分割するだろう? function useMyForm () { // 略::フックを使った汚いコード return { /* 美しいオブジェクト */ } } function MyForm () { const f = useMyForm() return <…..略 } useMyFormは何をやってるかというと、reactのフックを使った汚いコードを隠蔽して、 代わりにエレガントな形を持ったオブジェクトを生成して返してるんだね 詳細をカプセル化して、外から見て美しいオブジェクトを作る これはオブジェクト指向の基本にして、真髄 ファンクショナルのツールを使ってるだけで、やってることはオブジェクト指向、とはこういうこと それで、賢い人はこの匿名のオブジェクトに名前を付けて、さらに理解を助けるわけだ 例えばclass MyFormBehaivorとかね で、MyFormはMyFormBehaviorを継承してrenderを付けるだけ、だな、とすぐに気付く筈だね 結局さ、同じなんだよ、やってることが 同じなら、見た目に読みやすい方がいいに決まってる で、読みやすいのは断然、オブジェクト指向 QED http://mevius.5ch.net/test/read.cgi/tech/1552134567/222
223: デフォルトの名無しさん [sage] 2021/11/21(日) 20:55:13.47 ID:SJq+O3t2 しつこい http://mevius.5ch.net/test/read.cgi/tech/1552134567/223
224: デフォルトの名無しさん [sage] 2021/11/21(日) 21:04:01.25 ID:5qd0Nwtv ふむ、反論ができなくなったのかな? http://mevius.5ch.net/test/read.cgi/tech/1552134567/224
225: デフォルトの名無しさん [sage] 2021/11/21(日) 21:16:31.74 ID:zzbPLRQo 石頭の老害相手に反論しても無駄 http://mevius.5ch.net/test/read.cgi/tech/1552134567/225
226: デフォルトの名無しさん [sage] 2021/11/21(日) 22:35:19.11 ID:UWSF5n1L 馬鹿は論破できない http://mevius.5ch.net/test/read.cgi/tech/1552134567/226
227: デフォルトの名無しさん [sage] 2021/11/22(月) 10:00:05.25 ID:HTg16b0P 今どきfunctionって書くか? http://mevius.5ch.net/test/read.cgi/tech/1552134567/227
228: デフォルトの名無しさん [sage] 2021/11/22(月) 14:12:56.45 ID:yxcpONXb 書かない http://mevius.5ch.net/test/read.cgi/tech/1552134567/228
229: デフォルトの名無しさん [sage] 2021/12/03(金) 10:05:55.29 ID:OvhoAu9V ボタン連打するけしからん奴対策の定番ライブラリ教えてよ 送信フラグ管理はもう疲れた あ、いちおクロスプラットフォームのライブラリでヨロ http://mevius.5ch.net/test/read.cgi/tech/1552134567/229
230: デフォルトの名無しさん [sage] 2021/12/03(金) 16:35:10.63 ID:ZR9gqQ7Z ボタン押下で実行されるのをステートの値をtrueにするのみのsetAnyState(true)とかにして 実処理を useEffect(()=>{if(anyState){ // 実際したい処理 setAnyState(false) }},[anyState]) にしとけば連打されても大丈夫じゃね? http://mevius.5ch.net/test/read.cgi/tech/1552134567/230
231: デフォルトの名無しさん [sage] 2021/12/03(金) 18:25:47.16 ID:C14FVshC ボタンが押されたらボタンをdisabledにすればいいじゃん http://mevius.5ch.net/test/read.cgi/tech/1552134567/231
232: デフォルトの名無しさん [sage] 2021/12/03(金) 19:41:18.43 ID:L4TUqIiQ わろた http://mevius.5ch.net/test/read.cgi/tech/1552134567/232
メモ帳
(0/65535文字)
上
下
前
次
1-
新
書
関
写
板
覧
索
設
栞
歴
あと 249 レスあります
スレ情報
赤レス抽出
画像レス抽出
歴の未読スレ
Google検索
Wikipedia
ぬこの手
ぬこTOP
0.007s